From 88d611116d585b202ef1859eca107ccb67758b7f Mon Sep 17 00:00:00 2001 From: Mahmoud Shaabo Date: Fri, 27 Mar 2026 17:27:24 +0000 Subject: [PATCH] feat: complete mandatory and stretch goals for quote generator with auto-play --- Sprint-3/quote-generator/index.html | 12 ++++++-- Sprint-3/quote-generator/index.js | 46 +++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+), 3 deletions(-) create mode 100644 Sprint-3/quote-generator/index.js diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..2615a2970 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/index.js b/Sprint-3/quote-generator/index.js new file mode 100644 index 000000000..409149404 --- /dev/null +++ b/Sprint-3/quote-generator/index.js @@ -0,0 +1,46 @@ +// Get the paragraph element that will show the quote text +const quoteElement = document.getElementById("quote"); + +// Get the paragraph element that will show the author name +const authorElement = document.getElementById("author"); + +// Get the New Quote button element +const newQuoteButton = document.getElementById("new-quote"); + +// This function picks a random quote and puts it on the page +function displayQuote() { + const randomQuote = pickFromArray(quotes); + quoteElement.textContent = randomQuote.quote; + authorElement.textContent = randomQuote.author; +} + +// Listen for a click on the button, then run displayQuote +newQuoteButton.addEventListener("click", displayQuote); + +// Run displayQuote once when the page loads +displayQuote(); +// --- Auto-play Feature (Stretch Goal) --- + +// 1. Get the checkbox and status elements from HTML +const autoPlayCheckbox = document.getElementById("auto-play-checkbox"); +const autoPlayStatus = document.getElementById("auto-play-status"); + +// 2. Create a variable to hold the timer ID (so we can stop it later) +let autoPlayInterval; + +// 3. Create a function to turn auto-play ON or OFF +function toggleAutoPlay() { + // Check if the checkbox is checked + if (autoPlayCheckbox.checked === true) { + // Turn ON: update text and start the timer (5000 milliseconds = 5 seconds) + autoPlayStatus.textContent = "auto-play:ON"; + autoPlayInterval = setInterval(displayQuote, 5000); + } else { + // Turn OFF: update text and stop the timer + autoPlayStatus.textContent = "auto-play:OFF"; + clearInterval(autoPlayInterval); + } +} + +// 4. Listen for any "change" (check/uncheck) on the checkbox +autoPlayCheckbox.addEventListener("change", toggleAutoPlay);