From 96233e8412537139eca18748e184f23e1e756031 Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Sat, 6 Dec 2025 15:50:07 +0000 Subject: [PATCH 1/8] added a title --- Sprint-3/quote-generator/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..5f6a720f1 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,7 +3,7 @@ - Title here + Quote generator app From 588859717aaf12785827811ea9adc75ac95aa4d3 Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Thu, 11 Dec 2025 14:50:57 +0000 Subject: [PATCH 2/8] linked the css file --- Sprint-3/quote-generator/index.html | 1 + Sprint-3/quote-generator/style.css | 40 +++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 5f6a720f1..5b695e621 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,6 +4,7 @@ Quote generator app + diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..617a8dd77 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,41 @@ /** Write your CSS in here **/ + + +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 20px; + text-align: center; +} + +h1 { + color: #333; +} + +#quote { + font-size: 1.4rem; + font-weight: bold; + margin-top: 20px; +} + +#author { + font-size: 1.1rem; + color: #555; + margin-bottom: 20px; +} + +#new-quote { + padding: 10px 20px; + font-size: 1rem; + border: none; + background-color: #4a90e2; + color: white; + border-radius: 6px; + cursor: pointer; +} + +#new-quote:hover { + background-color: #357ac9; +} + From 45fcc993f0a7b7b1385c18c841f3100116833f19 Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Thu, 11 Dec 2025 15:19:21 +0000 Subject: [PATCH 3/8] added a jest file --- Sprint-3/quote-generator/jest.config.js | 4 ++++ Sprint-3/quote-generator/quotes.js | 27 ++++++++++++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 Sprint-3/quote-generator/jest.config.js diff --git a/Sprint-3/quote-generator/jest.config.js b/Sprint-3/quote-generator/jest.config.js new file mode 100644 index 000000000..b77ee1091 --- /dev/null +++ b/Sprint-3/quote-generator/jest.config.js @@ -0,0 +1,4 @@ +module.exports = { + testEnvironment: "jsdom", + testMatch: ["quote.test.js"], +}; diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..0f1486639 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -17,7 +17,32 @@ // You don't need to change this function function pickFromArray(choices) { - return choices[Math.floor(Math.random() * choices.length)]; + // You already have pickFromArray() and quotes[] above this comment + +const quoteEl = document.getElementById("quote"); +const authorEl = document.getElementById("author"); +const button = document.getElementById("new-quote"); + +// Generate a random quote using Math.random (required for tests) +function getRandomQuote() { + const index = Math.floor(Math.random() * quotes.length); + return quotes[index]; +} + +// Put the quote + author into the DOM +function displayRandomQuote() { + const q = getRandomQuote(); + quoteEl.textContent = q.quote; + authorEl.textContent = q.author; +} + +// Show initial quote immediately +displayRandomQuote(); + +// Button shows a new quote +button.addEventListener("click", displayRandomQuote); + + // return choices[Math.floor(Math.random() * choices.length)]; } // A list of quotes you can use in your app. From fa5feabe10bb0dec9733b50ec15b0d83d69657fd Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Thu, 11 Dec 2025 20:59:54 +0000 Subject: [PATCH 4/8] wrapped the function inside windows load --- Sprint-3/quote-generator/package.json | 8 ++++++-- Sprint-3/quote-generator/quotes.js | 6 ++++-- Sprint-3/quote-generator/quotes.test.js | 2 ++ package.json | 8 ++++++++ 4 files changed, 20 insertions(+), 4 deletions(-) create mode 100644 package.json diff --git a/Sprint-3/quote-generator/package.json b/Sprint-3/quote-generator/package.json index 0f6f98917..23665943b 100644 --- a/Sprint-3/quote-generator/package.json +++ b/Sprint-3/quote-generator/package.json @@ -3,9 +3,13 @@ "version": "1.0.0", "license": "CC-BY-SA-4.0", "description": "You must update this package", - "scripts": { - "test": "jest --config=../jest.config.js quote-generator" + "devDependencies": { + "@testing-library/user-event": "13.5.0" }, + "scripts": { + "test": "jest" +}, + "repository": { "type": "git", "url": "git+https://github.com/CodeYourFuture/CYF-Coursework-Template.git" diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 0f1486639..787fae81e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -18,7 +18,9 @@ // You don't need to change this function function pickFromArray(choices) { // You already have pickFromArray() and quotes[] above this comment - + return choices[Math.floor(Math.random() * choices.length)] +}; +window.addEventListener("load", () => { const quoteEl = document.getElementById("quote"); const authorEl = document.getElementById("author"); const button = document.getElementById("new-quote"); @@ -43,7 +45,7 @@ displayRandomQuote(); button.addEventListener("click", displayRandomQuote); // return choices[Math.floor(Math.random() * choices.length)]; -} +}); // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! diff --git a/Sprint-3/quote-generator/quotes.test.js b/Sprint-3/quote-generator/quotes.test.js index f7b128bf7..053081635 100644 --- a/Sprint-3/quote-generator/quotes.test.js +++ b/Sprint-3/quote-generator/quotes.test.js @@ -5,6 +5,8 @@ There are some Tests in this file that will help you work out if your code is wo const path = require("path"); const { JSDOM } = require("jsdom"); +require("@testing-library/jest-dom"); + let page = null; beforeEach(async () => { diff --git a/package.json b/package.json new file mode 100644 index 000000000..f145f3c9b --- /dev/null +++ b/package.json @@ -0,0 +1,8 @@ +{ + "devDependencies": { + "@testing-library/jest-dom": "^6.9.1", + "@testing-library/user-event": "^13.5.0", + "jest": "^30.2.0", + "jsdom": "^19.0.0" + } +} From 8fc17ce32dcdb49b3c8e4117dbef23c2d0140879 Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Thu, 11 Dec 2025 21:15:04 +0000 Subject: [PATCH 5/8] added a space --- Sprint-3/quote-generator/quotes.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/quotes.test.js b/Sprint-3/quote-generator/quotes.test.js index 053081635..be8c7ea41 100644 --- a/Sprint-3/quote-generator/quotes.test.js +++ b/Sprint-3/quote-generator/quotes.test.js @@ -36,7 +36,7 @@ beforeEach(async () => { }); }); -afterEach(() => { +afterEach(() => { page = null; jest.restoreAllMocks(); }); From dfc616dbb2b759e6f0bce8a96a300366ade230cd Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Thu, 11 Dec 2025 21:24:22 +0000 Subject: [PATCH 6/8] modified style css --- Sprint-3/quote-generator/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 5b695e621..84f50aab6 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,7 +4,7 @@ Quote generator app - + From 212fe4082d337a3d5c7a3bcc97f5a9346f2ce6cc Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Thu, 11 Dec 2025 21:50:31 +0000 Subject: [PATCH 7/8] added a switch on and off button --- Sprint-3/quote-generator/index.html | 10 ++- Sprint-3/quote-generator/quotes.js | 21 +++++++ Sprint-3/quote-generator/style.css | 94 +++++++++++++++++++++++++---- 3 files changed, 110 insertions(+), 15 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 84f50aab6..3ced3f891 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,13 +4,19 @@ Quote generator app - + -

hello there

+

Hello there

+ +

auto-play:OFF

+ diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 787fae81e..94cfff6a1 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -43,6 +43,27 @@ displayRandomQuote(); // Button shows a new quote button.addEventListener("click", displayRandomQuote); +let autoPlayInterval = null; + +const toggle = document.getElementById("auto-play-toggle"); +const statusText = document.getElementById("auto-status"); + +toggle.addEventListener("change", () => { + if (toggle.checked) { + statusText.textContent = "auto-play:ON"; + + // Change every 5 seconds (easy for testing) + autoPlayInterval = setInterval(() => { + pickQuoteAndAuthor(); + }, 5000); + + pickQuoteAndAuthor(); // Change immediately + } else { + statusText.textContent = "auto-play:OFF"; + clearInterval(autoPlayInterval); + } +}); + // return choices[Math.floor(Math.random() * choices.length)]; }); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 617a8dd77..eea99dd6b 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,41 +1,109 @@ /** Write your CSS in here **/ - body { font-family: Arial, sans-serif; - background-color: #f4f4f4; + background: linear-gradient(135deg, #f089cc, #d6eaff); margin: 0; - padding: 20px; + padding: 40px; text-align: center; } +/* Page title */ h1 { - color: #333; + color: black ; + font-size: 2rem; + margin-bottom: 20px; } +/* Quote styling */ #quote { - font-size: 1.4rem; + font-size: 1.5rem; font-weight: bold; - margin-top: 20px; + color: black ; + margin: 20px auto 10px; + max-width: 600px; + line-height: 1.5; } +/* Author name */ #author { - font-size: 1.1rem; + font-size: 1.2rem; color: #555; - margin-bottom: 20px; + margin-bottom: 30px; } +/* Button styling */ #new-quote { - padding: 10px 20px; + padding: 12px 30px; font-size: 1rem; - border: none; - background-color: #4a90e2; + background-color: #007bff; color: white; - border-radius: 6px; + border: none; + border-radius: 8px; cursor: pointer; + transition: 0.25s ease; } +/* Hover effect */ #new-quote:hover { - background-color: #357ac9; + background-color: #005ec2; + transform: scale(1.05); +} + + +/* Toggle switch container */ +.switch { + position: relative; + display: inline-block; + width: 50px; + height: 26px; + margin-top: 20px; +} + +/* Hide default checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; } +/* Slider background */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + border-radius: 26px; + transition: 0.4s; +} + +/* Slider circle */ +.slider:before { + position: absolute; + content: ""; + height: 20px; + width: 20px; + left: 3px; + bottom: 3px; + background-color: white; + border-radius: 50%; + transition: 0.4s; +} + +/* ON state */ +input:checked + .slider { + background-color: #4a90e2; +} + +input:checked + .slider:before { + transform: translateX(24px); +} + +#auto-status { + margin-top: 10px; + color: #333; + font-weight: bold; +} From 13c8ab0a9f8d47fec2455e129405e0a872d80830 Mon Sep 17 00:00:00 2001 From: Fithi Teklom Date: Sat, 13 Dec 2025 11:45:33 +0000 Subject: [PATCH 8/8] auto play is working --- Sprint-3/quote-generator/index.html | 8 ++++---- Sprint-3/quote-generator/quotes.js | 6 ++++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 3ced3f891..745f7f3b6 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -12,10 +12,10 @@

Hello there

-

auto-play:OFF

+ + + +

auto-play:OFF

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 94cfff6a1..29a2a288e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -54,10 +54,12 @@ toggle.addEventListener("change", () => { // Change every 5 seconds (easy for testing) autoPlayInterval = setInterval(() => { - pickQuoteAndAuthor(); + displayRandomQuote() }, 5000); - pickQuoteAndAuthor(); // Change immediately + // pickQuoteAndAuthor(); + + displayRandomQuote() // Change immediately } else { statusText.textContent = "auto-play:OFF"; clearInterval(autoPlayInterval);