WDI-SEA · mylesw27 · Mar 16, 2023 · Mar 16, 2023
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,40 @@
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(31, 31, 31);
+    height: 100vh;
+}
+
+#imageElement {
+    height: 400px
+}
+
+#stopButton {
+    display: none;
+}
+
+h1 {
+    color: white;
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+}
+
+#redditHeader {
+    color: orangered;
+    font-family: Helvetica, sans-serif;
+    font-weight: 300;
+}
+
+label {
+    color: white;
+    font-family: helvetica, sans-serif;
+}
+
+button {
+    height: 30px;
+    width: 100px;
+    margin: 50px 10px;
+    font-family: Helvetica, sans-serif;
+}
+
diff --git a/index.html b/index.html
@@ -3,9 +3,24 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Hello Front-End</title>
+  <title>Reddit Photo Slideshow</title>
+  <script defer src="./js/scripts.js"></script>
+  <link rel="stylesheet" href="./css/styles.css" />
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <div>
+    <h1><a id="redditHeader">reddit</a> Slideshow</h1>
+  </div>
+  <form id="searchForm">
+    <label for="search">Search:</label>
+    <input type="text" id="searchInput" placeholder="puppies" />
+    <button id="searchButton">Search</button>
+  </form>
+  <div>
+    <img id="imageElement" />
+  </div>  
+  <div>
+    <button id="stopButton">Stop</button>
+</div>
 </body>
 </html>
diff --git a/js/scripts.js b/js/scripts.js
@@ -0,0 +1,76 @@
+console.log("Hello world")
+
+const imageElement = document.querySelector("#imageElement")
+const searchbutton = document.querySelector("#searchButton")
+const searchForm = document.querySelector("#searchForm")
+const searchInput = document.querySelector("#searchInput")
+const nextButton = document.querySelector("#nextButton")
+const stopButton = document.querySelector("#stopButton")
+
+const redditURL = "http://www.reddit.com/search.json?q="
+const endRedditURL = "+nsfw:no&limit=100"
+let arrayMap = []
+let currentImage = 0
+let filteredArray = []
+let searchTerms = ""
+let searchTermsString = ""
+let transitionInInterval = 
+
+// console.log(`${redditURL}${searchTerms}${endRedditURL}`)
+console.dir(imageElement)
+
+searchForm.addEventListener("submit", function(e) {
+    e.preventDefault()
+    if (searchInput.value !== "") {
+        searchTerms = searchInput.value.split(" ")
+        console.dir(stopButton)
+        searchForm.style.display = "none"
+        stopButton.style.display = "block"
+        let nextImage = function() {
+            currentImage ++
+                if (currentImage >= filteredArray.length) {
+                    currentImage = 0
+                }
+                imageElement.src = filteredArray[currentImage]
+            }  
+
+        console.log(imageElement)
+        let nextImageInterval = setInterval(nextImage, 3000)
+
+        fetch(`${redditURL}${searchTerms}${endRedditURL}`, {
+            "limit": 100,
+        })
+        .then(taco => taco.json())
+        .then(function (jsonData) {
+            const childrenArray = jsonData.data.children
+            console.dir(childrenArray)
+            arrayMap = childrenArray.map(function (children){
+                return children.data.url
+            })
+
+            console.log(arrayMap)
+            filteredArray = arrayMap.filter(function (url){
+                return url.slice(-3) === "jpg"
+            })
+            imageElement.src = filteredArray[0]
+
+        })
+        nextImageInterval
+        stopButton.addEventListener("click", function () {
+            clearInterval(nextImageInterval)
+            arrayMap = []
+            currentImage = 0
+            filteredArray = []
+            searchterms = ""
+            searchTermsString = ""
+            stopButton.style.display = "none"
+            searchForm.style.display = "block"
+            imageElement.src = ""
+            searchInput.value = ""
+
+        })
+    }
+})
+
+
+