From 5e0f94d449ba6652555a4a4ca35a0146c8ae1d02 Mon Sep 17 00:00:00 2001 From: Isaac Abodunrin Date: Wed, 1 Apr 2026 04:26:48 +0200 Subject: [PATCH 01/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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; }