From 0823bcbb6f3436fcd3d21535b7e9f3507ed2b78b Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 17:55:34 +0000 Subject: [PATCH 01/11] Update index.html to "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 30b434bcf..5f6a720f1 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Title here + Quote generator app From ecf423da645b12a8910a499b4d1251d7deafa470 Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 19:20:32 +0000 Subject: [PATCH 02/11] Add DOM element references for quote, author, and new quote button --- Sprint-3/quote-generator/quotes.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..0b491bd22 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -15,11 +15,17 @@ // --------------- // pickFromArray(['a','b','c','d']) // maybe returns 'c' +// Get the DOM elements +const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); +const newQuoteButton = document.getElementById("new-quote"); + // You don't need to change this function function pickFromArray(choices) { return choices[Math.floor(Math.random() * choices.length)]; } + // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! const quotes = [ From 7978167a3643257760685c28d96bf525bb1d17ea Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 19:46:39 +0000 Subject: [PATCH 03/11] Move quotes array to top of file so functions can access it on load --- Sprint-3/quote-generator/quotes.js | 68 +++++++++++++++++------------- 1 file changed, 39 insertions(+), 29 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 0b491bd22..c2283d6ec 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,31 +1,3 @@ -// DO NOT EDIT BELOW HERE - -// pickFromArray is a function which will return one item, at -// random, from the given array. -// -// Parameters -// ---------- -// choices: an array of items to pick from. -// -// Returns -// ------- -// One item at random from the given array. -// -// Examples of use -// --------------- -// pickFromArray(['a','b','c','d']) // maybe returns 'c' - -// Get the DOM elements -const quoteElement = document.getElementById("quote"); -const authorElement = document.getElementById("author"); -const newQuoteButton = document.getElementById("new-quote"); - -// You don't need to change this function -function pickFromArray(choices) { - return choices[Math.floor(Math.random() * choices.length)]; -} - - // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! const quotes = [ @@ -496,4 +468,42 @@ const quotes = [ }, ]; -// call pickFromArray with the quotes array to check you get a random quote +// DO NOT EDIT BELOW HERE + +// pickFromArray is a function which will return one item, at +// random, from the given array. +// +// Parameters +// ---------- +// choices: an array of items to pick from. +// +// Returns +// ------- +// One item at random from the given array. +// +// Examples of use +// --------------- +// pickFromArray(['a','b','c','d']) // maybe returns 'c' + +// Get the DOM elements +const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); +const newQuoteButton = document.getElementById("new-quote"); + +// You don't need to change this function +function pickFromArray(choices) { + return choices[Math.floor(Math.random() * choices.length)]; +} + +// this function picks a random quote from the quotes array and updates the DOM elements +function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); // get a random quote + quoteElement.textContent = randomQuote.quote; // update quote + authorElement.textContent = randomQuote.author; // update author +} + +// show a random quote when page loads +displayRandomQuote(); + +// show a new random quote when button is clicked +newQuoteButton.addEventListener("click", displayRandomQuote); From d6cc8263faff11cd1e537db88ad3c559bb30fc0c Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 19:49:04 +0000 Subject: [PATCH 04/11] Link the style.css file to the index.html file --- 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 5f6a720f1..df15b574e 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -5,6 +5,7 @@ Quote generator app +

hello there

From c47a65fd06af99583e1adaa162f9cdb6337ad08d Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 19:55:14 +0000 Subject: [PATCH 05/11] Wrap body content in a div container for styling purposes and update the heading to "Quote Generator" --- 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 df15b574e..80fc4c336 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -8,9 +8,11 @@ -

hello there

-

-

- +
+

Quote Generator

+

+

