From 90e5f08475c6df24a7450450097fedb2d258558b Mon Sep 17 00:00:00 2001 From: Enice-Codes Date: Tue, 11 Aug 2026 01:03:41 +0200 Subject: [PATCH 1/2] added css,js and html code to complete project,quotes.test.js --- Sprint-3/quote-generator/index.html | 30 +++++-- Sprint-3/quote-generator/quotes.js | 76 ++++++++++++++++++ Sprint-3/quote-generator/style.css | 116 ++++++++++++++++++++++++++++ 3 files changed, 216 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..4e2263d93 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,31 @@ - Title here + Quote generator app + -

hello there

-

-

- +
+

Quote generator app

+ +
+

+
+ +
+

+
+ +
+ +
+ + +

+
- + \ No newline at end of file diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..55e0e93be 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,79 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +function pickFromArray(array) { + const randomIndex = Math.floor(Math.random() * array.length); + return array[randomIndex]; +} + +// Grab the elements we need to update once, so we're not +// searching the page every time. +const quoteEl = document.getElementById("quote"); +const authorEl = document.getElementById("author"); +const newQuoteButton = document.getElementById("new-quote"); +const autoplayCheckbox = document.getElementById("autoplay-checkbox"); +const autoplayStatusEl = document.getElementById("autoplay-status"); + +// This will hold the id returned by setInterval so we can +// stop it again later when auto-play is switched off. +let autoplayIntervalId = null; + +// How often to change the quote automatically, in milliseconds. +// Set to 60 seconds as per the brief - turn this down to +// something like 5000 (5 seconds) while you're testing. +const AUTOPLAY_INTERVAL_MS = 60000; + +// Picks a new random quote and displays it on the screen. +function showRandomQuote() { + const randomQuote = pickFromArray(quotes); + // If you prefer the Math.random() approach directly, you could + // instead write: + // const randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; + + quoteEl.textContent = `"${randomQuote.quote}"`; + authorEl.textContent = `— ${randomQuote.author}`; +} + +// Updates the on-screen text that says whether auto-play is on or off. +function updateAutoplayStatus(isOn) { + autoplayStatusEl.textContent = isOn + ? "auto-play: ON — a new quote will appear every 60 seconds." + : "auto-play: OFF — quotes will only change when you click the button."; +} + +// Turns auto-play on: shows a new quote immediately, then keeps +// showing a new one every AUTOPLAY_INTERVAL_MS. +function startAutoplay() { + updateAutoplayStatus(true); + autoplayIntervalId = setInterval(showRandomQuote, AUTOPLAY_INTERVAL_MS); +} + +// Turns auto-play off: stops the repeating timer so the quote +// stops changing by itself. +function stopAutoplay() { + updateAutoplayStatus(false); + clearInterval(autoplayIntervalId); + autoplayIntervalId = null; +} + +// Wire everything up once the page has loaded. +document.addEventListener("DOMContentLoaded", () => { + // Show a random quote as soon as the page loads. + showRandomQuote(); + + // Show a new quote whenever the button is clicked. + newQuoteButton.addEventListener("click", showRandomQuote); + + // Start in the "off" state so the status text is correct + // even before the user touches the checkbox. + updateAutoplayStatus(false); + + // Toggle auto-play on/off when the checkbox is switched. + autoplayCheckbox.addEventListener("change", () => { + if (autoplayCheckbox.checked) { + startAutoplay(); + } else { + stopAutoplay(); + } + }); +}); \ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..e5b73e143 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,117 @@ /** Write your CSS in here **/ +:root { + --accent: #ff9f0a; + --accent-dark: #e08600; +} + +* { + box-sizing: border-box; +} + +body { + font-family: Georgia, "Times New Roman", serif; + background: var(--accent); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + padding: 2rem; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.card { + background: #fff; + padding: 3rem 3.5rem; + max-width: 700px; + width: 100%; +} + +.quote-container { + position: relative; + padding-left: 3rem; + margin-bottom: 1.5rem; +} + +.quote-container::before { + content: "\201C"; + position: absolute; + left: 0; + top: -0.6rem; + font-size: 4rem; + line-height: 1; + font-weight: bold; + color: var(--accent); +} + +#quote { + font-size: 1.6rem; + color: var(--accent); + margin: 0; + line-height: 1.4; +} + +.author-container { + text-align: right; + margin-bottom: 2rem; +} + +#author { + font-size: 1.1rem; + color: var(--accent); + margin: 0; +} + +#author::before { + content: "- "; +} + +.controls { + display: flex; + justify-content: flex-end; +} + +button { + font-family: system-ui, sans-serif; + padding: 0.85rem 1.75rem; + border: none; + background: var(--accent); + color: #fff; + font-size: 1rem; + font-weight: 600; + cursor: pointer; +} + +button:hover { + background: var(--accent-dark); +} + +.autoplay-toggle { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 0.4rem; + font-family: system-ui, sans-serif; + font-size: 0.9rem; + color: #888; + margin-top: 1rem; +} + +#autoplay-status { + font-family: system-ui, sans-serif; + font-size: 0.8rem; + color: #999; + text-align: right; + margin: 0.25rem 0 0; +} \ No newline at end of file From 3a546acea4e98e7d6115b40c9e2761dd9693fb29 Mon Sep 17 00:00:00 2001 From: Enice-Codes Date: Sat, 15 Aug 2026 11:22:23 +0200 Subject: [PATCH 2/2] removed the from js file to css , modified the js file anf html --- Sprint-3/quote-generator/index.html | 4 ++-- Sprint-3/quote-generator/quotes.js | 10 ++-------- Sprint-3/quote-generator/style.css | 25 +++++++++++-------------- 3 files changed, 15 insertions(+), 24 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 4e2263d93..7638ed8b1 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,7 +4,7 @@ Quote generator app - + @@ -12,7 +12,7 @@

Quote generator app

-

+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 55e0e93be..dc95fec50 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -490,11 +490,6 @@ const quotes = [ }, ]; -// call pickFromArray with the quotes array to check you get a random quote -function pickFromArray(array) { - const randomIndex = Math.floor(Math.random() * array.length); - return array[randomIndex]; -} // Grab the elements we need to update once, so we're not // searching the page every time. @@ -519,9 +514,8 @@ function showRandomQuote() { // If you prefer the Math.random() approach directly, you could // instead write: // const randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; - - quoteEl.textContent = `"${randomQuote.quote}"`; - authorEl.textContent = `— ${randomQuote.author}`; +quoteEl.textContent = randomQuote.quote; +authorEl.textContent = randomQuote.author; } // Updates the on-screen text that says whether auto-play is on or off. diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index e5b73e143..e79bb9e1e 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,4 +1,5 @@ /** Write your CSS in here **/ + :root { --accent: #ff9f0a; --accent-dark: #e08600; @@ -39,27 +40,23 @@ body { } .quote-container { - position: relative; - padding-left: 3rem; margin-bottom: 1.5rem; } -.quote-container::before { - content: "\201C"; - position: absolute; - left: 0; - top: -0.6rem; - font-size: 4rem; - line-height: 1; - font-weight: bold; - color: var(--accent); -} - #quote { font-size: 1.6rem; color: var(--accent); margin: 0; line-height: 1.4; + quotes: '"' '"'; +} + +#quote::before { + content: open-quote; +} + +#quote::after { + content: close-quote; } .author-container { @@ -74,7 +71,7 @@ body { } #author::before { - content: "- "; + content: "— "; } .controls {