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" } } diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..80fc4c336 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,16 @@ - Title here + Quote generator app + -

hello there

-

-

- +
+

Quote Generator

+

+

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..44a062cbd 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -490,4 +490,23 @@ const quotes = [ }, ]; -// call pickFromArray with the quotes array to check you get a random quote +// Function to display a random quote on the page +function displayRandomQuote() { + // Pick a random quote object from the quotes array + const randomQuote = pickFromArray(quotes); + + // Update the quote text on the page + document.getElementById("quote").textContent = randomQuote.quote; + + // Update the author name on the page + document.getElementById("author").textContent = randomQuote.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(); 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; +}