+ +
From a39b74837d5a782ed55f8ab430a32a01a9707724 Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 20:13:48 +0000 Subject: [PATCH 06/11] Format quote and author with template literals --- Sprint-3/quote-generator/quotes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index c2283d6ec..090de779e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -498,8 +498,8 @@ function pickFromArray(choices) { // this function picks a random quote from the quotes array and updates the DOM elements function displayRandomQuote() { const randomQuote = pickFromArray(quotes); // get a random quote - quoteElement.textContent = randomQuote.quote; // update quote - authorElement.textContent = randomQuote.author; // update author + quoteElement.textContent = `"${randomQuote.quote}"`; // update quote + authorElement.textContent = `- ${randomQuote.author}`; // update author } // show a random quote when page loads From 58ee492899875bcd5e366dbaca707b49856efdee Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 20:14:30 +0000 Subject: [PATCH 07/11] Add styles for quote generator layout and elements --- Sprint-3/quote-generator/style.css | 57 ++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..3bab2fcc0 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,58 @@ /** Write your CSS in here **/ +/* Reset some default styles */ +body { + font-family: "Helvetica", "Arial", sans-serif; + background-color: #ec8a09; + color: #333; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + padding: 20px; + text-align: center; +} + +.quote-container { + display: flex; + flex-direction: column; /* stack quote, author, button vertically */ + align-items: center; /* center quote and author horizontally */ + background-color: #f7f3ee; + padding: 30px 40px; + border-radius: 15px; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); + max-width: 600px; + width: 100%; +} + +#quote { + font-size: 1.5rem; + font-style: italic; + margin-bottom: 15px; + color: #f86510; +} + +#author { + font-size: 1.2rem; + font-weight: bold; + color: #f86510; + margin-bottom: 20px; + align-self: flex-end; /* moves author to the right */ +} + +#new-quote { + align-self: flex-end; /* pushes button to the right edge of container */ + margin-top: 20px; /* optional spacing from the quote */ + background-color: #4caf50; + color: white; + border: none; + padding: 12px 25px; + border-radius: 8px; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#new-quote:hover { + background-color: #45a049; +} From cc6a03d1bc2eb857f4dcfca170d278305e8b7a94 Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 20:24:44 +0000 Subject: [PATCH 08/11] Remove template literal from the quote and author inorder to align with the test cases --- Sprint-3/quote-generator/quotes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 090de779e..c2283d6ec 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -498,8 +498,8 @@ function pickFromArray(choices) { // this function picks a random quote from the quotes array and updates the DOM elements function displayRandomQuote() { const randomQuote = pickFromArray(quotes); // get a random quote - quoteElement.textContent = `"${randomQuote.quote}"`; // update quote - authorElement.textContent = `- ${randomQuote.author}`; // update author + quoteElement.textContent = randomQuote.quote; // update quote + authorElement.textContent = randomQuote.author; // update author } // show a random quote when page loads From 299c393738842ed6f14077b2f0857904d1e03b04 Mon Sep 17 00:00:00 2001 From: iswat Date: Thu, 20 Nov 2025 20:45:17 +0000 Subject: [PATCH 09/11] Updated displayRandomQuote function and event listener for predictable random quote rendering --- Sprint-3/quote-generator/quotes.js | 67 ++++++++++++++++-------------- 1 file changed, 35 insertions(+), 32 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 090de779e..44a062cbd 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,25 @@ +// DO NOT EDIT BELOW HERE + +// pickFromArray is a function which will return one item, at +// random, from the given array. +// +// Parameters +// ---------- +// choices: an array of items to pick from. +// +// Returns +// ------- +// One item at random from the given array. +// +// Examples of use +// --------------- +// pickFromArray(['a','b','c','d']) // maybe returns 'c' + +// You don't need to change this function +function pickFromArray(choices) { + return choices[Math.floor(Math.random() * choices.length)]; +} + // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! const quotes = [ @@ -468,42 +490,23 @@ const quotes = [ }, ]; -// DO NOT EDIT BELOW HERE - -// pickFromArray is a function which will return one item, at -// random, from the given array. -// -// Parameters -// ---------- -// choices: an array of items to pick from. -// -// Returns -// ------- -// One item at random from the given array. -// -// Examples of use -// --------------- -// pickFromArray(['a','b','c','d']) // maybe returns 'c' +// Function to display a random quote on the page +function displayRandomQuote() { + // Pick a random quote object from the quotes array + const randomQuote = pickFromArray(quotes); -// Get the DOM elements -const quoteElement = document.getElementById("quote"); -const authorElement = document.getElementById("author"); -const newQuoteButton = document.getElementById("new-quote"); + // Update the quote text on the page + document.getElementById("quote").textContent = randomQuote.quote; -// You don't need to change this function -function pickFromArray(choices) { - return choices[Math.floor(Math.random() * choices.length)]; + // Update the author name on the page + document.getElementById("author").textContent = randomQuote.author; } -// this function picks a random quote from the quotes array and updates the DOM elements -function displayRandomQuote() { - const randomQuote = pickFromArray(quotes); // get a random quote - quoteElement.textContent = `"${randomQuote.quote}"`; // update quote - authorElement.textContent = `- ${randomQuote.author}`; // update author -} +// Add a click event listener to the "New quote" button +document.getElementById("new-quote").addEventListener("click", () => { + // When the button is clicked, display a new random quote + displayRandomQuote(); +}); // show a random quote when page loads displayRandomQuote(); - -// show a new random quote when button is clicked -newQuoteButton.addEventListener("click", displayRandomQuote); From e924c09ac96dc08aa4775ea530a2fa768a97d686 Mon Sep 17 00:00:00 2001 From: iswat Date: Fri, 21 Nov 2025 12:11:44 +0000 Subject: [PATCH 10/11] Downgrade @testing-library/user-event from v14.6.1 to v13.5.0 to fix async click test failures --- Sprint-3/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Sprint-3/package.json b/Sprint-3/package.json index 711a5390f..cbeead765 100644 --- a/Sprint-3/package.json +++ b/Sprint-3/package.json @@ -25,8 +25,10 @@ "devDependencies": { "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", - "@testing-library/user-event": "^14.6.1", "jest": "^30.0.4", "jest-environment-jsdom": "^30.0.4" + }, + "dependencies": { + "@testing-library/user-event": "^13.5.0" } } From b3730bb8175e732934f7be064428f9c516a63a37 Mon Sep 17 00:00:00 2001 From: iswat Date: Fri, 21 Nov 2025 12:35:30 +0000 Subject: [PATCH 11/11] Fix failing tests by downgrading @testing-library/user-event to v13 Downgraded @testing-library/user-event from v14 to v13.5.0 because version 14 introduces asynchronous userEvent handlers, causing the existing synchronous Jest tests to fail. Version 13 matches the behaviour the tests were originally written for, allowing all tests to pass again. --- Sprint-3/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Sprint-3/package.json b/Sprint-3/package.json index 711a5390f..cbeead765 100644 --- a/Sprint-3/package.json +++ b/Sprint-3/package.json @@ -25,8 +25,10 @@ "devDependencies": { "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", - "@testing-library/user-event": "^14.6.1", "jest": "^30.0.4", "jest-environment-jsdom": "^30.0.4" + }, + "dependencies": { + "@testing-library/user-event": "^13.5.0" } }