From 805075ad64a6c8cee7afdb6313faf7fa807cd9a0 Mon Sep 17 00:00:00 2001 From: UbunMen Date: Sun, 7 Dec 2025 00:46:21 +0000 Subject: [PATCH 1/2] index.html of quote generator developed --- Sprint-3/quote-generator/index.html | 24 ++++++++--- Sprint-3/quote-generator/quotes.js | 30 ++++++++++++++ Sprint-3/quote-generator/style.css | 62 +++++++++++++++++++++++++++++ 3 files changed, 110 insertions(+), 6 deletions(-) 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..681cd8082 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: #b1f8ed; + 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; +} + From b805c96ee2a840c082320ea5abca882711fc1a4c Mon Sep 17 00:00:00 2001 From: UbunMen Date: Sun, 7 Dec 2025 00:49:48 +0000 Subject: [PATCH 2/2] Styles od quote generator implemented --- Sprint-3/quote-generator/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 681cd8082..aba1813b5 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -3,7 +3,7 @@ body { margin: 0; padding: 0; - background-color: #b1f8ed; + background-color: #abeee4; font-family: Arial, Helvetica, sans-serif; } @@ -60,4 +60,4 @@ body { font-weight: bold; color: #d88d24; } - +