From 4acfb4adc726f8f4c5ae0f27079cc316fd1bb890 Mon Sep 17 00:00:00 2001 From: Malusi Skunyana Date: Sat, 26 Jul 2025 07:43:58 +0200 Subject: [PATCH 1/3] updated index.html --- Sprint-3/quote-generator/index.html | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..9d155d9e1 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,23 @@ - Title here + + Quote generator app -

hello there

-

-

- +
+

Quote Generator

+

+

+ + +

Auto-play: OFF

+ + +
From 49a7db7e0fadcce521f3b733f2b38412f0dabff7 Mon Sep 17 00:00:00 2001 From: Malusi Skunyana Date: Sat, 26 Jul 2025 07:47:37 +0200 Subject: [PATCH 2/3] wrote the CSS for the page --- Sprint-3/quote-generator/style.css | 89 ++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..309fd9322 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,90 @@ /** Write your CSS in here **/ +/* Base styles and variables */ +:root { + --bg-color: #ffffff; + --text-color: #333333; + --accent-color: #f39c12; +} + +body, html { + margin: 0; + padding: 0; + font-family: 'Georgia', serif; + background-color: var(--accent-color); + transition: background-color 0.6s ease-in-out; + color: var(--text-color); +} + +/* Center the quote box */ +.container { + max-width: 800px; + margin: 100px auto; + background: white; + padding: 60px; + text-align: center; + border-radius: 4px; + box-shadow: 0 8px 16px rgba(0,0,0,0.15); + transition: color 0.5s ease-in-out; + color: var(--text-color); +} + +/* Quote text */ +#quote { + font-size: 2rem; + color: var(--accent-color); + margin-bottom: 30px; + position: relative; + transition: color 0.5s ease-in-out; +} + +/* Quotation mark style */ +#quote::before { + content: "“"; + font-size: 4rem; + position: absolute; + left: -40px; + top: -10px; + color: var(--accent-color); + transition: color 0.5s ease-in-out; +} + +/* Author text */ +#author { + font-size: 1.2rem; + color: var(--accent-color); + text-align: right; + margin-top: 20px; + font-style: italic; + transition: color 0.5s ease-in-out; +} + +/* Button styling */ +button { + background-color: var(--accent-color); + color: white; + padding: 12px 20px; + border: none; + font-size: 1rem; + border-radius: 3px; + cursor: pointer; + margin-top: 30px; + transition: background-color 0.5s ease-in-out; +} + +button:hover { + filter: brightness(90%); +} + +#auto-play-status { + font-weight: bold; + margin-top: 10px; + color: var(--accent-color); + transition: color 0.4s; +} + +label { + display: inline-block; + margin-top: 20px; + font-size: 1rem; + color: var(--text-color); +} From 3cc77597abe276e62626c2c0b62dd04c496c4b8d Mon Sep 17 00:00:00 2001 From: Malusi Skunyana Date: Sat, 26 Jul 2025 07:52:40 +0200 Subject: [PATCH 3/3] wrote a program to call the pickFromArray function --- Sprint-3/quote-generator/quotes.js | 42 ++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..6ea319b5a 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,45 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +// DOM elements +const quoteP = document.getElementById("quote"); +const authorP = document.getElementById("author"); +const newQuoteBtn = document.getElementById("new-quote"); +const autoPlayToggle = document.getElementById("auto-play-toggle"); +const autoPlayStatus = document.getElementById("auto-play-status"); + +let autoPlayIntervalId = null; + +function getRandomQuote() { +const index = Math.floor(Math.random() * quotes.length); +return quotes[index]; +} + +function displayQuote(quoteObj) { +quoteP.textContent = quoteObj.quote; +authorP.textContent = quoteObj.author; +} + +function showNewQuote() { +const quote = getRandomQuote(); +displayQuote(quote); +} + +newQuoteBtn.addEventListener("click", showNewQuote); + +autoPlayToggle.addEventListener("change", (e) => { +if (e.target.checked) { +autoPlayStatus.textContent = "Auto-play: ON"; +autoPlayIntervalId = setInterval(showNewQuote, 5000); // 5 seconds for testing +} else { +autoPlayStatus.textContent = "Auto-play: OFF"; +clearInterval(autoPlayIntervalId); +autoPlayIntervalId = null; +} +}); + +// Display an initial quote based on predictable test index +window.addEventListener("load", () => { +const initialQuote = getRandomQuote(); +displayQuote(initialQuote); +});