From 4b886ac5e67051019c166d96ed7111d0b6477784 Mon Sep 17 00:00:00 2001 From: Liban Jama Date: Mon, 23 Mar 2026 15:28:48 +0000 Subject: [PATCH] Completed quotes-generator --- Sprint-3/quote-generator/index.html | 22 ++++++++++---- Sprint-3/quote-generator/quotes.js | 32 ++++++++++++++++++++ Sprint-3/quote-generator/style.css | 47 +++++++++++++++++++++++++++++ 3 files changed, 95 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..2793a59ee 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,25 @@ - + - Title here + Quote generator app + + -

hello there

-

-

- +
+
+

Quote Generator

+

+

+ +
+ + +
+
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..e26964428 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,35 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +function handleCheckBox() { + if (checkBox.checked) { + clearInterval(intervalId); + intervalId = setInterval(displayRandomQuote, 5000); + } else { + clearInterval(intervalId); + } +} +const newQuoteButton = document.getElementById("new-quote"); + +const checkBox = document.getElementById("auto-checkbox"); + +const quoteText = document.getElementById("quote"); + +const authorText = document.getElementById("author"); + +let intervalId = null; + +newQuoteButton.addEventListener("click", displayRandomQuote); + +checkBox.addEventListener("click", handleCheckBox); + +function displayRandomQuote() { + const selectedQuote = pickFromArray(quotes); + + quoteText.textContent = `"${selectedQuote.quote}"`; + + authorText.textContent = `${selectedQuote.author}`; +} + +window.onload = displayRandomQuote; diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..e1d80d827 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,48 @@ /** Write your CSS in here **/ +body { + margin: 0; + font-family: Arial, sans-serif; + background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%); +} + +.container { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.quote-box { + background: white; + padding: 30px; + width: 350px; + text-align: center; + border-radius: 12px; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); +} + +.quote { + font-size: 18px; + margin-bottom: 15px; + color: #444; +} + +.author { + font-size: 14px; + color: #777; + margin-bottom: 20px; +} + +button { + padding: 10px 20px; + border: none; + background: #0700b8; + color: white; + cursor: pointer; + border-radius: 6px; + font-size: 14px; +} + +button:hover { + background: #5a67d8; +}