From 7c9e4c6f7f3c4380607a60c16dde84c9a8417f0f Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 3 Mar 2026 00:13:45 +0000 Subject: [PATCH 1/5] Changed the title to Quote Generator App --- Sprint-3/quote-generator/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..25aaf65f3 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,9 +1,9 @@ - + - Title here + Quote Generator App From ab8ebe2f4b9a2f52afd5f826ec79df6f1f28c223 Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 3 Mar 2026 15:10:20 +0000 Subject: [PATCH 2/5] Implemented random quote generation logic --- Sprint-3/quote-generator/quotes.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..125d2361f 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,24 @@ 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(); From 70d374f45b372ae7210517dc9444d941dd5cd5eb Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 3 Mar 2026 15:12:33 +0000 Subject: [PATCH 3/5] Changed the h1 heading to Quote Generator --- Sprint-3/quote-generator/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 25aaf65f3..55dd13ebf 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -7,7 +7,7 @@ -

hello there

+

Quote Generator

From 5074850aa37aa0bfeb05dffe3e74c36e166d4320 Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 3 Mar 2026 22:03:06 +0000 Subject: [PATCH 4/5] Added auto-play toggle switch to UI --- Sprint-3/quote-generator/index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 55dd13ebf..3c9f125b3 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -11,5 +11,11 @@

Quote Generator

+
+ +

auto-play: OFF

+
From 753684dff9e582a97086e2ee33bc01c798e8854d Mon Sep 17 00:00:00 2001 From: Eugenie Ahangama Date: Tue, 3 Mar 2026 22:17:19 +0000 Subject: [PATCH 5/5] Implemented auto-play toggle and interval logic --- Sprint-3/quote-generator/quotes.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 125d2361f..0307f5905 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -512,3 +512,24 @@ function updateQuote() { 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); + } +});