From 7df6d24cd539cca23729947d2654ab7860f2df5d Mon Sep 17 00:00:00 2001 From: Asha Ahmed Date: Sat, 28 Mar 2026 19:36:28 +0000 Subject: [PATCH 1/5] Changed title to Quote Generator App --- Sprint-3/quote-generator/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..25aaf65f3 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,9 +1,9 @@ - + - Title here + Quote Generator App From 703f6bb46e588ea2f50945c8a0b3e91b872a07bb Mon Sep 17 00:00:00 2001 From: Asha Ahmed Date: Sat, 28 Mar 2026 19:41:28 +0000 Subject: [PATCH 2/5] Implemented auto-play toggle and interval logic --- Sprint-3/quote-generator/index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 25aaf65f3..3c9f125b3 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -7,9 +7,15 @@ -

hello there

+

Quote Generator

+
+ +

auto-play: OFF

+
From 2ca051ac3e186888a633868e6a948ce646af204d Mon Sep 17 00:00:00 2001 From: Asha Ahmed Date: Sat, 28 Mar 2026 19:56:04 +0000 Subject: [PATCH 3/5] Implemented random quote generation logic and CSS --- Sprint-3/quote-generator/quotes.js | 47 ++++++++++ Sprint-3/quote-generator/style.css | 136 +++++++++++++++++++++++++++++ 2 files changed, 183 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..647acc747 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,50 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +// Select the elements from the html +const quoteDisplay = document.getElementById("quote"); +const authorDisplay = document.getElementById("author"); +const newQuoteButton = document.getElementById("new-quote"); + +// Create a function to update the content on the screen +function updateQuote() { + // Use the provided pickFromArray function + const randomQuoteObject = pickFromArray(quotes); + + // Access the 'quote' property from the object and, + // inject it into the HTML element + quoteDisplay.innerText = randomQuoteObject.quote; + + // Access the 'author' property and use a template literal, + // to add a dash for styling + authorDisplay.innerText = `- ${randomQuoteObject.author}`; +} + +// Add event listener to the button +newQuoteButton.addEventListener("click", updateQuote); + +// Show a random quote immediately when the page loads +updateQuote(); + +// Get the new elements from the DOM +const autoplayToggle = document.getElementById("autoplay-toggle"); +const autoplayStatus = document.getElementById("autoplay-status"); + +// Track timer +let timerId = null; + +// Event listener to the checkbox +autoplayToggle.addEventListener("change", () => { + if (autoplayToggle.checked) { + // Switch is ON + autoplayStatus.innerText = "auto-play: ON"; + timerId = setInterval(updateQuote, 5000); + } else { + // Switch is OFF + autoplayStatus.innerText = "auto-play: OFF"; + + // Stop the timer + clearInterval(timerId); + } +}); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..8040c870c 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,137 @@ /** Write your CSS in here **/ +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=WindSong:wght@400;500&display=swap"); + +/*variables */ +:root { + --primary: #087622; /* green */ + --accent: #2fe08d; /* slightly lighter hover */ + --accent2: #119269; + --text-main: #060606; /* black + --heading: #3a1d03; + --white: #ffffff; + --transition: 0.3s ease; + --small-text: 0.85rem; + --cursive: "WindSong", "Times New Roman", Times, serif; +} + +/*body*/ +body { + margin: 0; + padding: 0; + height: 100vh; + font-family: "Roboto", Arial, Helvetica, sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: var(--accent); +} + +/* heading */ +h1 { + color: var(--heading); + font-family: var(--cursive); + font-size: 3rem; + font-weight: 300; +} + +/*quote card container */ +#quote-display { + background: var(--white); + padding: 3cqh 3rem; + max-width: 50%; + display: flex; + flex-direction: column; + align-items: flex-end; + color: var(--text-main); + border-radius: 1rem; +} + +/*quote text */ +#quote { + position: relative; + font-size: 1.5rem; + text-align: justify; + text-align-last: left; + line-height: 1.2; + font-weight: 200; +} + +#quote::before { + content: "\201c"; + position: absolute; + left: -2.5rem; + top: -0.9rem; + font-size: 5.5rem; + font-family: "Times New Roman", Times, serif; + color: var(--accent); + line-height: 1; +} + +/* author text */ +#author { + font-family: var(--cursive); + text-align: right; + font-size: 1.5rem; + color: var(--text-dark); + margin-bottom: 2.5rem; +} + +#author::before { + content: "\2014"; + margin-right: 2px; +} + +/* button for new quotes */ +button { + background-color: #d46f2a; + color: var(--white); + border: none; + padding: 0.7rem 1.5rem; + font-size: 1rem; + border-radius: 5px; + cursor: pointer; + transition: + background-color var(--transition), + color var(--transition); +} + +button:hover { + background-color: var(--primary); + color: var(--white); +} + +/*auto-play*/ +.auto-play-toggle { + margin-top: 1rem; + margin-bottom: 1rem; + display: flex; + align-items: center; + gap: 0.5rem; + font-size: var(--small-text); + cursor: pointer; + accent-color: var(--primary); +} + +#auto-play-status { + font-size: var(--small-text); + font-weight: bold; + margin-left: 0.5rem; + color: var(--text-dark); +} + +button:focus-visible, +#auto-play-toggle:focus-visible { + outline: 3px solid #000; + outline-offset: 3px; +} + +/* input label */ +.auto-play-toggle label { + cursor: pointer; + transition: color var(--transition); +} + +.auto-play-toggle label:hover { + color: var(--accent); +} From a7e1b05f3bc52ce81904eae2abf9a672e2e5a7ba Mon Sep 17 00:00:00 2001 From: Asha Ahmed Date: Sat, 28 Mar 2026 20:01:41 +0000 Subject: [PATCH 4/5] Linked Html with CSS 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 3c9f125b3..5db34c22a 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -5,6 +5,7 @@ Quote Generator App +

Quote Generator

From e5648473a6d2a7e32545c531daeb220f48d81bd6 Mon Sep 17 00:00:00 2001 From: Asha Ahmed Date: Sat, 28 Mar 2026 20:21:56 +0000 Subject: [PATCH 5/5] CSS edits --- Sprint-3/quote-generator/style.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 8040c870c..e598d2985 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -3,15 +3,14 @@ /*variables */ :root { - --primary: #087622; /* green */ - --accent: #2fe08d; /* slightly lighter hover */ - --accent2: #119269; - --text-main: #060606; /* black - --heading: #3a1d03; + --primary: #2ab06f; /* green hoover*/ + --accent: #0e818e; /* background*/ + --text-main: #060606; /* black text */ + --heading: #060606; /* black heading */ --white: #ffffff; --transition: 0.3s ease; --small-text: 0.85rem; - --cursive: "WindSong", "Times New Roman", Times, serif; + --cursive: "Playfair Display", Georgia, serif; } /*body*/ @@ -32,7 +31,7 @@ h1 { color: var(--heading); font-family: var(--cursive); font-size: 3rem; - font-weight: 300; + font-weight: 1000; } /*quote card container */ @@ -51,10 +50,11 @@ h1 { #quote { position: relative; font-size: 1.5rem; + font-style: italic; text-align: justify; text-align-last: left; line-height: 1.2; - font-weight: 200; + font-weight: 500; } #quote::before {