From 4a7a5d1503c731d07ca51d9154bacbd2319285ec Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Tue, 21 Apr 2026 23:47:39 +0200 Subject: [PATCH 1/2] Implement quote generator UI and interaction logic --- Sprint-3/quote-generator/index.html | 19 ++++-- Sprint-3/quote-generator/quotes.js | 25 +++++++- Sprint-3/quote-generator/style.css | 97 ++++++++++++++++++++++++++++- 3 files changed, 133 insertions(+), 8 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..6a80999e5 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,22 @@ - + - Title here + + -

hello there

-

-

- +
+
+ “ +

+
+

+
+ +
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..112722aca 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,25 @@ +document.title = "Quote generator app"; + +const domQuote = document.getElementById("quote"); +const domAuthor = document.getElementById("author"); +const newQuote = document.getElementById("new-quote"); + +function showRandomQuote() { + const randomQuote = pickFromArray(quotes); + + domQuote.textContent = randomQuote.quote; + domAuthor.textContent = randomQuote.author; +} + +// Select the quote and author elements from the DOM. +// Select the "New quote" button from the DOM. +// Write a function to: +// Pick a random quote object from the quotes array. +// Set the quote element’s text to the quote. +// Set the author element’s text to the author. +// When the page loads, call this function to show a random quote. +// When the button is clicked, call this function again to show a new random quote. + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -490,4 +512,5 @@ const quotes = [ }, ]; -// call pickFromArray with the quotes array to check you get a random quote +showRandomQuote(); +newQuote.addEventListener("click", showRandomQuote); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..05663d941 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,96 @@ -/** Write your CSS in here **/ +* { + box-sizing: border-box; +} + +body { + background-color: #f4a63e; + + min-height: 100vh; + + padding: 24px; + + display: flex; + justify-content: center; + align-items: center; +} + +.quotepanel { + background-color: white; + + width: 100%; + max-width: 1000px; + min-height: 330px; + + padding: 40px 50px; + + display: flex; + flex-direction: column; +} + +.quotebox { + gap: 16px; + + display: flex; + align-items: flex-start; +} + +.quote-symbol { + color: #f4a63e; + + font-family: "Gill Sans", "Trebuchet MS", "Helvetica Neue", sans-serif; + font-size: 6.25rem; + font-weight: bold; + line-height: 0.8; + + margin-top: -0.45rem; +} + +.quotes { + color: #f4a63e; + + font-family: Georgia, "Times New Roman", Times, serif; + font-size: 2.4rem; + line-height: 1.25; + + min-height: 6.25em; + + margin: 0; + + flex: 1; +} + +.authors { + color: #f4a63e; + + font-family: Georgia, "Times New Roman", Times, serif; + font-size: 1.4rem; + + margin: 0; + + text-align: right; +} + +.authors::before { + content: "- "; +} + +.button-styling { + margin-top: auto; + padding-top: 20px; + + display: flex; + justify-content: flex-end; +} + +#new-quote { + background-color: #f4a63e; + color: white; + + font-size: 1rem; + + padding: 14px 22px; + + border: none; + + cursor: pointer; +} From ba74bd20708652c58f2c670a51d18d131c253b01 Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Wed, 22 Apr 2026 00:00:40 +0200 Subject: [PATCH 2/2] Fix quote test by awaiting userEvent clicks The quote generator code was working, but the test was failing because the installed version of @testing-library/user-event handles clicks asynchronously. I updated the test to use await so it matches the dependency behavior. I used AI to help investigate the issue and understand why the test was failing. --- Sprint-3/quote-generator/quotes.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.test.js b/Sprint-3/quote-generator/quotes.test.js index 288ab4651..a48f9b30d 100644 --- a/Sprint-3/quote-generator/quotes.test.js +++ b/Sprint-3/quote-generator/quotes.test.js @@ -50,7 +50,7 @@ describe("Quote generator", () => { ); expect(authorP).toHaveTextContent("Albert Einstein"); }); - test("can change quote to another random quote", () => { + test("can change quote to another random quote", async () => { const quoteP = page.window.document.querySelector("#quote"); const authorP = page.window.document.querySelector("#author"); const newQuoteBtn = page.window.document.querySelector("#new-quote"); @@ -61,14 +61,14 @@ describe("Quote generator", () => { expect(authorP).toHaveTextContent("Albert Einstein"); expect(newQuoteBtn).toHaveTextContent("New quote"); - userEvent.click(newQuoteBtn); + await userEvent.click(newQuoteBtn); expect(quoteP).toHaveTextContent( "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." ); expect(authorP).toHaveTextContent("Maya Angelou"); - userEvent.click(newQuoteBtn); + await userEvent.click(newQuoteBtn); expect(quoteP).toHaveTextContent( "I have learned over the years that when one's mind is made up, this diminishes fear."