From d5602e46a41d65ae48d6648976f3ab77ba4a43b6 Mon Sep 17 00:00:00 2001 From: Darkidd77 Date: Thu, 2 Apr 2026 19:31:27 +0100 Subject: [PATCH 1/4] Update HTML title to reflect application purpose --- 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..befe8788e 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,9 +1,9 @@ - + - Title here + Quote generator app From ecba3c63de8d465b07788867c15726069e694b82 Mon Sep 17 00:00:00 2001 From: Darkidd77 Date: Thu, 2 Apr 2026 20:35:15 +0100 Subject: [PATCH 2/4] Add DOM element references for quote display functionality --- Sprint-3/quote-generator/quotes.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..2abb44b12 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,8 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +// getting the input and button elements from the page +const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); +const buttonElement = document.getElementById("new-quote"); From 149b2c4eb9f93a9a36ee401f55aeef99188bd632 Mon Sep 17 00:00:00 2001 From: Darkidd77 Date: Thu, 2 Apr 2026 20:38:12 +0100 Subject: [PATCH 3/4] Add functionality to display and update random quotes on button click --- Sprint-3/quote-generator/quotes.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 2abb44b12..cdc20d194 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -496,3 +496,19 @@ const quotes = [ const quoteElement = document.getElementById("quote"); const authorElement = document.getElementById("author"); const buttonElement = document.getElementById("new-quote"); + +function displayRandomQuote() { + // get a random quote from the quotes array + const randomQuote = pickFromArray(quotes); + + // update the quote and author elements + quoteElement.textContent = randomQuote.quote; + authorElement.textContent = randomQuote.author; +} + +displayRandomQuote(); // display a random quote when the page loads + +// display a new random quote when button is clicked +buttonElement.addEventListener("click", () => { + displayRandomQuote(); +}); From 1e263d3d491002361131d2e4dd08eb327b77be4c Mon Sep 17 00:00:00 2001 From: Darkidd77 Date: Thu, 2 Apr 2026 20:54:33 +0100 Subject: [PATCH 4/4] Add CSS styles for body, headings, quote, author, and button elements --- Sprint-3/quote-generator/index.html | 1 + Sprint-3/quote-generator/style.css | 41 +++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index befe8788e..0d6e70a49 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,6 +3,7 @@ + Quote generator app diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..6150d29a1 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,42 @@ /** Write your CSS in here **/ + +body { + font-family: Arial, sans-serif; + background-color: #d8b4db; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +h1 { + color: #934a87; +} +#quote { + font-size: 1.5em; + background-color: #d12fe0; + color: #f6f9f5; + margin: 20px; + text-align: center; + max-width: 600px; + padding: 20px; + border-radius: 10px; +} + +#author { + font-size: 1.2em; + color: #934a87; + margin-bottom: 20px; +} + +button { + padding: 10px 20px; + font-size: 1em; + background-color: #d12fe0; + color: #f6f9f5; + border: none; + cursor: pointer; + border-radius: 50px; +}