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

hello there

-

-

- - +
+
+

+

+ + +
+ + Auto-play: OFF +
+
+
+ diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..44a5e5d13 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -490,4 +490,34 @@ const quotes = [ }, ]; +function showRandomQuote() { + const random = pickFromArray(quotes); + document.getElementById("quote").textContent = random.quote; + document.getElementById("author").textContent = `– ${random.author}`; +} + +document.addEventListener("DOMContentLoaded", showRandomQuote); + +document.getElementById("new-quote").addEventListener("click", showRandomQuote); + +let intervalId = null; +const toggle = document.getElementById("autoplay-toggle"); +const statusText = document.getElementById("autoplay-status"); + +// Change every 5 seconds (60 seconds for final version) +const INTERVAL_TIME = 5000; + +toggle.addEventListener("change", function () { + if (this.checked) { + // Turn ON auto-play + statusText.textContent = "Auto-play: ON"; + intervalId = setInterval(showRandomQuote, INTERVAL_TIME); + } else { + // Turn OFF auto-play + statusText.textContent = "Auto-play: OFF"; + clearInterval(intervalId); + intervalId = null; + } +}); + // call pickFromArray with the quotes array to check you get a random quote diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..aba1813b5 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,63 @@ /** Write your CSS in here **/ + +body { + margin: 0; + padding: 0; + background-color: #abeee4; + font-family: Arial, Helvetica, sans-serif; +} + +.wrapper { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.quote-box { + background-color: white; + width: 70%; + max-width: 900px; + padding: 50px 60px; + border-radius: 4px; + color: #d88d24; + box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1); +} + +.quote-text { + font-size: 30px; + font-weight: 600; + line-height: 1.4; + margin-bottom: 30px; +} + +.quote-author { + text-align: right; + font-size: 20px; + margin-bottom: 40px; +} + +.quote-btn { + background-color: #8ca5ca; + color: white; + padding: 12px 25px; + border: none; + border-radius: 3px; + cursor: pointer; + font-size: 16px; +} + +.autoplay-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 20px; + font-size: 16px; +} + +#autoplay-status { + font-weight: bold; + color: #d88d24; +} +