From 076c9176a7fa3dbecd97726c0b3a882ccafb8ed1 Mon Sep 17 00:00:00 2001 From: saff-coder Date: Sun, 23 Nov 2025 03:44:28 +0000 Subject: [PATCH] update index.html, style.css and the quotes,js --- Sprint-3/quote-generator/index.html | 18 +++++--- Sprint-3/quote-generator/quotes.js | 27 ++++++++++++ Sprint-3/quote-generator/style.css | 68 ++++++++++++++++++++++++++++- 3 files changed, 107 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..a5b7e162f 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

-

-

- + +
+

+

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..c4771470d 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,30 @@ +// Show a random quote on the screen +function showRandomQuote() { + // Get one random object from the quotes array + const randomQuote = pickFromArray(quotes); + + // Find the HTML elements + const quoteElement = document.getElementById("quote"); + const authorElement = document.getElementById("author"); + + // Put the text inside the page + quoteElement.textContent = `"${randomQuote.quote}"`; + authorElement.textContent = `— ${randomQuote.author}`; +} + +// This runs when the page loads +function setup() { + // Show the first random quote + showRandomQuote(); + + // When button is clicked → show another quote + const button = document.getElementById("new-quote"); + button.addEventListener("click", showRandomQuote); +} + +// Make sure setup runs after page loads +window.onload = setup; + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..09dd66024 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,67 @@ -/** Write your CSS in here **/ +/* Page background */ +body { + margin: 0; + padding: 0; + background-color: #f19d17; /* light orange color */ + font-family: Georgia, "Times New Roman", serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +/* Center white box */ +#quote-container { + background: white; + padding: 60px 80px; + width: 70%; + max-width: 900px; + border-radius: 4px; + text-align: left; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +/* Quote text */ +#quote { + font-size: 2rem; + color: #fdc682; /* matching orange tone */ + font-weight: normal; + line-height: 1.5; + margin-bottom: 40px; + position: relative; + padding-left: 50px; +} + +/* Big quotation mark style */ +#quote::before { + content: "❝"; + font-size: 3rem; + color: #f4b48a; + position: absolute; + left: 0; + top: -10px; +} + +/* Author text */ +#author { + text-align: right; + font-size: 1.2rem; + color: #ed8208; + margin-bottom: 40px; +} + +/* Button styling */ +#new-quote { + background-color: #a0e0ed; + color: rgb(146, 160, 185); + padding: 12px 30px; + border: none; + border-radius: 3px; + font-size: 1rem; + cursor: pointer; + float: right; +} + +#new-quote:hover { + background-color: #cf7f22; +}