From 5e0f94d449ba6652555a4a4ca35a0146c8ae1d02 Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Wed, 1 Apr 2026 04:26:48 +0200 Subject: [PATCH 01/14] Display quotes and authors --- 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..98aec9afa 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,17 @@ +const newQuoteButton = document.querySelector("#new-quote"); + +function displayQuote() { + const randomQuote = pickFromArray(quotes); + const quote = document.querySelector("#quote"); + const author = document.querySelector("#author"); + + quote.textContent = randomQuote.quote; + author.textContent = `- ${randomQuote.author}`; +} + +newQuoteButton.addEventListener("click", displayQuote); +window.addEventListener("load", displayQuote); + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at From 3143a0c2b7ea26b292a5ee96a19165c1992e907e Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Wed, 1 Apr 2026 04:31:41 +0200 Subject: [PATCH 02/14] Update title --- Sprint-3/quote-generator/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..95644f286 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,13 +1,13 @@ - + - Title here + Quote generator app -

hello there

+

"

From cff76dae37522cbd73785a6112360562a51e903d Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Wed, 1 Apr 2026 04:49:19 +0200 Subject: [PATCH 03/14] Style text and background color to orange --- Sprint-3/quote-generator/index.html | 11 +++++++---- Sprint-3/quote-generator/style.css | 12 ++++++++++++ 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 95644f286..428f14890 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -5,11 +5,14 @@ Quote generator app + -

"

-

-

- +
+

"

+

+

