From fd91c1e289469df1fffaf83e6369fd707016d10b Mon Sep 17 00:00:00 2001 From: Precious Moses Date: Thu, 12 Nov 2026 14:35:31 +0000 Subject: [PATCH 1/9] Update title for quote generator app --- 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 de9e128a68218df29a75c93c281c2578a1497863 Mon Sep 17 00:00:00 2001 From: Precious Moses Date: Thu, 12 Nov 2026 15:07:25 +0000 Subject: [PATCH 2/9] Add quoteElement reference to the DOM for quote display --- Sprint-3/quote-generator/quotes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..857c07e22 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,4 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +const quoteElement = document.getElementById("quote"); From 9c27997dbd80eefb9eca23e6e97ab4e762ceacd5 Mon Sep 17 00:00:00 2001 From: Precious Moses Date: Thu, 12 Nov 2026 15:08:02 +0000 Subject: [PATCH 3/9] Update header text for 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 befe8788e..35eb1a3e8 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -7,7 +7,7 @@ -

hello there

+

Quote Generator

From cf02498ea1d68c117ab7cdedd6114321d2b68ecb Mon Sep 17 00:00:00 2001 From: Precious Moses Date: Thu, 12 Nov 2026 15:09:01 +0000 Subject: [PATCH 4/9] Add stylesheet link to the quote generator app --- Sprint-3/quote-generator/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 35eb1a3e8..69a76e736 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,6 +4,7 @@ Quote generator app + From c6aaeaeed0b77f1aca3dba37cdbc6486ab43bb3a Mon Sep 17 00:00:00 2001 From: Precious Moses Date: Thu, 12 Nov 2026 15:10:12 +0000 Subject: [PATCH 5/9] Wrap main content in a
tag for semantic structure --- Sprint-3/quote-generator/index.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 69a76e736..34c05f69a 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -8,9 +8,11 @@ -

Quote Generator

-

-

- +
+

Quote Generator

+

+

+ +
From c63026c9be03c6d9a8968f90d58bfbee1969da07 Mon Sep 17 00:00:00 2001 From: Precious Moses Date: Thu, 12 Nov 2026 15:17:42 +0000 Subject: [PATCH 6/9] Add functionality to display random quotes and authors on button click --- Sprint-3/quote-generator/quotes.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 857c07e22..f229ca7a6 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -492,3 +492,15 @@ const quotes = [ // call pickFromArray with the quotes array to check you get a random quote const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); +const newQuoteButton = document.getElementById("new-quote"); + +function showRandomQuote() { + const randomQuote = pickFromArray(quotes); + quoteElement.textContent = randomQuote.quote; + authorElement.textContent = "- " + randomQuote.author; +} + +showRandomQuote(); + +newQuoteButton.addEventListener("click", showRandomQuote); From 693ef7e6c62ccaf73c6444b1b07231ec67a0ce09 Mon Sep 17 00:00:00 2001 From: Precious Moses Date: Thu, 12 Nov 2026 15:26:05 +0000 Subject: [PATCH 7/9] Add initial CSS styles for layout and design of quote generator app --- Sprint-3/quote-generator/style.css | 41 +++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..d85d8c0ad 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,40 @@ -/** Write your CSS in here **/ +* { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(135deg, #667eea, #764ba2); + font-family: Georgia, "Times New Roman", Times, serif; + padding: 1rem; +} + +.card { + background: #ffffff; + max-width: 600px; + width: 100%; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); + text-align: center; +} + +h1 { + margin-top: 0; + font-size: 1rem; + letter-spacing: 0.15em; + text-transform: uppercase; + color: #888; +} + +#quote { + font-size: 1.5rem; + line-height: 1.5; + font-style: italic; + color: #222; + margin: 1.5rem 0 1rem; +} From 10bb18f550cdb7abb05b878f617457c7eac2688d Mon Sep 17 00:00:00 2001 From: Precious Moses Date: Thu, 12 Nov 2026 15:28:32 +0000 Subject: [PATCH 8/9] Add button styles for improved user interaction in quote generator app --- Sprint-3/quote-generator/style.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index d85d8c0ad..82603f5e2 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -38,3 +38,16 @@ h1 { color: #222; margin: 1.5rem 0 1rem; } + +button { + background: #764ba2; + color: #ffffff; + border: none; + padding: 0.75rem 1.75rem; + font-size: 1rem; + border-radius: 999px; + cursor: pointer; + transition: + background 0.2s, + transform 0.1s; +} From 9963a4c3f8a4f68d1ea648e22c2100916e246f91 Mon Sep 17 00:00:00 2001 From: Precious Moses Date: Thu, 12 Nov 2026 15:30:40 +0000 Subject: [PATCH 9/9] Enhance button styles for improved hover and active effects in quote generator app --- Sprint-3/quote-generator/style.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 82603f5e2..6ae00e816 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -51,3 +51,11 @@ button { background 0.2s, transform 0.1s; } + +button:hover { + background: #5d3a85; +} + +button:active { + transform: scale(0.96); +}