diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..3c9f125b3 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,21 @@
-
+
- Title here
+ Quote Generator App
-
hello there
+
Quote Generator
+
+
+
auto-play: OFF
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..0307f5905 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,45 @@ const quotes = [
];
// call pickFromArray with the quotes array to check you get a random quote
+// Select the elements from the html
+const quoteDisplay = document.getElementById("quote");
+const authorDisplay = document.getElementById("author");
+const newQuoteButton = document.getElementById("new-quote");
+
+// Create a function to update the content on the screen
+function updateQuote() {
+ // Use the provided pickFromArray function
+ const randomQuoteObject = pickFromArray(quotes);
+ // Access the 'quote' property from the object and,
+ // inject it into the HTML element
+ quoteDisplay.innerText = randomQuoteObject.quote;
+ // Access the 'author' property and use a template literal,
+ // to add a dash for styling
+ authorDisplay.innerText = `- ${randomQuoteObject.author}`;
+}
+
+// Add event listener to the button
+newQuoteButton.addEventListener("click", updateQuote);
+// Show a random quote immediately when the page loads
+updateQuote();
+
+// Get the new elements from the DOM
+const autoplayToggle = document.getElementById("autoplay-toggle");
+const autoplayStatus = document.getElementById("autoplay-status");
+
+// Track timer
+let timerId = null;
+
+// Event listener to the checkbox
+autoplayToggle.addEventListener("change", () => {
+ if (autoplayToggle.checked) {
+ // Switch is ON
+ autoplayStatus.innerText = "auto-play: ON";
+ timerId = setInterval(updateQuote, 5000);
+ } else {
+ // Switch is OFF
+ autoplayStatus.innerText = "auto-play: OFF";
+ // Stop the timer
+ clearInterval(timerId);
+ }
+});