diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..7638ed8b1 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,31 @@ - Title here + Quote generator app + -

hello there

-

-

- +
+

Quote generator app

+ +
+
+
+ +
+

+
+ +
+ +
+ + +

+
- + \ No newline at end of file diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..dc95fec50 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -490,4 +490,74 @@ const quotes = [ }, ]; -// call pickFromArray with the quotes array to check you get a random quote + +// Grab the elements we need to update once, so we're not +// searching the page every time. +const quoteEl = document.getElementById("quote"); +const authorEl = document.getElementById("author"); +const newQuoteButton = document.getElementById("new-quote"); +const autoplayCheckbox = document.getElementById("autoplay-checkbox"); +const autoplayStatusEl = document.getElementById("autoplay-status"); + +// This will hold the id returned by setInterval so we can +// stop it again later when auto-play is switched off. +let autoplayIntervalId = null; + +// How often to change the quote automatically, in milliseconds. +// Set to 60 seconds as per the brief - turn this down to +// something like 5000 (5 seconds) while you're testing. +const AUTOPLAY_INTERVAL_MS = 60000; + +// Picks a new random quote and displays it on the screen. +function showRandomQuote() { + const randomQuote = pickFromArray(quotes); + // If you prefer the Math.random() approach directly, you could + // instead write: + // const randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; +quoteEl.textContent = randomQuote.quote; +authorEl.textContent = randomQuote.author; +} + +// Updates the on-screen text that says whether auto-play is on or off. +function updateAutoplayStatus(isOn) { + autoplayStatusEl.textContent = isOn + ? "auto-play: ON — a new quote will appear every 60 seconds." + : "auto-play: OFF — quotes will only change when you click the button."; +} + +// Turns auto-play on: shows a new quote immediately, then keeps +// showing a new one every AUTOPLAY_INTERVAL_MS. +function startAutoplay() { + updateAutoplayStatus(true); + autoplayIntervalId = setInterval(showRandomQuote, AUTOPLAY_INTERVAL_MS); +} + +// Turns auto-play off: stops the repeating timer so the quote +// stops changing by itself. +function stopAutoplay() { + updateAutoplayStatus(false); + clearInterval(autoplayIntervalId); + autoplayIntervalId = null; +} + +// Wire everything up once the page has loaded. +document.addEventListener("DOMContentLoaded", () => { + // Show a random quote as soon as the page loads. + showRandomQuote(); + + // Show a new quote whenever the button is clicked. + newQuoteButton.addEventListener("click", showRandomQuote); + + // Start in the "off" state so the status text is correct + // even before the user touches the checkbox. + updateAutoplayStatus(false); + + // Toggle auto-play on/off when the checkbox is switched. + autoplayCheckbox.addEventListener("change", () => { + if (autoplayCheckbox.checked) { + startAutoplay(); + } else { + stopAutoplay(); + } + }); +}); \ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..e79bb9e1e 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,114 @@ /** Write your CSS in here **/ + +:root { + --accent: #ff9f0a; + --accent-dark: #e08600; +} + +* { + box-sizing: border-box; +} + +body { + font-family: Georgia, "Times New Roman", serif; + background: var(--accent); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + padding: 2rem; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.card { + background: #fff; + padding: 3rem 3.5rem; + max-width: 700px; + width: 100%; +} + +.quote-container { + margin-bottom: 1.5rem; +} + +#quote { + font-size: 1.6rem; + color: var(--accent); + margin: 0; + line-height: 1.4; + quotes: '"' '"'; +} + +#quote::before { + content: open-quote; +} + +#quote::after { + content: close-quote; +} + +.author-container { + text-align: right; + margin-bottom: 2rem; +} + +#author { + font-size: 1.1rem; + color: var(--accent); + margin: 0; +} + +#author::before { + content: "— "; +} + +.controls { + display: flex; + justify-content: flex-end; +} + +button { + font-family: system-ui, sans-serif; + padding: 0.85rem 1.75rem; + border: none; + background: var(--accent); + color: #fff; + font-size: 1rem; + font-weight: 600; + cursor: pointer; +} + +button:hover { + background: var(--accent-dark); +} + +.autoplay-toggle { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 0.4rem; + font-family: system-ui, sans-serif; + font-size: 0.9rem; + color: #888; + margin-top: 1rem; +} + +#autoplay-status { + font-family: system-ui, sans-serif; + font-size: 0.8rem; + color: #999; + text-align: right; + margin: 0.25rem 0 0; +} \ No newline at end of file