diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..745f7f3b6 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,20 @@ - Title here + Quote generator app + -

hello there

+

Hello there

+ +

auto-play:OFF

+ 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/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 4a4d04b72..29a2a288e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -17,9 +17,59 @@ // 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 + 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"); + +// 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); +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(() => { + displayRandomQuote() + }, 5000); + + // pickQuoteAndAuthor(); + + displayRandomQuote() // Change immediately + } else { + statusText.textContent = "auto-play:OFF"; + clearInterval(autoPlayInterval); + } +}); + + + // 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! const quotes = [ diff --git a/Sprint-3/quote-generator/quotes.test.js b/Sprint-3/quote-generator/quotes.test.js index f7b128bf7..be8c7ea41 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 () => { @@ -34,7 +36,7 @@ beforeEach(async () => { }); }); -afterEach(() => { +afterEach(() => { page = null; jest.restoreAllMocks(); }); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..eea99dd6b 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,109 @@ /** Write your CSS in here **/ + +body { + font-family: Arial, sans-serif; + background: linear-gradient(135deg, #f089cc, #d6eaff); + margin: 0; + padding: 40px; + text-align: center; +} + +/* Page title */ +h1 { + color: black ; + font-size: 2rem; + margin-bottom: 20px; +} + +/* Quote styling */ +#quote { + font-size: 1.5rem; + font-weight: bold; + color: black ; + margin: 20px auto 10px; + max-width: 600px; + line-height: 1.5; +} + +/* Author name */ +#author { + font-size: 1.2rem; + color: #555; + margin-bottom: 30px; +} + +/* Button styling */ +#new-quote { + padding: 12px 30px; + font-size: 1rem; + background-color: #007bff; + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + transition: 0.25s ease; +} + +/* Hover effect */ +#new-quote:hover { + 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; +} 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" + } +}