From a6e0707e194220383238a22636662178708af3bd Mon Sep 17 00:00:00 2001 From: cywong Date: Mon, 3 Aug 2026 17:46:04 +0100 Subject: [PATCH 1/4] Change title to 'Quote Generator App' --- 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 30b434bcf..0cf139636 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,7 +3,7 @@ - Title here + Quote Generator App From 5caf1211b364987abe594e4a3e06f29c5ca78684 Mon Sep 17 00:00:00 2001 From: cywong Date: Mon, 3 Aug 2026 18:09:30 +0100 Subject: [PATCH 2/4] Update quotes.js --- Sprint-3/quote-generator/quotes.js | 45 ++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..ad1e49b92 100644 --- 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,21 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + + +const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); +const newQuoteButton = document.getElementById("new-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}`; +} + +renderQuote(); + +newQuoteButton.addEventListener("click", renderQuote); From 5a288262dc21765f79b42c599ace794ffcc2adcd Mon Sep 17 00:00:00 2001 From: cywong Date: Mon, 3 Aug 2026 18:11:50 +0100 Subject: [PATCH 3/4] Add auto-play toggle feature to quote generator --- Sprint-3/quote-generator/index.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 0cf139636..3249b1881 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -11,5 +11,13 @@

hello there

+ +
+ +

+
From fb496a3df95cd00b6f25bb5900633a2e535fbcfa Mon Sep 17 00:00:00 2001 From: cywong Date: Mon, 3 Aug 2026 18:20:07 +0100 Subject: [PATCH 4/4] Implement auto-play functionality for quotes Added auto-play feature for displaying random quotes every 5 seconds. --- Sprint-3/quote-generator/quotes.js | 31 ++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index ad1e49b92..25415109a 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/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);