+ +
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..db581355a 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,13 @@ /** Write your CSS in here **/ +:root { + --primary-color: #ffa500; +} + +body { + background-color: var(--primary-color); +} + +main { + background-color: white; + color: var(--primary-color); +} From 57b35876839150a6ba932649d92951cb03ad2e11 Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Thu, 2 Apr 2026 01:28:09 +0200 Subject: [PATCH 04/14] Style: align quote box to center of page --- Sprint-3/quote-generator/style.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index db581355a..f371b8522 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,13 +1,20 @@ /** Write your CSS in here **/ :root { --primary-color: #ffa500; + --secondary-color: #000000; } body { background-color: var(--primary-color); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } main { background-color: white; color: var(--primary-color); + width: 50vw; + height: 50vh; } From a9750d1b4d3b44228a25d8f4f13b8a7bca56b968 Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Thu, 2 Apr 2026 01:39:17 +0200 Subject: [PATCH 05/14] Style: display and quote on the same line --- Sprint-3/quote-generator/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index f371b8522..5470cfcb4 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -18,3 +18,8 @@ main { width: 50vw; height: 50vh; } + +h1, +#quote { + display: inline; +} From 2f3c0ca4eece053f2b8ec0dab51a9f2418e43cea Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Thu, 2 Apr 2026 01:44:19 +0200 Subject: [PATCH 06/14] Style: align quotes to the right --- Sprint-3/quote-generator/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 5470cfcb4..001c123cf 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -17,6 +17,7 @@ main { color: var(--primary-color); width: 50vw; height: 50vh; + text-align: right; } h1, From 0b2dfa669019f35e36da9b822a14139c1cb96881 Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Thu, 2 Apr 2026 01:49:52 +0200 Subject: [PATCH 07/14] Style: add padding to quotes --- Sprint-3/quote-generator/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 001c123cf..995f9aa72 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -15,9 +15,10 @@ body { main { background-color: white; color: var(--primary-color); - width: 50vw; - height: 50vh; + width: 40vw; + height: 35vh; text-align: right; + padding: 4rem; } h1, From 5d9a4f5843f7d572daa7c1f933a39fb20518b247 Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Sun, 5 Apr 2026 11:43:33 +0200 Subject: [PATCH 08/14] Style new quote button --- Sprint-3/quote-generator/style.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 995f9aa72..5cf5f9f1b 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,7 +1,7 @@ /** Write your CSS in here **/ :root { --primary-color: #ffa500; - --secondary-color: #000000; + --secondary-color: #ffffff; } body { @@ -13,7 +13,7 @@ body { } main { - background-color: white; + background-color: var(--secondary-color); color: var(--primary-color); width: 40vw; height: 35vh; @@ -25,3 +25,11 @@ h1, #quote { display: inline; } + +button { + background-color: var(--primary-color); + color: var(--secondary-color); + border: none; + padding: 0.5rem 1rem; + cursor: pointer; +} From 9e7041bd87a3bc6dbbdb548f5417bb577970b500 Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Sun, 5 Apr 2026 11:47:52 +0200 Subject: [PATCH 09/14] Style: improve font family --- Sprint-3/quote-generator/style.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 5cf5f9f1b..53b17d256 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -4,12 +4,23 @@ --secondary-color: #ffffff; } +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + body { background-color: var(--primary-color); display: flex; justify-content: center; align-items: center; - height: 100vh; + min-height: 100vh; + padding: 1rem; + font-family: + system-ui, + -apple-system, + sans-serif; } main { From 7360167c3bd38475bc5fe09c3970dd2d778e78af Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Sun, 5 Apr 2026 11:52:37 +0200 Subject: [PATCH 10/14] Style: improve responsivness --- Sprint-3/quote-generator/style.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 53b17d256..c787b8908 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -26,8 +26,10 @@ body { main { background-color: var(--secondary-color); color: var(--primary-color); - width: 40vw; - height: 35vh; + width: 100%; + max-width: 600px; + min-height: 250px; + padding: clamp(2rem, 5vw, 4rem); text-align: right; padding: 4rem; } @@ -35,6 +37,7 @@ main { h1, #quote { display: inline; + font-size: clamp(1.2rem, 3vw, 1.5rem); } button { From af16855ef6d9a82b9ade739b6ff26f1bed75bd84 Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Sun, 5 Apr 2026 13:57:37 +0200 Subject: [PATCH 11/14] Style: improve responsivness --- Sprint-3/quote-generator/style.css | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index c787b8908..fa4413558 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -27,9 +27,9 @@ main { background-color: var(--secondary-color); color: var(--primary-color); width: 100%; - max-width: 600px; - min-height: 250px; - padding: clamp(2rem, 5vw, 4rem); + max-width: 850px; + min-height: 300px; + padding: clamp(3rem, 6vw, 5rem); text-align: right; padding: 4rem; } @@ -37,7 +37,22 @@ main { h1, #quote { display: inline; - font-size: clamp(1.2rem, 3vw, 1.5rem); + font-weight: bold; +} + +h1 { + font-size: clamp(2.5rem, 6vw, 3rem); + font-family: Theseadow, serif; +} + +#quote { + font-size: clamp(1rem, 3vw, 1.5rem); +} + +#author { + margin-top: 1rem; + margin-bottom: 1rem; + font-style: italic; } button { @@ -46,4 +61,6 @@ button { border: none; padding: 0.5rem 1rem; cursor: pointer; + font-weight: bold; + font-size: large; } From a97da7deacefa3b46044ec5709b9675e2bee62fd Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Thu, 9 Apr 2026 04:24:24 +0200 Subject: [PATCH 12/14] Refactor: move leading '- ' in author into CSS to improve separation of JavaScript from styling --- Sprint-3/quote-generator/quotes.js | 2 +- Sprint-3/quote-generator/style.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 98aec9afa..7cc409cba 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -6,7 +6,7 @@ function displayQuote() { const author = document.querySelector("#author"); quote.textContent = randomQuote.quote; - author.textContent = `- ${randomQuote.author}`; + author.textContent = randomQuote.author; } newQuoteButton.addEventListener("click", displayQuote); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index fa4413558..a6e950d4d 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -55,6 +55,10 @@ h1 { font-style: italic; } +#author::before { + content: "— "; +} + button { background-color: var(--primary-color); color: var(--secondary-color); From c80ed805dedda09693acf85302c3aa809f7ce5e9 Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Thu, 9 Apr 2026 07:39:13 +0200 Subject: [PATCH 13/14] Refactor: move '' marks at the start of quotes from HTML to CSS for separation of styling --- Sprint-3/quote-generator/index.html | 1 - Sprint-3/quote-generator/style.css | 11 ++++------- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 428f14890..7012d0fde 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -9,7 +9,6 @@
-

"

diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index a6e950d4d..fe8c28cfd 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -34,21 +34,18 @@ main { padding: 4rem; } -h1, #quote { display: inline; font-weight: bold; + font-size: clamp(1rem, 3vw, 1.5rem); } -h1 { - font-size: clamp(2.5rem, 6vw, 3rem); +#quote::before { + content: "“ "; + font-size: clamp(5rem, 6vw, 3rem); font-family: Theseadow, serif; } -#quote { - font-size: clamp(1rem, 3vw, 1.5rem); -} - #author { margin-top: 1rem; margin-bottom: 1rem; From 0ef4ce6b5edb664ecb613d44f4310d984ee1d654 Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Thu, 9 Apr 2026 07:48:48 +0200 Subject: [PATCH 14/14] Refactor: combine code expected to run on load into a setup function --- Sprint-3/quote-generator/quotes.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 7cc409cba..f4964ace7 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,5 +1,3 @@ -const newQuoteButton = document.querySelector("#new-quote"); - function displayQuote() { const randomQuote = pickFromArray(quotes); const quote = document.querySelector("#quote"); @@ -9,8 +7,13 @@ function displayQuote() { author.textContent = randomQuote.author; } -newQuoteButton.addEventListener("click", displayQuote); -window.addEventListener("load", displayQuote); +function setup() { + const newQuoteButton = document.querySelector("#new-quote"); + newQuoteButton.addEventListener("click", displayQuote); + displayQuote(); +} + +window.addEventListener("load", setup); // DO NOT EDIT BELOW HERE