From d4f207097b6f27da5fe3cbdd13bf17219081e112 Mon Sep 17 00:00:00 2001 From: Niangh Ciang Date: Fri, 17 Jul 2026 20:26:30 +0100 Subject: [PATCH 1/5] Update the title --- Sprint-3/quote-generator/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..befe8788e 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,9 +1,9 @@ - + - Title here + Quote generator app From 488ec8fa3cf707478bbee098289738f1889c1049 Mon Sep 17 00:00:00 2001 From: Niangh Ciang Date: Fri, 17 Jul 2026 21:07:22 +0100 Subject: [PATCH 2/5] Add showRandomQuote function and button click handler --- Sprint-3/quote-generator/quotes.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..2f94cd995 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,14 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +function showRandomQuote() { + const randomQuote = pickFromArray(quotes); + const quoteElement = document.querySelector("#quote"); + const authorElement = document.querySelector("#author"); + + quoteElement.textContent = randomQuote.quote; + authorElement.textContent = randomQuote.author; +} +showRandomQuote(); +const button = document.querySelector("#new-quote"); +button.addEventListener("click", showRandomQuote); From e055dee107e3d7ebf31d98133d361e46f53bf682 Mon Sep 17 00:00:00 2001 From: Niangh Ciang Date: Fri, 17 Jul 2026 21:29:43 +0100 Subject: [PATCH 3/5] Update the heading --- 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 befe8788e..b22def8a6 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -7,7 +7,7 @@ -

hello there

+

Daily Motivation

From cafb8c378d7cabbc5e995c220db80768399c0a28 Mon Sep 17 00:00:00 2001 From: Niangh Ciang Date: Fri, 17 Jul 2026 22:35:21 +0100 Subject: [PATCH 4/5] Add new CSS styles and HTML div for layout improvements --- Sprint-3/quote-generator/index.html | 13 ++++-- Sprint-3/quote-generator/style.css | 63 ++++++++++++++++++++++++++++- 2 files changed, 71 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index b22def8a6..2da3715a4 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,12 +4,17 @@ Quote generator app + -

Daily Motivation

-

-

- +
+
+

Daily Motivation For You

+

+

+ +
+
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..0f58f9d45 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,62 @@ -/** Write your CSS in here **/ +body { + margin: 0; + padding: 0; + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + sans-serif; + background-color: #5e77c2; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} +.app { + display: flex; + justify-content: center; + align-items: center; +} +.quote-card { + background-color: #ffffff; + padding: 32px; + border-radius: 30px; + width: 900px; + min-height: 280px; + max-width: 800px; + text-align: center; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + position: relative; + display: flex; + flex-direction: column; +} +#quote { + color: #043d52; + font-size: 20px; + margin-bottom: 1px; +} +#author { + color: #555555; + font-size: 17px; + font-style: italic; + position: absolute; + bottom: 90px; + right: 60px; +} +#new-quote { + background-color: #5e77c2; + color: #ffffff; + border: none; + padding: 10px 22px; + border-radius: 4px; + font-size: 16px; + cursor: pointer; + position: absolute; + bottom: 40px; + right: 50px; +} + +#new-quote:hover { + background-color: #3f3642; +} From 1c5e0e974df97311575b7977634f703c07cb905d Mon Sep 17 00:00:00 2001 From: Niangh Ciang Date: Sat, 18 Jul 2026 19:19:23 +0100 Subject: [PATCH 5/5] Add autoplay checkbox --- Sprint-3/quote-generator/index.html | 4 ++++ Sprint-3/quote-generator/quotes.js | 12 ++++++++++++ Sprint-3/quote-generator/style.css | 6 ++++++ 3 files changed, 22 insertions(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 2da3715a4..989acb61c 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -14,6 +14,10 @@

Daily Motivation For You

+ diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 2f94cd995..361f00387 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -502,3 +502,15 @@ function showRandomQuote() { showRandomQuote(); const button = document.querySelector("#new-quote"); button.addEventListener("click", showRandomQuote); + +const autoplayQuote = document.querySelector("#autoplay-quote"); +let autoplayInterval = null; + +autoplayQuote.addEventListener("change", function () { + if (autoplayQuote.checked) { + autoplayInterval = setInterval(showRandomQuote, 5000); + } else { + clearInterval(autoplayInterval); + autoplayInterval = null; + } +}); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 0f58f9d45..d8be23155 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -60,3 +60,9 @@ body { #new-quote:hover { background-color: #3f3642; } +.quote-card label { + position: absolute; + bottom: 40px; + left: 50px; + font-size: 16px; +}