diff --git a/css/style.css b/css/style.css
new file mode 100644
index 00000000..bac1219a
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,15 @@
+body {
+    text-align: center;
+    background-color: wheat;
+}
+
+.inputs {
+    padding-top: 50px;
+}
+
+#bg-image {
+    margin: o auto;
+    padding-top: 80px;
+    height: 400px;
+    width: 500px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 695897ea..6a217fdc 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <script defer src="./js/scripts.js"></script>
+  <link rel="stylesheet" href="./css/style.css">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Hello Front-End</title>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <div class="inputs">
+    <input id="userInput" type="text">
+    <button id="button" type="button">Search</button>
+    <button id="stopButton" type="button">Stop</button>
+  </div>
+  <div class="instruction">
+    <p id="instruction">Insert in the search bar what images you would like to see!!</p>
+  </div>
+  <img id="bg-image" src="https://static.vecteezy.com/system/resources/previews/011/916/337/original/emoji-smile-icon-symbol-on-yellow-background-smiley-face-cartoon-character-wallpaper-vector.jpg">
 </body>
 </html>
+
+
diff --git a/js/scripts.js b/js/scripts.js
new file mode 100644
index 00000000..db108e6d
--- /dev/null
+++ b/js/scripts.js
@@ -0,0 +1,59 @@
+const button = document.querySelector("#button")
+const userInput = document.querySelector("#userInput")
+const background = document.querySelector("#imageBox")
+const stopButton = document.querySelector("#stopButton")
+const bgImage = document.querySelector("#bg-image")
+const instruction = document.querySelector("#instruction")
+let runInterval;
+let images = []
+let count = 0
+
+stopButton.addEventListener("click", function(){
+    clearInterval(runInterval)
+    userInput.value = ""
+    bgImage.src = "https://static.vecteezy.com/system/resources/previews/011/916/337/original/emoji-smile-icon-symbol-on-yellow-background-smiley-face-cartoon-character-wallpaper-vector.jpg"
+    button.style.visibility = 'visible'
+    stopButton.style.visibility = 'visible'
+    instruction.style.visibility = 'visible'
+    userInput.style.visibility = 'visible'
+    images = []
+})
+
+function backgroundChanging() {
+    runInterval = setInterval(function(){
+        if (count === images.length -1) {
+            count = 0
+            document.querySelector("#bg-image").src = images[count]
+            count += 1
+        } else {
+            count += 1
+            document.querySelector("#bg-image").src = images[count]
+        }
+    }, 5000)
+}
+
+button.addEventListener("click", function() {
+    let searchInput = userInput.value
+    const url = "http://www.reddit.com/search.json?q=" + searchInput + "+nsfw:no"
+    fetch(url)
+    .then(rawData => rawData.json())
+    .then(newData => {
+        for(let i = 0; i < 20; i++){
+            let link = newData.data.children[i].data.url
+            if (link.endsWith('.jpg')) {
+            images.push(link)
+            }
+        }
+        userInput.style.visibility = 'hidden'
+        instruction.style.visibility = 'hidden'
+        button.style.visibility = 'hidden'
+        stopButton.style.visibilty = 'hidden'
+        backgroundChanging()
+        document.querySelector("#bg-image").src = images[count]
+    })
+    .catch(console.warn)
+})
+
+
+
+//newData.data.children[i].data.preview.images[0].source.url
