diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..0f1c79b59 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,26 @@ - + - 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..4834bc27b 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,59 @@ 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"); + +//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; +} + +//add event listener to the button +newQuoteButton.addEventListener("click", displayNewQuote); + +//calls it once so a quote shows immediately on page load +displayNewQuote(); +//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 + +autoPlayToggle.addEventListener("change", function() { +if (this.checked) { + +//update text to ON + +autoPlayStatus.textContent = "ON"; + +//start the timer + +// set to 5000 (5 seconds) for testing; change to 60000 for 1 minute later! + +autoPlayInterval = setInterval(displayNewQuote, 60000); + +//console.log("auto-play started"); + +} else { + +// update text to OFF + +autoPlayStatus.textContent = "OFF"; + +// 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..0336efc99 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: #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; + 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); +}