Implement auto-play functionality for quotes

Added auto-play feature for displaying random quotes every 5 seconds.

Author: cywong-dev

Sprint-3/quote-generator/quotes.js

@@ -519,11 +519,18 @@ const quotes = [
 
 // call pickFromArray with the quotes array to check you get a random quote
 
+const autoPlayToggle = document.getElementById("auto-play-toggle");
+const autoPlayStatus = document.getElementById("auto-play-status");
 
 const quoteElement = document.getElementById("quote");
 const authorElement = document.getElementById("author");
 const newQuoteButton = document.getElementById("new-quote");
 
+// Variable to store the timer interval ID
+let autoPlayInterval = null;
+
+
+// 2. Define the function to get and display a new random quote
 function renderQuote() {
   // Use the provided pickFromArray helper function
   const randomQuote = pickFromArray(quotes);
@@ -533,6 +540,30 @@ function renderQuote() {
   authorElement.textContent = `- ${randomQuote.author}`;
 }
 
+// 3. Functions to manage auto-play state
+function startAutoPlay() {
+  autoPlayStatus.textContent = "auto-play:ON";
+  
+  // Set interval to change quote every 60 seconds (60000ms)
+  autoPlayInterval = setInterval(renderQuote, 5000);
+}
+
+function stopAutoPlay() {
+  autoPlayStatus.textContent = "auto-play:OFF";
+  
+  // Clear the active timer interval
+  clearInterval(autoPlayInterval);
+  autoPlayInterval = null;
+}
+
+autoPlayToggle.addEventListener("change", (event) => {
+  if (event.target.checked) {
+    startAutoPlay();
+  } else {
+    stopAutoPlay();
+  }
+});
+
 renderQuote();
 
 newQuoteButton.addEventListener("click", renderQuote);