From 24678eea5f1735074368d97da32c7e7476eb4f4a Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 28 Jul 2026 12:39:45 +0100 Subject: [PATCH 01/10] updated the tutle with "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..f9b91b0a2 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 60558402a3c33bf40daaf51ae09f6280cde4a743 Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 28 Jul 2026 13:19:56 +0100 Subject: [PATCH 02/10] Called the function pickFromArray and pass argument quotes to and creted variables and used the getElemetById method to interact with the HTML document --- Sprint-3/quote-generator/quotes.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..96d76b739 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,10 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +pickFromArray(quotes); + +// Select the HTML elements using their IDs +const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); +const buttonElement = document.getElementById("new-quote"); \ No newline at end of file From 9469eca24e7318bc4672c28dcc4263717ff138ef Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 28 Jul 2026 13:22:17 +0100 Subject: [PATCH 03/10] Declare a function to render the Qoutes when called --- Sprint-3/quote-generator/quotes.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 96d76b739..f0c8fe9cb 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -497,4 +497,12 @@ pickFromArray(quotes); // Select the HTML elements using their IDs const quoteElement = document.getElementById("quote"); const authorElement = document.getElementById("author"); -const buttonElement = document.getElementById("new-quote"); \ No newline at end of file +const buttonElement = document.getElementById("new-quote"); + +//Define a function to render a new quote to the page + +function displayNewQuote() { + const randomQuote = pickFromArray(quotes); + quoteElement.innerText = `"${randomQuote.quote}"`; + authorElement.innerText = `- ${randomQuote.author}`; +} \ No newline at end of file From bad34087f483d3fa2742c66ab86ef034420a05e6 Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 28 Jul 2026 13:34:06 +0100 Subject: [PATCH 04/10] Add event listener --- Sprint-3/quote-generator/quotes.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index f0c8fe9cb..84f57ee63 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -505,4 +505,7 @@ function displayNewQuote() { const randomQuote = pickFromArray(quotes); quoteElement.innerText = `"${randomQuote.quote}"`; authorElement.innerText = `- ${randomQuote.author}`; -} \ No newline at end of file +} + +buttonElement.addEventListener("click", displayNewQuote);// add event listener + From cc29bf8b4a83abd38a26f25def7b91f8af53d4b2 Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 28 Jul 2026 13:35:37 +0100 Subject: [PATCH 05/10] call the function displayNewQuotes --- Sprint-3/quote-generator/quotes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 84f57ee63..1da10ae0e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -508,4 +508,4 @@ function displayNewQuote() { } buttonElement.addEventListener("click", displayNewQuote);// add event listener - +displayNewQuote();// call the displayNewQuote From 1bc630eb1adce1a5bbb7ec033df8951f0c6fda22 Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 28 Jul 2026 13:45:04 +0100 Subject: [PATCH 06/10] Add a toggle swith and status indicator to the index.html file --- Sprint-3/quote-generator/index.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index f9b91b0a2..7a58d0cff 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -11,5 +11,12 @@

hello there

+
+ + auto-play: OFF +
From a9ab44c1b952271ab9c90a09d73a6a5f6cbbefc3 Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 28 Jul 2026 13:47:40 +0100 Subject: [PATCH 07/10] Added a new Variable DOM element that will interat with with the toggle and status id in the HTML file --- Sprint-3/quote-generator/quotes.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 1da10ae0e..31129e942 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -498,6 +498,9 @@ pickFromArray(quotes); const quoteElement = document.getElementById("quote"); const authorElement = document.getElementById("author"); const buttonElement = document.getElementById("new-quote"); +//NEW DOM ELEMENTS to interact with the toggle id and status id +const autoPlayToggle = document.getElementById("auto-play-toggle"); +const autoPlayStatus = document.getElementById("auto-play-status"); //Define a function to render a new quote to the page From cc16d9ef7d2944bfea70ecadbd4b77a09a02cbe1 Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 28 Jul 2026 13:49:42 +0100 Subject: [PATCH 08/10] Declare a variable to hold interval time Id --- Sprint-3/quote-generator/quotes.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 31129e942..fc1d17386 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -502,6 +502,9 @@ const buttonElement = document.getElementById("new-quote"); const autoPlayToggle = document.getElementById("auto-play-toggle"); const autoPlayStatus = document.getElementById("auto-play-status"); +// Declare a variable to store our interval timer ID +let autoPlayIntervalId = null; + //Define a function to render a new quote to the page function displayNewQuote() { From d735fb0a7be3918721fa4a5609f5c4b61e47f1ec Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 28 Jul 2026 13:53:36 +0100 Subject: [PATCH 09/10] declared a function to handle toggle --- Sprint-3/quote-generator/quotes.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index fc1d17386..ed5cf3b6d 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -512,6 +512,17 @@ function displayNewQuote() { quoteElement.innerText = `"${randomQuote.quote}"`; authorElement.innerText = `- ${randomQuote.author}`; } +// Declare a function to handle toggle changes +function handleAutoPlayToggle() { + if (autoPlayToggle.checked) { + autoPlayStatus.innerText = "auto-play: ON"; + autoPlayIntervalId = setInterval(displayNewQuote, 5000); + } else { + autoPlayStatus.innerText = "auto-play: OFF"; + clearInterval(autoPlayIntervalId); + autoPlayIntervalId = null; + } +} buttonElement.addEventListener("click", displayNewQuote);// add event listener displayNewQuote();// call the displayNewQuote From 708286e975975da65cca3a5d5c51c04175fbc2b6 Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 28 Jul 2026 13:56:30 +0100 Subject: [PATCH 10/10] Add event listener for the auto play --- Sprint-3/quote-generator/quotes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index ed5cf3b6d..dd46458f0 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -525,4 +525,5 @@ function handleAutoPlayToggle() { } buttonElement.addEventListener("click", displayNewQuote);// add event listener +autoPlayToggle.addEventListener("change", handleAutoPlayToggle);// add event listener for the auto play displayNewQuote();// call the displayNewQuote