diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.css b/index.css
new file mode 100644
index 00000000..3dec0800
--- /dev/null
+++ b/index.css
@@ -0,0 +1,33 @@
+body {
+    text-align: center;
+    background: black;
+    color: lime;
+}
+
+#searchtext{
+    margin: 0 auto;
+    margin-top: 30vh;
+    display: flex;
+    flex-direction: column;
+    width: 200px;
+}
+
+div {
+    margin: 50px auto;
+    height: 400px;
+    width: 400px;
+}
+
+#img-div > img {
+    height: 400px;
+    width: 400px;
+    object-fit: cover;
+}
+
+#stop{
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    width: 105px;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 695897ea..ac246c7d 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,26 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Hello Front-End</title>
+  <link rel="stylesheet" href="index.css">
+  <script src="index.js" defer></script>
+  <title>Abdiresac Sheikdon</title>
 </head>
-<body>
-  <h1>Hello Front-End</h1>
-</body>
-</html>
+    <!-- title section -->
+        <h1 id="title">Reddit Slideshow Generator</h1>
+        <p> Welcome</p>
+        <p>Hit "Type here to start..." to see a Reddit API slideshow</p>
+        <form id="searchtext" action="/action_page.php">
+    <!-- For JS     -->
+          <form id="search-tab">
+          <input id="term" type="text" placeholder="Type here to start...">
+          <input id="search-button" type="submit" value="Search">   
+      </form> 
+      <div id="img-div">
+        <img id="image-id">
+      </div>
+      <div class="container-center">
+       <input id="stop" type="submit" value="Stop Slideshow">
+      </div>
+      <footer>@2022 Abdiresac Sheikdon V1 API Test</footer>
+      
+    
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..7a12a500
--- /dev/null
+++ b/index.js
@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', ()=>{
+    const form = document.querySelector('form')
+    const searchBar = document.getElementById('search-button')
+    const img = document.querySelector('img')
+    const imgArr = []
+    let arrIndex = 0
+
+    form.addEventListener('submit', e=>{
+        e.preventDefault()
+        const redditUrl = `https://www.reddit.com/search.json?q=${searchBar.value}+nsfw:no`
+        fetch(redditUrl)
+            .then(redditData =>{
+                return redditData.json()
+            })
+            .then(redditJson=>{
+                redditJson.data.children.forEach(result=>{
+                    if(result.data.thumbnail != "self"){
+                    imgArr.push(result.data.thumbnail)
+                    }
+                })
+                setInterval(()=>{
+                    arrIndex += 1
+                    if(arrIndex <= imgArr.length -1){
+                     img.src = `${imgArr[arrIndex]}`
+                    } else {arrIndex = 0}
+                }, 2000)
+
+            })
+    })
+})
\ No newline at end of file
