WDI-SEA · jaronw1 · Mar 16, 2023 · Mar 16, 2023 · Mar 16, 2023
diff --git a/index.html b/index.html
@@ -4,8 +4,30 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Hello Front-End</title>
+  <script defer src="./script.js"></script>
+  <link rel="stylesheet" href="styles.css"/>
 </head>
 <body>
   <h1>Hello Front-End</h1>
+  <div id="formContainer">
+    <form>
+      <input type="text" placeholder="show me" id="formInput"/>
+      <input type="submit" id="submitButton"/>
+
+
+
+
+
+
+    </form>
+
+  </div>
+  <div id="imagesContainer">
+    <button id="stopBtn">stop</button>
+    <img src="https://placekitten.com/280/300" alt="img from place kitten" id="slideshow">
+
+  </div>
+
+
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,100 @@
+
+//select form input
+let formInput = document.querySelector("#formInput")
+let slideshowElem = document.querySelector("#slideshow")
+
+//acess images
+
+let resultImages
+let slideshowInterval
+
+function fetchReddit(e){
+    e.preventDefault()
+    //let value = "cats"
+    console.log("input =>",formInput.value)
+
+    fetch(`http://www.reddit.com/search.json?q=${formInput.value}+nsfw:no`)
+    .then(result => result.json())
+    .then(results => {
+        //console.log(results.data.children)
+            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(resultImages)
+
+        //slideshow(resultImages)
+        let slideshowInterval = setInterval(() => {
+            slideshow(resultImages)
+        }, 3000)
+
+    })
+
+    .catch(console.warn)
+
+}
+//fetchReddit()
+
+//slideshow function
+let imgIndex = 0
+
+function slideshow(resultImages) {
+    console.log("imgs =>", resultImages)
+    console.log("el =>", slideshowElem.src)
+    //slideshowElem.src = imgArr[0].url
+    if (imgIndex >= resultImages.length) {
+        imgIndex = 0
+    }
+    slideshowElem.src = resultImages[imgIndex].url
+    imgIndex = imgIndex + 1
+}
+
+
+
+
+
+
+
+
+let stopBtn = document.querySelector("#stopBtn")
+stopBtn.addEventListener("click", function(){
+    console.log("stopit")
+    clearInterval(slideshowInterval)
+
+})
+
+
+
+
+let submitBtn = document.querySelector("#submitButton")
+submitBtn.addEventListener("click", fetchReddit)
+
+
+
+
+
+
+
+/*
+document.querySelector("#catClick").addEventListener("click", function(){
+    let fetchURL = "http://www.reddit.com/search.json?q=cats+nsfw:no"
+    fetch(fetchURL)
+    .then(function(response)
+     {return response.json()
+    })
+    .then((res => {console.log(res.data.children)
+     let resultImages = results.data.children.map[child => {
+            return{
+                url: child.data.url,
+                title: child.data.title
+            }))
+    })
+    .catch(console.warn)*/
diff --git a/styles.css b/styles.css