From 21aa7aaa93bc71019472244bb4706e9d7fa01e98 Mon Sep 17 00:00:00 2001 From: TzeMingHo Date: Sun, 26 Oct 2025 17:02:48 +0000 Subject: [PATCH 1/5] making the quote app works but failing the second test --- Sprint-3/quote-generator/index.html | 4 ++-- Sprint-3/quote-generator/quotes.js | 13 +++++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..c4220b3fa 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,8 +3,8 @@ - Title here - + Quote generator app +

hello there

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..52ad540a5 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 updateQuoteAndAuthor() { + const { quote, author } = pickFromArray(quotes); + document.getElementById("quote").innerText = quote; + document.getElementById("author").innerText = author; +} + +window.onload = () => { + updateQuoteAndAuthor(); + document + .getElementById("new-quote") + .addEventListener("click", updateQuoteAndAuthor); +}; From 081238fc68bd64ce0a1f48fb636a71ad43077db2 Mon Sep 17 00:00:00 2001 From: TzeMingHo Date: Sun, 26 Oct 2025 17:11:19 +0000 Subject: [PATCH 2/5] updated index.html --- 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 c4220b3fa..5f6a720f1 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,7 +4,7 @@ Quote generator app - +

hello there

From ffe6668d43a5a99aaef4ec13d6003f118cae9fa9 Mon Sep 17 00:00:00 2001 From: TzeMingHo Date: Sun, 26 Oct 2025 17:33:50 +0000 Subject: [PATCH 3/5] added css styling --- Sprint-3/quote-generator/index.html | 10 +++++---- Sprint-3/quote-generator/style.css | 35 +++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 5f6a720f1..0f6ff6d27 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -5,11 +5,13 @@ Quote generator app + -

hello there

-

-

- +
+

+

+ +
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..1ee261693 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,36 @@ /** Write your CSS in here **/ +:root { + --primary-bg-color: #e9b066; + --primary-color: #ffffff; +} + +body { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background-color: var(--primary-bg-color); +} + +#poster { + width: 80%; + padding: 25px; + background-color: var(--primary-color); + color: var(--primary-bg-color); + font-size: larger; + font-style: italic; + position: relative; + top: 100px; +} + +#quote { + font-weight: bold; +} + +button { + border-radius: 8px; + font-size: medium; + background-color: var(--primary-bg-color); + color: var(--primary-color); + border: none; +} From 75d124624d1452fe7a1d45e0eec85aafcfc450ed Mon Sep 17 00:00:00 2001 From: TzeMingHo Date: Sun, 2 Nov 2025 18:06:57 +0000 Subject: [PATCH 4/5] adding a toggle button --- Sprint-3/quote-generator/index.html | 6 +++ Sprint-3/quote-generator/quotes.js | 4 ++ Sprint-3/quote-generator/style.css | 67 ++++++++++++++++++++++++++++- 3 files changed, 76 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 0f6ff6d27..db66f45e0 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -8,6 +8,12 @@ +
+ +

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 52ad540a5..8ce2c3ec7 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -498,6 +498,10 @@ function updateQuoteAndAuthor() { document.getElementById("author").innerText = author; } +function autoUpdateQuoteAndAuthor () { + +} + window.onload = () => { updateQuoteAndAuthor(); document diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 1ee261693..27f28abac 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -2,10 +2,12 @@ :root { --primary-bg-color: #e9b066; --primary-color: #ffffff; + --auto-activated: #8fc9f8; } body { display: flex; + flex-direction: column; align-items: center; justify-content: center; text-align: center; @@ -20,13 +22,19 @@ body { font-size: larger; font-style: italic; position: relative; - top: 100px; + top: 150px; } #quote { font-weight: bold; } +#slide-bar { + display: flex; + justify-content: end; + width: 90%; +} + button { border-radius: 8px; font-size: medium; @@ -34,3 +42,60 @@ button { color: var(--primary-color); border: none; } + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--primary-color); + transition: 0.4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: var(--primary-bg-color); + transition: 0.4s; +} + +input:checked + .slider { + background-color: var(--auto-activated); +} + +input:focus + .slider { + box-shadow: 0 0 1px var(--auto-activated); +} + +input:checked + .slider:before { + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} From 4e2d6dfd33ee6643280af46da7556a80cd40cef3 Mon Sep 17 00:00:00 2001 From: TzeMingHo Date: Mon, 3 Nov 2025 14:31:37 +0000 Subject: [PATCH 5/5] implemented auto generator --- Sprint-3/quote-generator/index.html | 4 ++-- Sprint-3/quote-generator/quotes.js | 15 +++++++++++++-- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index db66f45e0..89290a75c 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -8,9 +8,9 @@ -
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 8ce2c3ec7..714ebadd7 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -498,12 +498,23 @@ function updateQuoteAndAuthor() { document.getElementById("author").innerText = author; } -function autoUpdateQuoteAndAuthor () { - +function autoUpdateQuoteAndAuthor() { + let autoQuote = document.getElementById("toggle-btn"); + let intervalId; + autoQuote.addEventListener("change", () => { + if (autoQuote.checked) { + intervalId = setInterval(() => { + updateQuoteAndAuthor(); + }, 3000); + } else { + clearInterval(intervalId); + } + }); } window.onload = () => { updateQuoteAndAuthor(); + autoUpdateQuoteAndAuthor(); document .getElementById("new-quote") .addEventListener("click", updateQuoteAndAuthor);