From f7e3dc5957b717a4e99c7750f1859e5be6c6dfd6 Mon Sep 17 00:00:00 2001 From: Ammad Date: Fri, 14 Nov 2025 18:39:05 +0000 Subject: [PATCH 1/7] Set the webpage 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..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 568fbcf0f46223602e6f1151b852e17d8c6772b5 Mon Sep 17 00:00:00 2001 From: Ammad Date: Sat, 15 Nov 2025 11:47:14 +0000 Subject: [PATCH 2/7] Link index.html to style.css and define some CSS rules. Wrap the quote content in a div element --- Sprint-3/quote-generator/index.html | 11 +++++++---- Sprint-3/quote-generator/style.css | 23 +++++++++++++++++++++++ 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 5f6a720f1..49858ddb4 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,12 +4,15 @@ Quote generator app + -

hello there

-

-

- +
+

hello there

+

+

+ +
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..49034e036 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,24 @@ /** Write your CSS in here **/ + +body { + background-color: #f3a83c; +} + +div { + background-color: white; + padding: 2.5em; +} + +#quote { + color: #f3a83c; +} + +#author { + color: #f3a83c; +} + +#new-quote { + background-color: #f3a83c; + color: white; + padding: 1em; +} \ No newline at end of file From 2e7ea57f0c4cff571391553c03e77aca905923df Mon Sep 17 00:00:00 2001 From: Ammad Date: Sat, 15 Nov 2025 12:24:48 +0000 Subject: [PATCH 3/7] Add newRandomQuote() function to set a random quote and add a click event listener on new-quote button to invoke newRandomQuote() --- 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..b1b4a34b4 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 + +function newRandomQuote() { + const randomQuote = pickFromArray(quotes); + + document.getElementById("quote").textContent = randomQuote.quote; + document.getElementById("author").textContent = randomQuote.author; +} + +document.getElementById("new-quote").addEventListener("click", () => { + newRandomQuote(); +}); + +newRandomQuote(); From 409331da3c2f1a82949667693978fffadc5fed01 Mon Sep 17 00:00:00 2001 From: Ammad Date: Sat, 15 Nov 2025 12:41:28 +0000 Subject: [PATCH 4/7] Refine the CSS rules to make the webpage closely match the provided screenshot --- Sprint-3/quote-generator/index.html | 10 +++--- Sprint-3/quote-generator/style.css | 52 ++++++++++++++++++++++++++--- 2 files changed, 54 insertions(+), 8 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 49858ddb4..3c2b68812 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -8,11 +8,13 @@ -
-

hello there

-

+
+

- + +
+ +
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 49034e036..6f3028c2c 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,24 +1,68 @@ /** Write your CSS in here **/ +html, body { + height: 100%; + margin: 0; +} + body { + display: flex; + justify-content: center; + align-items: center; + padding: 40px; + box-sizing: border-box; background-color: #f3a83c; + overflow: hidden; } -div { - background-color: white; - padding: 2.5em; +.container { + background: white; + border-radius: 10px; + padding: 60px 80px; + width: 65%; + max-width: 900px; + display: flex; + flex-direction: column; } #quote { color: #f3a83c; + font-size: 2rem; + font-weight: 400; + line-height: 1.4; + position: relative; + padding-left: 60px; + /* space for the quote icon */ +} + +/* LEFT floating quotation mark */ +#quote::before { + content: "“"; + font-size: 4rem; + color: #f3a83c; + position: absolute; + left: 0; + top: -10px; } #author { color: #f3a83c; + text-align: right; + margin-top: 30px; + font-size: 1.2rem; + margin-bottom: 40px; +} + +.button-wrapper { + text-align: right; } #new-quote { background-color: #f3a83c; color: white; - padding: 1em; + padding: 0.8em 1.4em; + border: none; + border-radius: 4px; + font-size: 1rem; + cursor: pointer; } \ No newline at end of file From ba08dec7d401af9cb7cfec50203166ef36e73805 Mon Sep 17 00:00:00 2001 From: Ammad Date: Sat, 15 Nov 2025 14:13:13 +0000 Subject: [PATCH 5/7] Implement random quote every minute feature --- Sprint-3/quote-generator/index.html | 8 ++++++++ Sprint-3/quote-generator/quotes.js | 13 +++++++++++++ Sprint-3/quote-generator/style.css | 21 +++++++++++++++++++-- 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 3c2b68812..cb57d444f 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -15,6 +15,14 @@
+ +
+ +
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index b1b4a34b4..261a45483 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -503,4 +503,17 @@ document.getElementById("new-quote").addEventListener("click", () => { newRandomQuote(); }); +let autoQuoteIntervalID = null; + +document.getElementById("auto-quote").addEventListener("change", function () { + if (this.checked) { + newRandomQuote(); + const seconds = 60 * 1000; + autoQuoteIntervalID = setInterval(newRandomQuote, seconds); + } else { + clearInterval(autoQuoteIntervalID); + autoQuoteIntervalID = null; + } +}); + newRandomQuote(); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 6f3028c2c..0bb8d2197 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -32,10 +32,10 @@ body { line-height: 1.4; position: relative; padding-left: 60px; - /* space for the quote icon */ + /* Space for the quote icon */ } -/* LEFT floating quotation mark */ +/* Left floating quotation mark */ #quote::before { content: "“"; font-size: 4rem; @@ -65,4 +65,21 @@ body { border-radius: 4px; font-size: 1rem; cursor: pointer; +} + +.auto-refresh { + margin-top: 20px; + margin-bottom: 20px; + text-align: left; +} + +.auto-refresh label { + font-size: 1rem; + color: #f3a83c; + cursor: pointer; +} + +.auto-refresh input { + transform: scale(1.2); + margin-right: 10px; } \ No newline at end of file From 0e346fc68eb74c54122fd97aaa841ef7014977c7 Mon Sep 17 00:00:00 2001 From: Ammad Date: Mon, 24 Nov 2025 21:10:47 +0000 Subject: [PATCH 6/7] Rename seconds to oneMinute Use semantic HTML tags for displaying quotes --- Sprint-3/quote-generator/index.html | 6 +++--- Sprint-3/quote-generator/quotes.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index cb57d444f..7e7e3152c 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -8,9 +8,9 @@ -
+

-

+
@@ -23,6 +23,6 @@
-
+ diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 261a45483..80bb89ec6 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -508,8 +508,8 @@ let autoQuoteIntervalID = null; document.getElementById("auto-quote").addEventListener("change", function () { if (this.checked) { newRandomQuote(); - const seconds = 60 * 1000; - autoQuoteIntervalID = setInterval(newRandomQuote, seconds); + const oneMinute = 60 * 1000; + autoQuoteIntervalID = setInterval(newRandomQuote, oneMinute); } else { clearInterval(autoQuoteIntervalID); autoQuoteIntervalID = null; From 6af1284e980e601753f1b9f457279b3d350088e3 Mon Sep 17 00:00:00 2001 From: Ammad Date: Mon, 24 Nov 2025 22:32:51 +0000 Subject: [PATCH 7/7] Display "Auto-Play: ON" when Random quote every minute setting is ticked --- Sprint-3/quote-generator/index.html | 2 +- Sprint-3/quote-generator/quotes.js | 5 ++++- Sprint-3/quote-generator/style.css | 15 +++++++++++++++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 7e7e3152c..3254fbe07 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -22,7 +22,7 @@ Random quote every minute - +

Auto-Play: ON

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 80bb89ec6..bd1604fb9 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -506,13 +506,16 @@ document.getElementById("new-quote").addEventListener("click", () => { let autoQuoteIntervalID = null; document.getElementById("auto-quote").addEventListener("change", function () { + const autoplayStatus = document.getElementById("autoplay-status"); + if (this.checked) { - newRandomQuote(); const oneMinute = 60 * 1000; autoQuoteIntervalID = setInterval(newRandomQuote, oneMinute); + autoplayStatus.style.display = "block"; } else { clearInterval(autoQuoteIntervalID); autoQuoteIntervalID = null; + autoplayStatus.style.display = "none"; } }); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 0bb8d2197..fb56070f2 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -82,4 +82,19 @@ body { .auto-refresh input { transform: scale(1.2); margin-right: 10px; +} + +#autoplay-status { + position: fixed; + bottom: 10px; + right: 15px; + font-size: 1rem; + color: white; + background: rgba(0, 0, 0, 0.4); + padding: 6px 10px; + border-radius: 5px; + display: none; + /* hidden by default */ + pointer-events: none; + /* so clicks pass through */ } \ No newline at end of file