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

hello there

-

-

- +
+

hello there

+

+

+ +
diff --git a/Sprint-3/quote-generator/package.json b/Sprint-3/quote-generator/package.json index 0f6f98917..beac27c4e 100644 --- a/Sprint-3/quote-generator/package.json +++ b/Sprint-3/quote-generator/package.json @@ -2,7 +2,7 @@ "name": "quote-generator", "version": "1.0.0", "license": "CC-BY-SA-4.0", - "description": "You must update this package", + "description": "Simple quote generator app that displays a random quote and its author when the user clicks a button.", "scripts": { "test": "jest --config=../jest.config.js quote-generator" }, diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..16994b0b2 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,54 @@ +function getRandomQuote(obj) { + const quoteEl = document.getElementById("quote"); + const authorEl = document.getElementById("author"); + if (!quoteEl || !authorEl) return; + quoteEl.innerText = obj.quote; + authorEl.innerText = obj.author; +} + +function setupQuotes() { + getRandomQuote(pickFromArray(quotes)); + const quoteBtn = document.getElementById("new-quote"); + if (quoteBtn) + quoteBtn.addEventListener("click", () => + getRandomQuote(pickFromArray(quotes)) + ); +} + +// New DOM wiring using window.onload (replaces previous readiness block) +window.onload = () => { + const quoteText = document.getElementById("quote"); + const authorText = document.getElementById("author"); + const newQuoteBtn = document.getElementById("new-quote"); + const autoPlayCheckbox = document.getElementById("auto-play"); + const autoPlayStatus = document.getElementById("auto-play-txt"); + + let autoPlayInterval; + + function generateQuote() { + const randomQuote = pickFromArray(quotes); + if (!randomQuote) return; + if (quoteText) quoteText.innerText = randomQuote.quote; + if (authorText) authorText.innerText = `- ${randomQuote.author}`; + } + + generateQuote(); + + if (newQuoteBtn) newQuoteBtn.addEventListener("click", generateQuote); + + if (autoPlayCheckbox) { + autoPlayCheckbox.addEventListener("change", (event) => { + if (event.target.checked) { + if (autoPlayStatus) autoPlayStatus.innerText = "Auto-Play: ON"; + autoPlayInterval = setInterval(generateQuote, 5000); + } else { + if (autoPlayStatus) autoPlayStatus.innerText = "Auto-Play: OFF"; + clearInterval(autoPlayInterval); + } + }); + } +}; + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..e56e55eb2 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,78 @@ /** Write your CSS in here **/ +:root { + --mustard: #e6a918; /* main mustard */ + --mustard-dark: #c58f00; /* darker for accents */ + --panel: #ffffff; + --muted: #555555; +} + +html, +body { + height: 100%; + margin: 0; +} + +body { + font-family: + system-ui, + -apple-system, + "Segoe UI", + Roboto, + Helvetica, + Arial, + sans-serif; + background-color: var(--mustard); + display: flex; + align-items: center; + justify-content: center; + padding: 3rem 1rem; +} + +.quote-app { + display: grid; + gap: 16px; + max-width: 900px; + width: 100%; + margin: 0 auto; + padding: 48px; + background-color: var(--panel); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); +} + +.quote-text { + font-size: 1.9rem; + line-height: 1.3; + margin: 0 0 16px; + color: var(--mustard-dark); +} + +.quote-author { + font-size: 1rem; + color: var(--mustard-dark); + margin: 0 0 12px 0; + text-align: right; +} + +.quote-btn { + justify-self: end; + padding: 10px 18px; + border-radius: 6px; + border: none; + background: var(--mustard-dark); + color: #fff; + cursor: pointer; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12); +} +.quote-btn:focus { + outline: 3px solid rgba(197, 143, 0, 0.25); +} + +/* small responsive tweak */ +@media (max-width: 640px) { + .quote-text { + font-size: 1.25rem; + } + .quote-app { + padding: 24px; + } +}