WDI-SEA · juanedcabrera · Mar 15, 2023 · Mar 15, 2023 · Mar 15, 2023 · Mar 15, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/css/.keep b/css/.keep
diff --git a/css/styles.css b/css/styles.css
diff --git a/index.html b/index.html
@@ -3,9 +3,27 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Hello Front-End</title>
+  <title>Reddit Slideshow</title>
+  <link rel="stylesheet" href="css/styles.css">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
+  </style>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <div class="container">
+    <!-- <h1>Reddit Slideshow</h1> -->
+    <!-- <p>A photo slideshow using images from Reddit</p> -->
+    <div id="loading-message"></div>
+    <form id="search-form">
+      <h1>Reddit Image Slideshow Search</h1>
+      <label for="search-term">Enter a search term:</label>
+      <input type="text" id="search-term" name="search-term">
+      <button type="submit" id="search-button">Start</button>
+    </form>
+    <div>
+      <button type="button" id="stop-button">Stop Slideshow</button>
+    </div>
+    <img id="imageSlide" class="slider"></img>
+  <script defer src="js/scripts.js"></script>
 </body>
 </html>
diff --git a/js/.keep b/js/.keep
diff --git a/js/scripts.js b/js/scripts.js
@@ -0,0 +1,66 @@
+// DOM Selectors
+const form = document.querySelector("form");
+const input = document.querySelector("input");
+const loadingMessage = document.querySelector("#loading-message");
+const imgSlide = document.querySelector("#imageSlide");
+const stopButton = document.querySelector("#stop-button");
+
+// define myInterval
+let myInterval
+
+// Reddit API URL
+const redditURL = "https://www.reddit.com/search.json";
+
+// Array to keep images
+let imageUrls = [];
+let imageIndex = 0
+
+// Submit form event listener - fetch images from Reddit API and start slideshow
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const inputValue = input.value;
+  input.value = "";
+  fetch(`${redditURL}?q=${inputValue}+nsfw:no`)
+    .then((response) => response.json())
+    .then(data => {
+        // Filter out non-image URLs and add to imageUrls array
+        for(let i=0; i < data.data.children.length; i++) {
+            const url = data.data.children[i].data.url;
+            if (url.endsWith('.jpg') || url.endsWith('.png')) {
+                imageUrls.push(url);
+            }
+            form.style.visibility = "hidden";
+
+        }
+        // Start slideshow with imageUrls array
+        startSlideShow();
+
+    })
+    .catch(console.warn)
+});
+
+
+// Function to start slideshow
+function startSlideShow() {
+    myInterval = setInterval(nextSlide, 2000)
+}
+
+function nextSlide() {
+    if (imageIndex >= imageUrls.length) {
+        imageIndex = 0
+    }
+    imgSlide.src = imageUrls[imageIndex]
+    imgSlide.style.maxWidth = "80vw";
+    imgSlide.style.maxHeight = "80vh";
+    imageIndex++
+}
+
+// Function to stop slideshow
+function stopSlideShow() {
+    clearInterval(myInterval);
+    form.style.visibility = "visible";
+    imgSlide.src = '';
+}
+
+// Stop button event listener - stop slideshow
+stopButton.addEventListener("click", stopSlideShow)