diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..5db34c22a 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,22 @@ - + - Title here + Quote Generator App + -

hello there

+

Quote Generator

+
+ +

auto-play: OFF

+
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..e598d2985 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: #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: "Playfair Display", Georgia, 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: 1000; +} + +/*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; + font-style: italic; + text-align: justify; + text-align-last: left; + line-height: 1.2; + font-weight: 500; +} + +#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); +}