diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..ae289dff9 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,27 @@ - - - - Title here - - - -

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..5bd357094 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,32 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +const quoteEl = document.getElementById("quote"); +const authorEl = document.getElementById("author"); +const btn = document.getElementById("new-quote"); +const toggle = document.getElementById("autoplay-toggle"); +const statusEl = document.getElementById("autoplay-status"); + +let interval = null; + +function showQuote() { + const picked = pickFromArray(quotes); + console.log(picked); + quoteEl.textContent = picked.quote; + authorEl.textContent = "- " + picked.author; +} + +btn.addEventListener("click", showQuote); + +toggle.addEventListener("change", () => { + if (toggle.checked) { + statusEl.textContent = "Auto Play: ON"; + interval = setInterval(showQuote, 3000); + } else { + statusEl.textContent = "Auto Play: OFF"; + clearInterval(interval); + interval = null; + } +}); + +showQuote(); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..0f529d9cd 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,107 @@ -/** Write your CSS in here **/ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + min-height: 100vh; + background-color: #f5a800; + display: flex; + align-items: center; + justify-content: center; + font-family: Georgia, serif; +} + +.card { + background: #fff; + padding: 60px 50px 40px; + max-width: 780px; + width: 90%; + border-radius: 4px; + position: relative; +} + +.card::before { + content: "\201C"; + font-size: 120px; + color: #f5a800; + line-height: 0.6; + position: absolute; + top: 40px; + left: 40px; +} + +#quote { + font-size: 1.4rem; + color: #f5a800; + margin-bottom: 20px; + padding-left: 60px; + line-height: 1.6; +} + +#author { + font-size: 1.1rem; + color: #f5a800; + text-align: right; + margin-bottom: 30px; +} + +.controls { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 20px; +} + +button#new-quote { + background-color: #f5a800; + color: #fff; + border: none; + padding: 14px 28px; + font-size: 1rem; + cursor: pointer; +} + +button#new-quote:hover { + background-color: #d99200; +} + +/* Toggle switch */ +.toggle-label { + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + font-size: 0.9rem; + color: #f5a800; +} + +.slider { + width: 44px; + height: 24px; + background: #ccc; + border-radius: 999px; + position: relative; + transition: background 0.3s; +} + +.slider::after { + content: ""; + position: absolute; + width: 18px; + height: 18px; + background: #fff; + border-radius: 50%; + top: 3px; + left: 3px; + transition: transform 0.3s; +} + +.toggle-label input:checked + .slider { + background: #f5a800; +} + +.toggle-label input:checked + .slider::after { + transform: translateX(20px); +}