CodeYourFuture · cywong-dev · Aug 3, 2026 · Aug 3, 2026 · Aug 3, 2026 · Aug 3, 2026
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,21 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote Generator App</title>
     <script defer src="quotes.js"></script>
   </head>
   <body>
     <h1>hello there</h1>
     <p id="quote"></p>
     <p id="author"></p>
     <button type="button" id="new-quote">New quote</button>
+
+    <div style="margin-top: 20px;">
+      <label>
+        <input type="checkbox" id="auto-play-toggle" />
+        Enable Auto-Play
+      </label>
+      <p id="auto-play-status"></p>
+    </div>
   </body>
 </html>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,30 @@
+// Function to pick and display a new random quote
+function displayRandomQuote() {
+  // 1. Get a random quote object from the quotes array
+  const randomQuote = pickFromArray(quotes);
+
+  // 2. Select the HTML elements where the quote and author should be displayed
+  const quoteElement = document.getElementById("quote");
+  const authorElement = document.getElementById("author");
+
+  // 3. Update the text content of the DOM elements
+  if (quoteElement && authorElement) {
+    quoteElement.textContent = `"${randomQuote.quote}"`;
+    authorElement.textContent = `- ${randomQuote.author}`;
+  }
+}
+
+// Show a random quote as soon as the page loads
+window.addEventListener("DOMContentLoaded", () => {
+  displayRandomQuote();
+
+  // Attach click listener to the button (assuming button has id "new-quote-btn")
+  const newQuoteButton = document.getElementById("new-quote-btn");
+  if (newQuoteButton) {
+    newQuoteButton.addEventListener("click", displayRandomQuote);
+  }
+});
+
 // DO NOT EDIT BELOW HERE
 
 // pickFromArray is a function which will return one item, at
@@ -491,3 +518,52 @@ 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);
+
+  // Update the HTML element contents
+  quoteElement.textContent = `"${randomQuote.quote}"`;
+  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);