WDI-SEA · Dxk0ta · Mar 16, 2023 · Mar 16, 2023 · Mar 25, 2023
diff --git a/index.html b/index.html
@@ -3,9 +3,29 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Hello Front-End</title>
+  <link rel="stylesheet" href="styles.css">
+  <title>Reddit Slideshow</title>
 </head>
+
 <body>
-  <h1>Hello Front-End</h1>
+  <h1>Reddit Slideshow</h1>
+  <h2>What do you want to see a slideshow of? Just type it in the search bar and click the search button!</h2>
+
+  <div id="formContainer">
+    <form>
+      <input type="text" placeholder="show me what you got" id="formInput"/>
+      <input type="submit" id="submitBtn"/>
+    </form>
+  </div>
+
+  <div id="imageContainer">
+    <button id="stopBtn">Stop</button>
+    <img src="http://placekitten.com/200/300" alt="img from placekitten" id="slideshow">
+  </div>
+
+  <script src="scripts.js"></script>
+
 </body>
 </html>
+
+
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,42 @@
+
+let formInput = document.querySelector("#formInput")
+let slideshowEl = document.querySelector("#slideshow")
+let resultImages
+let slideshowInterval
+
+function fetchReddit(e) {
+    e.preventDefault()
+
+    console.log("input =>",formInput.value)
+    fetch(`http://www.reddit.com/search.json?q=${formInput.value}+nsfw:no`)
+        .then(result => result.json())
+        .then(results => {
+
+            resultImages = results.data.children.map(child => {
+                return {
+                    url: child.data.url,
+                    title: child.data.title
+                }
+            })
+
+            .filter(image => {
+                let imgExtension = image.url.slice(-4)
+                return imgExtension === ".jpg" || imgExtension === ".png"
+            })
+            console.log("inside fetch", resultImages)
+
+            let slideshowInterval = setInterval(slideshow, 1000)
+            slideshowInterval = setInterval(() => {
+                slideshow(resultImages)
+            }, 3000)
+
+        })
+        .catch(console.warn)
+function slideshow(resultImages) {
+let stopBtn = document.querySelector("#stopBtn")
+stopBtn.addEventListener("click", function(){
+    console.log("stop")
+    clearInterval(slideshowInterval)
+})
+let submitBtn = document.querySelector("#submitBtn")
+submitBtn.addEventListener("click", fetchReddit)
diff --git a/styles.css b/styles.css
@@ -0,0 +1,38 @@
+body {
+    text-align: center;
+    align-items: center;
+}
+
+h1 {
+    padding-bottom: 10px;
+}
+
+h2 {
+    font-size: small;
+    padding-bottom: 10px;
+}
+
+#searchBar {
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    text-align: center;
+    font-size: medium;
+}
+
+.searchButton {
+    margin-bottom: 80px;
+}
+
+#picContainer {
+    padding: 300px;
+}
+
+[data-conponent="slideshow"]
+.slide {
+    display: none;
+}
+
+[data-conponent="slideshow"]
+.slide.active {
+    display: block;
+}