diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..8117bddb0 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,35 @@ - - - - Title here - - - + + + + + Quote generator app + + + + + +

hello there

-

-

+ +
+

+

+
+ + - - + +
+ + auto-play: OFF +
+ +
+ + + \ No newline at end of file diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..5ae15a1db 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,72 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +function getElement(id) { + const element = document.getElementById(id); + if (!element) { + throw new Error(`Element with id "${id}" not found in the HTML`); + } + return element; +} + +const quoteEl = getElement("quote"); +const authorEl = getElement("author"); +const newQuoteBtn = getElement("new-quote"); +const autoPlayToggle = getElement("auto-play-toggle"); +const autoPlayStatus = getElement("auto-play-status"); +const toggleQuoteBtn = getElement("toggle-quote"); + +newQuoteBtn.addEventListener("click", showRandomQuote); + +let autoPlayInterval = null; + +let isQuoteExpanded = false; + +function updateQuoteToggleVisibility() { + if (quoteEl.scrollHeight <= quoteEl.clientHeight) { + toggleQuoteBtn.classList.add("hidden"); + } else { + toggleQuoteBtn.classList.remove("hidden"); + } +} + +toggleQuoteBtn.addEventListener("click", () => { + if (isQuoteExpanded) { + quoteEl.classList.add("quote-clamped"); + toggleQuoteBtn.innerText = "Show more"; + isQuoteExpanded = false; + } else { + quoteEl.classList.remove("quote-clamped"); + toggleQuoteBtn.innerText = "Show less"; + isQuoteExpanded = true; + } +}); + +autoPlayToggle.addEventListener("click", () => { + if (autoPlayToggle.checked) { + autoPlayStatus.innerText = "auto-play: ON"; + if (!autoPlayInterval) { + autoPlayInterval = setInterval(showRandomQuote, 4000); + } + } else { + autoPlayStatus.innerText = "auto-play: OFF"; + clearInterval(autoPlayInterval); + autoPlayInterval = null; + } +}); + +function showRandomQuote() { + const randomQuote = pickFromArray(quotes); + + quoteEl.innerText = randomQuote.quote; + authorEl.innerText = randomQuote.author; + + isQuoteExpanded = false; + quoteEl.classList.add("quote-clamped"); + toggleQuoteBtn.innerText = "Show more"; + + updateQuoteToggleVisibility(); +} + +showRandomQuote(); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..4dc980268 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,96 @@ /** Write your CSS in here **/ + +body { + margin: 0; + padding: 0; + min-height: 100vh; + + display: flex; + justify-content: center; + align-items: center; + + background: linear-gradient(135deg, #e0f7ff, #c8f7dc); + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + sans-serif; +} + +.quote-app { + background: #ffffff; + padding: 2rem 2.5rem; + border-radius: 12px; + + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); + + max-width: 600px; + width: 90%; + text-align: center; +} + +label { + display: inline-flex; + align-items: center; + gap: 0.5rem; + margin-top: 1rem; +} + +.auto-play-controls { + display: flex; + justify-content: center; + gap: 1rem; +} + +#auto-play-toggle { + width: 20px; + height: 20px; + cursor: pointer; + accent-color: #16a34a; +} + +#auto-play-status { + margin-top: 0; + font-size: 0.9rem; + padding: 0.25rem 0.5rem; + border-radius: 999px; + display: inline-block; +} + +.auto-play-label { + gap: 0.4rem; + margin: 0; +} + +.quote-box { + min-height: 5rem; + margin-bottom: 1rem; +} + +#quote { + margin-bottom: 0.5rem; + line-height: 1.4; +} + +.quote-clamped { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +#author { + font-style: italic; + color: #4b5563; +} + +#toggle-quote { + margin-bottom: 0.75rem; + padding: 0.3rem 0.75rem; + border-radius: 999px; + border: 1px solid #cbd5f5; + background: #e5f0ff; + font-size: 0.85rem; + cursor: pointer; +} + +#toggle-quote.hidden { + display: none; +}