From 540baf0cb81df20960cfc1a42fc6ba2714389a0b Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sun, 14 Sep 2025 01:27:59 +0100 Subject: [PATCH 1/3] Rename index.html to Quote generator app --- Sprint-3/quote-generator/{index.html => Quote generator app.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Sprint-3/quote-generator/{index.html => Quote generator app.html} (100%) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/Quote generator app.html similarity index 100% rename from Sprint-3/quote-generator/index.html rename to Sprint-3/quote-generator/Quote generator app.html From 5424cf68f5bbee75c585a66f8111613f90f3825c Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sun, 14 Sep 2025 01:32:04 +0100 Subject: [PATCH 2/3] Add displayRandomQuote function inside addEventListener to make sure the DOM is fully loaded --- Sprint-3/quote-generator/quotes.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..c962ae5f1 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,24 @@ +// Wait until the DOM is fully loaded +window.addEventListener("DOMContentLoaded", () => { + // Get references to the HTML elements + const quoteEl = document.getElementById("quote"); + const authorEl = document.getElementById("author"); + const newQuoteBtn = document.getElementById("new-quote"); + + // Function to display a random quote + function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); // get random quote object + quoteEl.innerText = randomQuote.quote; // set quote text + authorEl.innerText = randomQuote.author; // set author text + } + + // Display a quote immediately when page loads + displayRandomQuote(); + + // Display a new quote when button is clicked + newQuoteBtn.addEventListener("click", displayRandomQuote); +}); + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at From 29632cd49dcefafd8eea79b78d08e12f0933c538 Mon Sep 17 00:00:00 2001 From: Samiuk Date: Sun, 14 Sep 2025 03:47:35 +0100 Subject: [PATCH 3/3] Add CSS file and tried to make the symbol in the same line next to the quote --- .../quote-generator/Quote generator app.html | 6 +- Sprint-3/quote-generator/quotes.js | 5 +- Sprint-3/quote-generator/style.css | 72 ++++++++++++++++++- 3 files changed, 78 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/Quote generator app.html b/Sprint-3/quote-generator/Quote generator app.html index 30b434bcf..0a5ae1820 100644 --- a/Sprint-3/quote-generator/Quote generator app.html +++ b/Sprint-3/quote-generator/Quote generator app.html @@ -3,13 +3,15 @@ - Title here + Quote Generator + -

hello there

+

+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index c962ae5f1..b3d7e14c7 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -8,8 +8,9 @@ window.addEventListener("DOMContentLoaded", () => { // Function to display a random quote function displayRandomQuote() { const randomQuote = pickFromArray(quotes); // get random quote object - quoteEl.innerText = randomQuote.quote; // set quote text - authorEl.innerText = randomQuote.author; // set author text + quoteEl.innerHTML = `
“
${randomQuote.quote}`; + authorEl.innerText = `- ${randomQuote.author}`; + } // Display a quote immediately when page loads diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..139e2b6cf 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,71 @@ -/** Write your CSS in here **/ +/* Make the whole page background yellow and center the content */ +body { + background-color: #ff8904; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + /* full viewport height */ + margin: 0; + font-family: Arial, sans-serif; +} + +/* The frame container for quote, author, and button */ +.container { + background-color: #ffffff; + /* white */ + padding: 40px; + border-radius: 15px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + /* space between elements */ + max-width: 500px; + width: 90%; +} + +/* Style the quote */ +#quote { + color: #ff8904; + font-size: 1.2rem; + line-height: 1; + max-width: 100%; + text-align: left; + justify-content: left; +} + + +/* Style the author */ +#author { + color: #ff8904; + font-size: 1.2rem; + margin: 0; + text-align: right; +} + +/* Style the button */ +#new-quote { + background-color: #ff8904; + color: #ffffff; + border: none; + padding: 10px 10px; + font-size: 1rem; + border-radius: 8px; + width: 100px; + text-align: right; +} + +/* Hover effect for button */ +#new-quote:hover { + background-color: hsl(32, 90%, 65%); +} +.quote-symbol { + font-size: 7rem; + color: #ff8904; + margin-right: 6px; + text-align: left; + justify-content: left; +} \ No newline at end of file