From a6e0707e194220383238a22636662178708af3bd Mon Sep 17 00:00:00 2001 From: cywong Date: Mon, 3 Aug 2026 17:46:04 +0100 Subject: [PATCH 1/6] 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/6] 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/6] 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/6] 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); From 1248b06fbf6143a1ace9479fe3908e719d6429f0 Mon Sep 17 00:00:00 2001 From: cywong Date: Sun, 9 Aug 2026 15:15:50 +0100 Subject: [PATCH 5/6] Code refactoring and keeping display in HTML Code refactoring to group newly added functions together and changing the javascript so that the special characters " and - are displayed in HTML --- Sprint-3/quote-generator/quotes.js | 100 +++++++++++++++-------------- 1 file changed, 51 insertions(+), 49 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 25415109a..044592542 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -25,6 +25,57 @@ window.addEventListener("DOMContentLoaded", () => { } }); +// 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); + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -517,53 +568,4 @@ 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); From f111f79b43b6a74c0d5f69881ed148304845e327 Mon Sep 17 00:00:00 2001 From: cywong Date: Sun, 9 Aug 2026 19:11:24 +0100 Subject: [PATCH 6/6] Refactor quote display logic and interval timing --- Sprint-3/quote-generator/quotes.js | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 044592542..8b8603d1e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,5 @@ +const playInterval = 5000; + // Function to pick and display a new random quote function displayRandomQuote() { // 1. Get a random quote object from the quotes array @@ -9,8 +11,8 @@ function displayRandomQuote() { // 3. Update the text content of the DOM elements if (quoteElement && authorElement) { - quoteElement.textContent = `"${randomQuote.quote}"`; - authorElement.textContent = `- ${randomQuote.author}`; + quoteElement.textContent = `${randomQuote.quote}`; + authorElement.textContent = `${randomQuote.author}`; } } @@ -37,23 +39,12 @@ 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); + autoPlayInterval = setInterval(displayRandomQuote, playInterval); } function stopAutoPlay() { @@ -72,9 +63,6 @@ autoPlayToggle.addEventListener("change", (event) => { } }); -renderQuote(); - -newQuoteButton.addEventListener("click", renderQuote); // DO NOT EDIT BELOW HERE