From 1cec2fc4d10b1d7f5e17dddb8cb6794e458cb9a9 Mon Sep 17 00:00:00 2001 From: Richard Frimpong Date: Sat, 21 Mar 2026 01:03:47 +0000 Subject: [PATCH 1/5] Add HTML structure for quote generator --- Sprint-3/quote-generator/index.html | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..9f4679d94 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,21 @@ - Title here + Quote Generator + + -

hello there

-

-

- +
+

Quote Generator

+ +
+

Loading quote...

+

+
+ + +
- + \ No newline at end of file From 0b69c21258f1dd8735c973bf17b9db0d6fdaa1d2 Mon Sep 17 00:00:00 2001 From: Richard Frimpong Date: Sat, 21 Mar 2026 01:04:01 +0000 Subject: [PATCH 2/5] Style quote generator layout --- Sprint-3/quote-generator/style.css | 73 +++++++++++++++++++++++++++++- 1 file changed, 72 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..3ed82880d 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,72 @@ -/** Write your CSS in here **/ +/* Apply box-sizing to all elements so padding and borders + do not affect the final width and height unexpectedly */ +* { + box-sizing: border-box; +} + +/* Basic page styling */ +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + background-color: #f4f4f4; + color: #222222; +} + +/* Main layout container */ +.container { + max-width: 750px; + margin: 60px auto; + padding: 20px; + text-align: center; +} + +/* Page heading */ +h1 { + margin-bottom: 30px; + font-size: 2rem; +} + +/* Card that holds the quote and author */ +.quote-card { + background-color: #ffffff; + border-radius: 12px; + padding: 30px 20px; + margin-bottom: 25px; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); +} + +/* Quote text styling */ +.quote-text { + font-size: 1.5rem; + line-height: 1.6; + margin-bottom: 20px; +} + +/* Author text styling */ +.quote-author { + font-size: 1.1rem; + font-weight: bold; + color: #555555; +} + +/* Button styling */ +#new-quote { + padding: 12px 24px; + font-size: 1rem; + border: none; + border-radius: 8px; + background-color: #0b5ed7; + color: #ffffff; + cursor: pointer; +} + +/* Button hover state */ +#new-quote:hover { + background-color: #094db1; +} + +/* Button keyboard focus state */ +#new-quote:focus { + outline: 3px solid #99c2ff; + outline-offset: 3px; +}/** Write your CSS in here **/ From d98b7d6cf9757e524c9cbbdcd15cca3b2cab8a60 Mon Sep 17 00:00:00 2001 From: Richard Frimpong Date: Sat, 21 Mar 2026 01:04:17 +0000 Subject: [PATCH 3/5] Add random quote display and button functionality --- Sprint-3/quote-generator/script.js | 42 ++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 Sprint-3/quote-generator/script.js diff --git a/Sprint-3/quote-generator/script.js b/Sprint-3/quote-generator/script.js new file mode 100644 index 000000000..890e4673d --- /dev/null +++ b/Sprint-3/quote-generator/script.js @@ -0,0 +1,42 @@ +// Get references to the HTML elements that will display +// the quote, the author, and the button +const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); +const newQuoteButton = document.getElementById("new-quote"); + +// Store the currently displayed quote so that +// we do not show the exact same quote twice in a row +let currentQuote = null; + +/** + * Returns a random quote object from the quotes array. + * If a quote is already being displayed, this function + * keeps picking again until it gets a different one. + */ +function getNewRandomQuote() { + let randomQuote = pickFromArray(quotes); + + while (quotes.length > 1 && randomQuote === currentQuote) { + randomQuote = pickFromArray(quotes); + } + + return randomQuote; +} + +/** + * Displays a random quote and its author on the page. + */ +function displayRandomQuote() { + const selectedQuote = getNewRandomQuote(); + + quoteElement.textContent = `"${selectedQuote.quote}"`; + authorElement.textContent = `— ${selectedQuote.author}`; + + currentQuote = selectedQuote; +} + +// Show a random quote as soon as the page loads +displayRandomQuote(); + +// Show a different random quote whenever the button is clicked +newQuoteButton.addEventListener("click", displayRandomQuote); From 9df41194388d7df3db5b7e71665116366fe59fd3 Mon Sep 17 00:00:00 2001 From: Richard Frimpong Date: Sat, 28 Mar 2026 12:56:30 +0000 Subject: [PATCH 4/5] Update quote generator based on mentor feedback --- Sprint-3/quote-generator/index.html | 2 +- Sprint-3/quote-generator/script.js | 20 ++++++++++++++------ Sprint-3/quote-generator/style.css | 13 ++++++++++--- 3 files changed, 25 insertions(+), 10 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 9f4679d94..60a549e0f 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,4 +1,4 @@ - + diff --git a/Sprint-3/quote-generator/script.js b/Sprint-3/quote-generator/script.js index 890e4673d..4732c6c63 100644 --- a/Sprint-3/quote-generator/script.js +++ b/Sprint-3/quote-generator/script.js @@ -1,3 +1,4 @@ +cat > script.js << "EOF"; // Get references to the HTML elements that will display // the quote, the author, and the button const quoteElement = document.getElementById("quote"); @@ -5,7 +6,7 @@ const authorElement = document.getElementById("author"); const newQuoteButton = document.getElementById("new-quote"); // Store the currently displayed quote so that -// we do not show the exact same quote twice in a row +// the same quote is not shown twice in a row let currentQuote = null; /** @@ -30,13 +31,20 @@ function displayRandomQuote() { const selectedQuote = getNewRandomQuote(); quoteElement.textContent = `"${selectedQuote.quote}"`; - authorElement.textContent = `— ${selectedQuote.author}`; + authorElement.textContent = selectedQuote.author; currentQuote = selectedQuote; } -// Show a random quote as soon as the page loads -displayRandomQuote(); +/** + * Runs when the page loads. + * It shows the first quote and sets up the button click event. + */ +function setup() { + displayRandomQuote(); + newQuoteButton.addEventListener("click", displayRandomQuote); +} -// Show a different random quote whenever the button is clicked -newQuoteButton.addEventListener("click", displayRandomQuote); +// Run setup when the page has finished loading +window.addEventListener("load", setup); +EOF; diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 3ed82880d..28eb64a37 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,4 +1,5 @@ -/* Apply box-sizing to all elements so padding and borders +cat > style.css <<'EOF' +/* Apply box sizing to all elements so padding and borders do not affect the final width and height unexpectedly */ * { box-sizing: border-box; @@ -49,6 +50,11 @@ h1 { color: #555555; } +/* Add the dash in CSS instead of JavaScript */ +.quote-author::before { + content: "— "; +} + /* Button styling */ #new-quote { padding: 12px 24px; @@ -56,7 +62,7 @@ h1 { border: none; border-radius: 8px; background-color: #0b5ed7; - color: #ffffff; + color: white; cursor: pointer; } @@ -69,4 +75,5 @@ h1 { #new-quote:focus { outline: 3px solid #99c2ff; outline-offset: 3px; -}/** Write your CSS in here **/ +} +EOF \ No newline at end of file From 07147e28cdba6809e1a5ff675143947d7c7db8a2 Mon Sep 17 00:00:00 2001 From: Richard Frimpong Date: Sat, 28 Mar 2026 15:02:02 +0000 Subject: [PATCH 5/5] Refine quote generator based on mentor feedback --- Sprint-3/quote-generator/index.html | 2 +- Sprint-3/quote-generator/script.js | 2 -- Sprint-3/quote-generator/style.css | 2 -- 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 60a549e0f..8eff16674 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -20,4 +20,4 @@

Quote Generator

- \ No newline at end of file + diff --git a/Sprint-3/quote-generator/script.js b/Sprint-3/quote-generator/script.js index 4732c6c63..0efec29f6 100644 --- a/Sprint-3/quote-generator/script.js +++ b/Sprint-3/quote-generator/script.js @@ -1,4 +1,3 @@ -cat > script.js << "EOF"; // Get references to the HTML elements that will display // the quote, the author, and the button const quoteElement = document.getElementById("quote"); @@ -47,4 +46,3 @@ function setup() { // Run setup when the page has finished loading window.addEventListener("load", setup); -EOF; diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 28eb64a37..4c217ceba 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,4 +1,3 @@ -cat > style.css <<'EOF' /* Apply box sizing to all elements so padding and borders do not affect the final width and height unexpectedly */ * { @@ -76,4 +75,3 @@ h1 { outline: 3px solid #99c2ff; outline-offset: 3px; } -EOF \ No newline at end of file