From e1b30060cd589aa56b5e7f57a76adb9d4c7d3a6c Mon Sep 17 00:00:00 2001 From: Seti Mussa Date: Mon, 13 Apr 2026 16:09:36 +0100 Subject: [PATCH 1/2] Changed the title and header inside the index html --- Sprint-3/quote-generator/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..83f633e7d 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,11 +3,11 @@ - Title here + Quote Generator app -

hello there

+

Quote Generator app

From f2dd47777ee37e5e14ba62f7969dd1d879298e95 Mon Sep 17 00:00:00 2001 From: Seti Mussa Date: Mon, 13 Apr 2026 17:15:21 +0100 Subject: [PATCH 2/2] Add random quote generator --- Sprint-3/quote-generator/package.json | 7 +++++- Sprint-3/quote-generator/quotes.js | 18 ++++++++++++++ Sprint-3/quote-generator/style.css | 35 +++++++++++++++++++++++++++ 3 files changed, 59 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/package.json b/Sprint-3/quote-generator/package.json index 0f6f98917..ea64c4035 100644 --- a/Sprint-3/quote-generator/package.json +++ b/Sprint-3/quote-generator/package.json @@ -13,5 +13,10 @@ "bugs": { "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues" }, - "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme" + "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", + "devDependencies": { + "@testing-library/jest-dom": "^6.9.1", + "jest": "^30.3.0", + "jest-environment-jsdom": "^30.3.0" + } } diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..5784e945d 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,21 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); + +function displayQuote() { + const randomQuote = pickFromArray(quotes); + + quoteElement.textContent = randomQuote.quote; + authorElement.textContent = randomQuote.author; +} + +// Show a quote when page loads +displayQuote(); + +// Change quote when button is clicked +document + .getElementById("new-quote") + .addEventListener("click", displayQuote); \ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..8d2dac628 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,36 @@ /** Write your CSS in here **/ +body { + font-family: Arial, sans-serif; + text-align: center; + margin-top: 50px; + background-color: #f5f5f5; +} + +h1 { + color: #333; +} + +#quote { + font-size: 24px; + margin: 20px; + font-style: italic; +} + +#author { + font-size: 18px; + color: #666; +} + +button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + border: none; + background-color: #333; + color: white; + border-radius: 5px; +} + +button:hover { + background-color: #555; +} \ No newline at end of file