From 0740df6988fb85b26343b215e8ccff273f4ad394 Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Wed, 11 Mar 2026 10:00:20 +0000 Subject: [PATCH 1/5] set quote generator page title --- 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..5f6a720f1 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 25de5da7888479b5f02a7a98293811bf9517464e Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Wed, 11 Mar 2026 10:24:19 +0000 Subject: [PATCH 2/5] showed random quote on load --- Sprint-3/quote-generator/quotes.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..b81e28eee 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,16 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +const quoteP = document.querySelector("#quote"); +const authorP = document.querySelector("#author"); +const newQuoteBtn = document.querySelector("#new-quote"); + +function showRandomQuote() { + const randomQuote = pickFromArray(quotes); + quoteP.innerText = randomQuote.quote; + authorP.innerText = randomQuote.author; +} + +showRandomQuote(); +newQuoteBtn.addEventListener("click", showRandomQuote); From baccf2f6ff7b9a80564d895cd304c838eca569e2 Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Wed, 11 Mar 2026 10:32:02 +0000 Subject: [PATCH 3/5] Update heading in index.html and add CSS styles for layout and design --- Sprint-3/quote-generator/index.html | 3 +- Sprint-3/quote-generator/style.css | 62 +++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 5f6a720f1..d880f9d90 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,10 +4,11 @@ Quote generator app + -

hello there

+

Quote Generator

diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..51b5471d1 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,63 @@ /** Write your CSS in here **/ +body { + margin: 0; + min-height: 100vh; + display: grid; + place-items: center; + padding: 40px; + font-family: Helvetica, sans-serif; + background: #cc5500; +} + +.container { + width: 100%; + max-width: 650px; + background: #cc5500; + padding: 50px; + border-radius: 8px; +} + +h1 { + font-size: 26px; + line-height: 1.5; + color: white; + margin: 0; + text-align: center; +} + +.quote-box { + background: black; + padding: 30px; + border-radius: 6px; + border: 2px solid #cc5500; + margin-bottom: 20px; +} + +#quote { + font-size: 26px; + line-height: 1.5; + color: white; + margin: 0; + text-align: center; +} + +#author { + margin-top: 20px; + text-align: right; + color: white; + font-weight: 600; +} + +#new-quote { + margin-top: 2px; + background: white; + color: black; + border: 2px solid #cc5500;; + padding: 10px 18px; + cursor: pointer; + border-radius: 4px; +} +* { + box-sizing: border-box; +} + From 65cc736087260ca15e1039b1d404711f0423f999 Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Wed, 11 Mar 2026 10:34:54 +0000 Subject: [PATCH 4/5] Add autoplay feature to quote generator with toggle and status display --- Sprint-3/quote-generator/index.html | 7 ++++++ Sprint-3/quote-generator/quotes.js | 34 +++++++++++++++++++++++++++++ Sprint-3/quote-generator/style.css | 11 ++++++++++ 3 files changed, 52 insertions(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index d880f9d90..04758c871 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -12,5 +12,12 @@

Quote Generator

+
+ +

auto-play:OFF

+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index b81e28eee..4c8eab6db 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -495,6 +495,10 @@ const quotes = [ const quoteP = document.querySelector("#quote"); const authorP = document.querySelector("#author"); const newQuoteBtn = document.querySelector("#new-quote"); +const autoplayToggle = document.querySelector("#autoplay-toggle"); +const autoplayStatus = document.querySelector("#autoplay-status"); + +let autoplayId = null; function showRandomQuote() { const randomQuote = pickFromArray(quotes); @@ -502,5 +506,35 @@ function showRandomQuote() { authorP.innerText = randomQuote.author; } +function setAutoplayStatus(isEnabled) { + autoplayStatus.innerText = isEnabled ? "auto-play:ON" : "auto-play:OFF"; +} + +function startAutoplay() { + if (autoplayId !== null) { + clearInterval(autoplayId); + } + autoplayId = setInterval(showRandomQuote, 60000); + setAutoplayStatus(true); +} + +function stopAutoplay() { + if (autoplayId !== null) { + clearInterval(autoplayId); + autoplayId = null; + } + setAutoplayStatus(false); +} + +function handleAutoplayToggle() { + if (autoplayToggle.checked) { + startAutoplay(); + } else { + stopAutoplay(); + } +} + showRandomQuote(); newQuoteBtn.addEventListener("click", showRandomQuote); +autoplayToggle.addEventListener("change", handleAutoplayToggle); +setAutoplayStatus(false); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 51b5471d1..bad296f85 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -57,6 +57,17 @@ h1 { cursor: pointer; border-radius: 4px; } + +#autoplay-controls { + margin-top: 14px; + color: white; + text-align: center; +} + +#autoplay-status { + margin: 8px 0 0; +} + * { box-sizing: border-box; } From fab5f08738989bce275c55dd6409032600a7741a Mon Sep 17 00:00:00 2001 From: Oussama Mouggal Date: Wed, 11 Mar 2026 10:39:54 +0000 Subject: [PATCH 5/5] updated css and html for improved readability --- Sprint-3/quote-generator/index.html | 6 ++++-- Sprint-3/quote-generator/style.css | 10 ++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 04758c871..cf5754976 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -9,8 +9,10 @@

Quote Generator

-

-

+
+

+

+