From 9d742f8632837e062f825f51e1a22cf408f01668 Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Fri, 20 Mar 2026 17:33:57 +0000 Subject: [PATCH 1/2] update implementation in quotes.js and updated index.html to make a quote card --- Sprint-3/quote-generator/index.html | 20 +++++++--- Sprint-3/quote-generator/quotes.js | 58 +++++++++++++++++++++++++++++ Sprint-3/quote-generator/style.css | 14 ++++++- 3 files changed, 86 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..a787ff7e0 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,25 @@ - + - Title here + Quote generator app + -

hello there

-

-

+

Inspirational Quotes

+
+

+

+
+ +
+ + +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..287109911 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,61 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +const quoteDisplay = document.querySelector("#quote"); +const authorDisplay = document.querySelector("#author"); +const newQuoteButton = document.querySelector("#new-quote"); + +// 1. Function to update the text on the screen + +function displayNewQuote() { +const randomQuote = pickFromArray(quotes); // Uses the provided function +quoteDisplay.textContent = randomQuote.quote; +authorDisplay.textContent = `- ${randomQuote.author}`; +} + +// 2. Add event listener to the button +newQuoteButton.addEventListener("click", displayNewQuote); + +// 3. Call it once so a quote shows immediately on page load +displayNewQuote(); + +// Check the console to verify a random quote is picked +//console.log("Random check:", pickFromArray(quotes)); + +const autoPlayToggle = document.querySelector("#auto-play-toggle"); +const autoPlayStatus = document.querySelector("#auto-play-status"); +let autoPlayInterval = null; + +// function for starting/stopping the timer + +autoPlayToggle.addEventListener("change", function() { +if (this.checked) { + +// 1. Update text to ON + +autoPlayStatus.textContent = "ON"; + +// 2. Start the timer + +// Set to 5000 (5 seconds) for testing; change to 60000 for 1 minute later! + +autoPlayInterval = setInterval(displayNewQuote, 5000); + +// console.log("Auto-play started."); + +} else { + +// 1. Update text to OFF + +autoPlayStatus.textContent = "OFF"; + +// 2. Stop the timer + +clearInterval(autoPlayInterval); + +// console.log("Auto-play stopped."); + +}; + +}); \ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..816ef5558 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,13 @@ -/** Write your CSS in here **/ + +body { + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; +} + + From 9b594e5270912bde53c14a3aaa4264158fad9785 Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Sun, 22 Mar 2026 17:26:49 +0000 Subject: [PATCH 2/2] styling for quote-generator-app completed --- Sprint-3/quote-generator/index.html | 7 +- Sprint-3/quote-generator/quotes.js | 30 +++---- Sprint-3/quote-generator/style.css | 128 +++++++++++++++++++++++++++- 3 files changed, 144 insertions(+), 21 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index a787ff7e0..0f1c79b59 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -9,17 +9,18 @@

Inspirational Quotes

-
+

-
+
+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 287109911..4834bc27b 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -496,55 +496,53 @@ const quoteDisplay = document.querySelector("#quote"); const authorDisplay = document.querySelector("#author"); const newQuoteButton = document.querySelector("#new-quote"); -// 1. Function to update the text on the screen +//Function to update the text on the screen function displayNewQuote() { const randomQuote = pickFromArray(quotes); // Uses the provided function quoteDisplay.textContent = randomQuote.quote; -authorDisplay.textContent = `- ${randomQuote.author}`; +authorDisplay.textContent = randomQuote.author; } -// 2. Add event listener to the button +//add event listener to the button newQuoteButton.addEventListener("click", displayNewQuote); -// 3. Call it once so a quote shows immediately on page load +//calls it once so a quote shows immediately on page load displayNewQuote(); - -// Check the console to verify a random quote is picked -//console.log("Random check:", pickFromArray(quotes)); +//console.log("checking for random quotes:", pickFromArray(quotes)); const autoPlayToggle = document.querySelector("#auto-play-toggle"); const autoPlayStatus = document.querySelector("#auto-play-status"); let autoPlayInterval = null; -// function for starting/stopping the timer +//function for starting/stopping the timer autoPlayToggle.addEventListener("change", function() { if (this.checked) { -// 1. Update text to ON +//update text to ON autoPlayStatus.textContent = "ON"; -// 2. Start the timer +//start the timer -// Set to 5000 (5 seconds) for testing; change to 60000 for 1 minute later! +// set to 5000 (5 seconds) for testing; change to 60000 for 1 minute later! -autoPlayInterval = setInterval(displayNewQuote, 5000); +autoPlayInterval = setInterval(displayNewQuote, 60000); -// console.log("Auto-play started."); +//console.log("auto-play started"); } else { -// 1. Update text to OFF +// update text to OFF autoPlayStatus.textContent = "OFF"; -// 2. Stop the timer +// stop the timer clearInterval(autoPlayInterval); -// console.log("Auto-play stopped."); +// console.log("auto-play stopped."); }; diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 816ef5558..0336efc99 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,13 +1,137 @@ +@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: #a5521f; /* darker orange */ + --accent: #e07a2f; /* slightly deeper hover */ + --accent2: #f6b47f; + --text-main: #4a2404; /* darker brown */ + --text-dark: #3b1d03; + --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; - font-family: Arial, Helvetica, sans-serif; + height: 100vh; + font-family: "Roboto", Arial, Helvetica, sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; - height: 100vh; + 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); +}