From 45da09ee57f34d349d2b08e0e1f9c364e76cff4a Mon Sep 17 00:00:00 2001 From: Francesco Romano Monda Date: Mon, 3 Aug 2026 17:36:55 +0100 Subject: [PATCH 1/6] Updated the page title in index.html to "Alarm clock app" --- Sprint-3/alarmclock/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..ff2d3b453 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm clock app
From 2a507495037036e6c28a704637a475b430f83a74 Mon Sep 17 00:00:00 2001 From: Francesco Romano Monda Date: Mon, 3 Aug 2026 17:42:20 +0100 Subject: [PATCH 2/6] Revert accidental title update in index.html from main branch --- Sprint-3/alarmclock/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index ff2d3b453..48e2e80d9 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Alarm clock app + Title here
From 2bd8bea911aec68d8ea9aa6790637b6dbc784a46 Mon Sep 17 00:00:00 2001 From: Francesco Romano Monda Date: Mon, 3 Aug 2026 20:16:18 +0100 Subject: [PATCH 3/6] Create quote generator layout and functionality --- Sprint-3/quote-generator/index.html | 7 +++-- Sprint-3/quote-generator/quotes.js | 15 +++++++++ Sprint-3/quote-generator/style.css | 47 ++++++++++++++++++++++++++++- Sprint-3/slideshow/style.css | 1 - 4 files changed, 66 insertions(+), 4 deletions(-) delete mode 100644 Sprint-3/slideshow/style.css diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..3a4df8830 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,8 +3,11 @@ - Title here - + Quote generator app + + + +

hello there

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..cc0a4e565 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,18 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +const quoteElement = document.querySelector("#quote"); +const authorElement = document.querySelector("#author"); +const newQuoteButton = document.querySelector("#new-quote"); + +function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); + + quoteElement.textContent = randomQuote.quote; + authorElement.textContent = randomQuote.author; +} + +displayRandomQuote(); + +newQuoteButton.addEventListener("click", displayRandomQuote); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..2b7791a2c 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,46 @@ -/** Write your CSS in here **/ +body { + background-color: white; + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + + +.outer-container { + background-color: orange; + padding: 30px; + text-align: center; +} + + +.quote-box { + background-color: white; + color: orange; + padding: 40px; + width: 400px; + margin-bottom: 20px; +} + + +#quote { + font-size: 24px; + font-weight: bold; +} + + +#author { + font-size: 18px; + font-style: italic; +} + + +#new-quote { + background-color: orange; + color: white; + border: none; + padding: 15px 30px; + font-size: 18px; + cursor: pointer; +} diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css deleted file mode 100644 index 63cedf2d2..000000000 --- a/Sprint-3/slideshow/style.css +++ /dev/null @@ -1 +0,0 @@ -/** Write your CSS in here **/ From 9501a30051cb828c529ec141c381f93a830e6df6 Mon Sep 17 00:00:00 2001 From: Francesco Romano Monda Date: Tue, 4 Aug 2026 18:37:14 +0100 Subject: [PATCH 4/6] Fix quote generator layout and script execution --- Sprint-3/quote-generator/index.html | 19 ++++++-- Sprint-3/quote-generator/style.css | 72 +++++++++++++++++++++-------- 2 files changed, 68 insertions(+), 23 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 3a4df8830..4f67246e3 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -7,12 +7,21 @@ - + + -

hello there

-

-

- + +
+ +

hello there

+ + +
+

+

+ +
+
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 2b7791a2c..54dd45ecb 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,46 +1,82 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + body { - background-color: white; - font-family: Arial, sans-serif; + background-color: #f3a83c; + font-family: Georgia, "Times New Roman", Times, serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; } - +/* Container for heading + card */ .outer-container { - background-color: orange; - padding: 30px; + width: 90%; + max-width: 650px; text-align: center; } - -.quote-box { - background-color: white; - color: orange; - padding: 40px; - width: 400px; +/* Heading styling */ +h1 { + color: white; + font-family: Arial, sans-serif; margin-bottom: 20px; + font-size: 28px; } +/* The white quote card */ +.quote-box { + background-color: #ffffff; + padding: 45px; + text-align: left; + position: relative; +} +/* Quote text styling with orange quote mark added automatically */ #quote { - font-size: 24px; - font-weight: bold; + color: #f3a83c; + font-size: 22px; + line-height: 1.4; + margin-bottom: 15px; } +#quote::before { + content: "“ "; + font-size: 40px; + font-weight: bold; + line-height: 0; + vertical-align: -8px; +} +/* Author text styling right-aligned */ #author { + color: #f3a83c; font-size: 18px; - font-style: italic; + text-align: right; + margin-bottom: 25px; } +#author::before { + content: "- "; +} +/* Button styled and pushed to bottom right */ #new-quote { - background-color: orange; - color: white; + display: block; + margin-left: auto; + background-color: #f3a83c; + color: #ffffff; border: none; - padding: 15px 30px; - font-size: 18px; + padding: 12px 22px; + font-size: 15px; + font-family: Arial, sans-serif; cursor: pointer; } + +#new-quote:hover { + opacity: 0.9; +} From e7992d38992886d951f3da1e0b7faff2dea3659c Mon Sep 17 00:00:00 2001 From: Francesco Romano Monda Date: Wed, 5 Aug 2026 15:28:30 +0100 Subject: [PATCH 5/6] Restore Sprint-3 slideshow style.css --- Sprint-3/slideshow/style.css | 1 + 1 file changed, 1 insertion(+) create mode 100644 Sprint-3/slideshow/style.css diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css new file mode 100644 index 000000000..63cedf2d2 --- /dev/null +++ b/Sprint-3/slideshow/style.css @@ -0,0 +1 @@ +/** Write your CSS in here **/ From 37febb7a472ba869e67b4f6afdb204d97a46cfcb Mon Sep 17 00:00:00 2001 From: Francesco Romano Monda Date: Mon, 10 Aug 2026 12:13:29 +0100 Subject: [PATCH 6/6] Refactor HTML semantics and improve colour contrast --- Sprint-3/quote-generator/index.html | 19 +++++++------------ Sprint-3/quote-generator/style.css | 8 ++++---- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 4f67246e3..7ca98bdde 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,4 +1,4 @@ - + @@ -11,17 +11,12 @@ - -
- -

hello there

- - -
-

-

+
+
+
+ -
-
+ + diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 54dd45ecb..549fa8f37 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -5,7 +5,7 @@ } body { - background-color: #f3a83c; + background-color: #8a4b00; font-family: Georgia, "Times New Roman", Times, serif; display: flex; justify-content: center; @@ -38,7 +38,7 @@ h1 { /* Quote text styling with orange quote mark added automatically */ #quote { - color: #f3a83c; + color: #8a4b00; font-size: 22px; line-height: 1.4; margin-bottom: 15px; @@ -54,7 +54,7 @@ h1 { /* Author text styling right-aligned */ #author { - color: #f3a83c; + color: #8a4b00; font-size: 18px; text-align: right; margin-bottom: 25px; @@ -68,7 +68,7 @@ h1 { #new-quote { display: block; margin-left: auto; - background-color: #f3a83c; + background-color: #8a4b00; color: #ffffff; border: none; padding: 12px 22px;