From a646bff8da5378db287741208b83556c02234467 Mon Sep 17 00:00:00 2001 From: Fayaz Date: Mon, 23 Mar 2026 23:35:45 +0000 Subject: [PATCH 1/2] implemented dom to quotes --- Sprint-3/quote-generator/quotes.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..94ae4892e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,33 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +const newQuote = document.querySelector("#new-quote"); +const quoteTxt = document.querySelector("#quote"); +const quoteAuthor = document.querySelector("#author"); +const autoPlay = document.querySelector("#auto-play"); +const autoPlayTxt = document.querySelector("#auto-play-txt"); +const autoPlayTime = 60000; +let autoPlayInterval = null; +newQuote.addEventListener("click", displayQuote); + +initaliseSite(); +autoPlay.addEventListener("change", () => { + if (autoPlay.checked) { + console.log("ON"); + autoPlayTxt.textContent = `Auto-Play: ON, changing quote every ${autoPlayTime / 1000} seconds.`; + autoPlayInterval = setInterval(displayQuote, autoPlayTime); + } else { + console.log("OFF"); + autoPlayTxt.textContent = "Auto-Play: OFF"; + clearInterval(autoPlayInterval); + } +}); +function initaliseSite() { + displayQuote(); +} + +function displayQuote() { + const quote = pickFromArray(quotes); + quoteTxt.innerHTML = `${quote.quote}`; + quoteAuthor.textContent = `- ${quote.author}`; +}; \ No newline at end of file From 814f96ed226b64a2e0332ba256f636e4579815ba Mon Sep 17 00:00:00 2001 From: Fayaz Date: Mon, 23 Mar 2026 23:38:17 +0000 Subject: [PATCH 2/2] updated the html to change the name and styled it with css --- Sprint-3/quote-generator/index.html | 5 +++-- Sprint-3/quote-generator/style.css | 22 ++++++++++++++++++++++ 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..a40b9ddec 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,11 +3,12 @@ - Title here + Quote Generator + -

hello there

+

Quote Generator

diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..10e3ecc66 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,23 @@ /** Write your CSS in here **/ +body { + font-family: Arial, sans-serif; + text-align: center; + padding: 20px; + background-color: aqua; +} +#quote { + font-size: 1.5em; + margin: 20px 0; + border: #160303 3px dotted; +} +#author { + font-size: 1.2em; + color: #555; + margin-bottom: 20px; +} +button { + padding: 10px 20px; + font-size: 1em; + cursor: pointer; + background-color: aquamarine; +} \ No newline at end of file