From ccc2f23e8ead2bd994a03bf49a345e1b1597d5f5 Mon Sep 17 00:00:00 2001 From: Konvaly Date: Thu, 4 Dec 2025 14:03:21 +0000 Subject: [PATCH 01/10] Updated name in the title in index.html --- Sprint-3/quote-generator/index.html | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..3c26601a6 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,18 @@ - - - - Title here - - - -

hello there

-

-

- - - + + + + + Quote generator app + + + + +

hello there

+

+

+ + + + \ No newline at end of file From a7b9865278969c7d31d4442a65631ada02f837c4 Mon Sep 17 00:00:00 2001 From: Konvaly Date: Fri, 5 Dec 2025 00:06:27 +0000 Subject: [PATCH 02/10] Feat: display random quote on initial page load --- Sprint-3/quote-generator/quotes.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..8bff23c9e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,17 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +const quoteEl = document.getElementById("quote"); +const authorEl = document.getElementById("author"); +const newQuoteBtn = document.getElementById("new-quote"); + +function showRandomQuote() { + const randomQuote = pickFromArray(quotes); + + quoteEl.innerText = randomQuote.quote; + + authorEl.innerText = randomQuote.author; +} + +showRandomQuote(); From 76f517d51c29cee74ba31ddec1c11657d7a410d0 Mon Sep 17 00:00:00 2001 From: Konvaly Date: Fri, 5 Dec 2025 00:09:53 +0000 Subject: [PATCH 03/10] Feat: change quote on button click --- Sprint-3/quote-generator/quotes.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 8bff23c9e..7cbdc7d4f 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -496,6 +496,8 @@ const quoteEl = document.getElementById("quote"); const authorEl = document.getElementById("author"); const newQuoteBtn = document.getElementById("new-quote"); +newQuoteBtn.addEventListener("click", showRandomQuote); + function showRandomQuote() { const randomQuote = pickFromArray(quotes); From 22be6ba50389a1374a9420fda66f6182d5d98817 Mon Sep 17 00:00:00 2001 From: Konvaly Date: Fri, 5 Dec 2025 00:41:47 +0000 Subject: [PATCH 04/10] Feat: show auto-play on/off toggle --- Sprint-3/quote-generator/index.html | 5 +++++ Sprint-3/quote-generator/quotes.js | 10 ++++++++++ 2 files changed, 15 insertions(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 3c26601a6..4aaf458f8 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -13,6 +13,11 @@

hello there

+ +

auto-play: OFF

\ No newline at end of file diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 7cbdc7d4f..001b3ea0e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -495,9 +495,19 @@ const quotes = [ const quoteEl = document.getElementById("quote"); const authorEl = document.getElementById("author"); const newQuoteBtn = document.getElementById("new-quote"); +const autoPlayToggle = document.getElementById("auto-play-toggle"); +const autoPlayStatus = document.getElementById("auto-play-status"); newQuoteBtn.addEventListener("click", showRandomQuote); +autoPlayToggle.addEventListener("click", () => { + if (autoPlayToggle.checked) { + autoPlayStatus.innerText = "auto-play: ON"; + } else { + autoPlayStatus.innerText = "auto-play: OFF"; + } +}); + function showRandomQuote() { const randomQuote = pickFromArray(quotes); From b8fad7a926a39f193f066353de4db52411fbe6f5 Mon Sep 17 00:00:00 2001 From: Konvaly Date: Fri, 5 Dec 2025 00:47:55 +0000 Subject: [PATCH 05/10] Feat: add auto-play interval for quotes --- Sprint-3/quote-generator/quotes.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 001b3ea0e..0549ceaac 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -500,11 +500,15 @@ const autoPlayStatus = document.getElementById("auto-play-status"); newQuoteBtn.addEventListener("click", showRandomQuote); +let autoPlayInterval = null; + autoPlayToggle.addEventListener("click", () => { if (autoPlayToggle.checked) { autoPlayStatus.innerText = "auto-play: ON"; + autoPlayInterval = setInterval(showRandomQuote, 4000); } else { autoPlayStatus.innerText = "auto-play: OFF"; + clearInterval(autoPlayInterval); } }); From 5ac5f13c5c24a0e411c8b572794f8cfbdf493abe Mon Sep 17 00:00:00 2001 From: Konvaly Date: Fri, 5 Dec 2025 02:16:33 +0000 Subject: [PATCH 06/10] Style: improve quote generator layout and theming --- Sprint-3/quote-generator/index.html | 24 ++++++----- Sprint-3/quote-generator/style.css | 63 +++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 9 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 4aaf458f8..2fdb72b4d 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -5,19 +5,25 @@ Quote generator app + -

hello there

-

-

- - -

auto-play: OFF

+
+

hello there

+

+

+ +
+ + auto-play: OFF +
+ +
\ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..517840639 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,64 @@ /** Write your CSS in here **/ + +body { + margin: 0; + padding: 0; + min-height: 100vh; + + display: flex; + justify-content: center; + align-items: center; + + background: linear-gradient(135deg, #e0f7ff, #c8f7dc); + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + sans-serif; +} + +.quote-app { + background: #ffffff; + padding: 2rem 2.5rem; + border-radius: 12px; + + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); + + max-width: 600px; + width: 90%; + text-align: center; +} + +label { + display: inline-flex; + align-items: center; + gap: 0.5rem; + margin-top: 1rem; +} + +.auto-play-controls { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + margin-top: 1rem; +} + +#auto-play-toggle { + width: 20px; + height: 20px; + cursor: pointer; + accent-color: #16a34a; +} + +#auto-play-status { + margin-top: 0; + font-size: 0.9rem; + padding: 0.25rem 0.5rem; + border-radius: 999px; + display: inline-block; +} + +.auto-play-label { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin: 0; +} From b5f7f05625f17706dbd786d334917c3757889851 Mon Sep 17 00:00:00 2001 From: Konvaly Date: Tue, 9 Dec 2025 11:03:54 +0000 Subject: [PATCH 07/10] refactor: introduce getElement helper with error handling and replace direct DOM lookups --- Sprint-3/quote-generator/quotes.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 0549ceaac..a403549f7 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -492,11 +492,19 @@ const quotes = [ // call pickFromArray with the quotes array to check you get a random quote -const quoteEl = document.getElementById("quote"); -const authorEl = document.getElementById("author"); -const newQuoteBtn = document.getElementById("new-quote"); -const autoPlayToggle = document.getElementById("auto-play-toggle"); -const autoPlayStatus = document.getElementById("auto-play-status"); +function getElement(id) { + const element = document.getElementById(id); + if (!element) { + throw new Error(`Element with id "${id}" not found in the HTML`); + } + return element; +} + +const quoteEl = getElement("quote"); +const authorEl = getElement("author"); +const newQuoteBtn = getElement("new-quote"); +const autoPlayToggle = getElement("auto-play-toggle"); +const autoPlayStatus = getElement("auto-play-status"); newQuoteBtn.addEventListener("click", showRandomQuote); From 0cbfa1d9a8e256a26d48557de7a307a92d89f396 Mon Sep 17 00:00:00 2001 From: Konvaly Date: Tue, 9 Dec 2025 11:23:16 +0000 Subject: [PATCH 08/10] refactor: apply DRY principle - reduce duplication in label and auto-play-label CSS --- Sprint-3/quote-generator/style.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 517840639..70456395d 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -35,10 +35,8 @@ label { .auto-play-controls { display: flex; - align-items: center; justify-content: center; gap: 1rem; - margin-top: 1rem; } #auto-play-toggle { @@ -57,8 +55,6 @@ label { } .auto-play-label { - display: inline-flex; - align-items: center; gap: 0.4rem; margin: 0; } From c1fefffdcf4f53fce0106512aa73e7d1298bb4da Mon Sep 17 00:00:00 2001 From: Konvaly Date: Wed, 10 Dec 2025 13:56:06 +0000 Subject: [PATCH 09/10] fix: prevent multiple intervals by clearing existing timer before starting new one --- 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 a403549f7..2c76521bd 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -513,10 +513,13 @@ let autoPlayInterval = null; autoPlayToggle.addEventListener("click", () => { if (autoPlayToggle.checked) { autoPlayStatus.innerText = "auto-play: ON"; - autoPlayInterval = setInterval(showRandomQuote, 4000); + if (!autoPlayInterval) { + autoPlayInterval = setInterval(showRandomQuote, 4000); + } } else { autoPlayStatus.innerText = "auto-play: OFF"; clearInterval(autoPlayInterval); + autoPlayInterval = null; } }); From 10f58ab239cedbcf127eb10f17d1dd92816eaa98 Mon Sep 17 00:00:00 2001 From: Konvaly Date: Wed, 10 Dec 2025 14:43:44 +0000 Subject: [PATCH 10/10] feat: add 2-line truncation with show more/less to stabilize quote layout --- Sprint-3/quote-generator/index.html | 10 ++++++-- Sprint-3/quote-generator/quotes.js | 30 +++++++++++++++++++++++- Sprint-3/quote-generator/style.css | 36 +++++++++++++++++++++++++++++ 3 files changed, 73 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 2fdb72b4d..8117bddb0 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -12,9 +12,15 @@

hello there

-

-

+ +
+

+

+
+ + +