From 4b886ac5e67051019c166d96ed7111d0b6477784 Mon Sep 17 00:00:00 2001 From: Liban Jama Date: Mon, 23 Mar 2026 15:28:48 +0000 Subject: [PATCH 1/2] 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; +} From ce696bcd42db201045ffca6fb1d7be586d006f77 Mon Sep 17 00:00:00 2001 From: Liban Jama Date: Tue, 31 Mar 2026 12:43:14 +0100 Subject: [PATCH 2/2] Fixed after PR comment changes --- Sprint-3/quote-generator/index.html | 1 - Sprint-3/quote-generator/quotes.js | 67 +++++++++++++++-------------- 2 files changed, 35 insertions(+), 33 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 2793a59ee..4eb4e072b 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -6,7 +6,6 @@ Quote generator app -
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index e26964428..0702e36c2 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,38 @@ +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; + +function handleCheckBox() { + if (checkBox.checked) { + clearInterval(intervalId); + intervalId = setInterval(displayRandomQuote, 5000); + } else { + clearInterval(intervalId); + } +} + +function displayRandomQuote() { + const selectedQuote = pickFromArray(quotes); + + quoteText.textContent = selectedQuote.quote; + + authorText.textContent = selectedQuote.author; +} + +function setup() { + // code to be executed on page load + newQuoteButton.addEventListener("click", displayRandomQuote); + + checkBox.addEventListener("click", handleCheckBox); + displayRandomQuote(); +} +window.addEventListener("load", setup); // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -491,35 +526,3 @@ 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;