From a646bff8da5378db287741208b83556c02234467 Mon Sep 17 00:00:00 2001 From: Fayaz Date: Mon, 23 Mar 2026 23:35:45 +0000 Subject: [PATCH 1/6] implemented dom to quotes --- Sprint-3/quote-generator/quotes.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..94ae4892e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,33 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +const newQuote = document.querySelector("#new-quote"); +const quoteTxt = document.querySelector("#quote"); +const quoteAuthor = document.querySelector("#author"); +const autoPlay = document.querySelector("#auto-play"); +const autoPlayTxt = document.querySelector("#auto-play-txt"); +const autoPlayTime = 60000; +let autoPlayInterval = null; +newQuote.addEventListener("click", displayQuote); + +initaliseSite(); +autoPlay.addEventListener("change", () => { + if (autoPlay.checked) { + console.log("ON"); + autoPlayTxt.textContent = `Auto-Play: ON, changing quote every ${autoPlayTime / 1000} seconds.`; + autoPlayInterval = setInterval(displayQuote, autoPlayTime); + } else { + console.log("OFF"); + autoPlayTxt.textContent = "Auto-Play: OFF"; + clearInterval(autoPlayInterval); + } +}); +function initaliseSite() { + displayQuote(); +} + +function displayQuote() { + const quote = pickFromArray(quotes); + quoteTxt.innerHTML = `${quote.quote}`; + quoteAuthor.textContent = `- ${quote.author}`; +}; \ No newline at end of file From 814f96ed226b64a2e0332ba256f636e4579815ba Mon Sep 17 00:00:00 2001 From: Fayaz Date: Mon, 23 Mar 2026 23:38:17 +0000 Subject: [PATCH 2/6] updated the html to change the name and styled it with css --- Sprint-3/quote-generator/index.html | 5 +++-- Sprint-3/quote-generator/style.css | 22 ++++++++++++++++++++++ 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..a40b9ddec 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,11 +3,12 @@ - Title here + Quote Generator + -

hello there

+

Quote Generator

diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..10e3ecc66 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,23 @@ /** Write your CSS in here **/ +body { + font-family: Arial, sans-serif; + text-align: center; + padding: 20px; + background-color: aqua; +} +#quote { + font-size: 1.5em; + margin: 20px 0; + border: #160303 3px dotted; +} +#author { + font-size: 1.2em; + color: #555; + margin-bottom: 20px; +} +button { + padding: 10px 20px; + font-size: 1em; + cursor: pointer; + background-color: aquamarine; +} \ No newline at end of file From 8d6e077645be1089c3665635cc4ff2e6d42c8b4d Mon Sep 17 00:00:00 2001 From: Fayaz Date: Tue, 7 Apr 2026 21:35:33 +0100 Subject: [PATCH 3/6] removed debugging(console.log) from final code --- Sprint-3/quote-generator/quotes.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 94ae4892e..dd85797db 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -503,11 +503,9 @@ newQuote.addEventListener("click", displayQuote); initaliseSite(); autoPlay.addEventListener("change", () => { if (autoPlay.checked) { - console.log("ON"); autoPlayTxt.textContent = `Auto-Play: ON, changing quote every ${autoPlayTime / 1000} seconds.`; autoPlayInterval = setInterval(displayQuote, autoPlayTime); } else { - console.log("OFF"); autoPlayTxt.textContent = "Auto-Play: OFF"; clearInterval(autoPlayInterval); } From b7f026be00d518417412d5d23cdc3ea83c13d3d3 Mon Sep 17 00:00:00 2001 From: Fayaz Date: Tue, 7 Apr 2026 21:50:40 +0100 Subject: [PATCH 4/6] added the toggle switch in html and updated the logioc in javascript file to make the toggle auto-play work properly. --- Sprint-3/quote-generator/index.html | 8 ++++++++ Sprint-3/quote-generator/quotes.js | 15 +++++++++------ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index a40b9ddec..468269547 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -12,5 +12,13 @@

Quote Generator

+
+ + + +

Auto-Play: OFF

+
+ + diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index dd85797db..52cbc47f2 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -496,26 +496,29 @@ const quoteTxt = document.querySelector("#quote"); const quoteAuthor = document.querySelector("#author"); const autoPlay = document.querySelector("#auto-play"); const autoPlayTxt = document.querySelector("#auto-play-txt"); -const autoPlayTime = 60000; +const autoPlayTime = 5000; // 5 seconds for testing let autoPlayInterval = null; + newQuote.addEventListener("click", displayQuote); -initaliseSite(); autoPlay.addEventListener("change", () => { if (autoPlay.checked) { - autoPlayTxt.textContent = `Auto-Play: ON, changing quote every ${autoPlayTime / 1000} seconds.`; + autoPlayTxt.textContent = "auto-play:ON"; autoPlayInterval = setInterval(displayQuote, autoPlayTime); } else { - autoPlayTxt.textContent = "Auto-Play: OFF"; + autoPlayTxt.textContent = "auto-play:OFF"; clearInterval(autoPlayInterval); } }); + +initaliseSite(); + function initaliseSite() { displayQuote(); } function displayQuote() { const quote = pickFromArray(quotes); - quoteTxt.innerHTML = `${quote.quote}`; + quoteTxt.textContent = quote.quote; quoteAuthor.textContent = `- ${quote.author}`; -}; \ No newline at end of file +} From 36c97e944d882bdc49a0268efc777461a7a9de0c Mon Sep 17 00:00:00 2001 From: Fayaz Date: Tue, 7 Apr 2026 21:52:42 +0100 Subject: [PATCH 5/6] updated the autoplay to change quotes eevery 60 seconds. --- 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 52cbc47f2..741f24198 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -496,7 +496,7 @@ const quoteTxt = document.querySelector("#quote"); const quoteAuthor = document.querySelector("#author"); const autoPlay = document.querySelector("#auto-play"); const autoPlayTxt = document.querySelector("#auto-play-txt"); -const autoPlayTime = 5000; // 5 seconds for testing +const autoPlayTime = 60000; let autoPlayInterval = null; newQuote.addEventListener("click", displayQuote); From 56bbe5197f4ca4fdc22dfd9f75dfa11df5d4f1d0 Mon Sep 17 00:00:00 2001 From: Fayaz Date: Mon, 13 Apr 2026 16:33:16 +0100 Subject: [PATCH 6/6] fixed indentation --- Sprint-3/quote-generator/index.html | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 468269547..7cdfb4c0d 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -12,13 +12,11 @@

Quote Generator

+
- - - -

Auto-Play: OFF

-
- - + + +

Auto-Play: OFF

+ - + \ No newline at end of file