From 8b4c8fd54ff228fb1bb6519e52dd166879d19299 Mon Sep 17 00:00:00 2001 From: Kris Oldrini Date: Thu, 19 Mar 2026 10:36:50 +0000 Subject: [PATCH 1/4] coursework: create logic to access DOM elements and display random quote and author on load --- Sprint-3/quote-generator/index.html | 4 ++-- Sprint-3/quote-generator/quotes.js | 13 +++++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..25aaf65f3 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,9 +1,9 @@ - + - Title here + Quote Generator App diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..d092bc4f9 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,16 @@ +const quoteP = document.querySelector("#quote"); +const authorP = document.querySelector("#author"); +const newQuoteBtn = document.querySelector("#new-quote"); + +function displayQuote() { + const quote = pickFromArray(quotes); + quoteP.innerText = quote.quote; + authorP.innerText = quote.author; +} + +window.addEventListener("load", () => { + displayQuote(); +}); // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at From e717d5588a156a95e7300c21a8a4242640a6c573 Mon Sep 17 00:00:00 2001 From: Kris Oldrini Date: Thu, 19 Mar 2026 10:38:10 +0000 Subject: [PATCH 2/4] coursework: add event listener to change quote when pressing button --- Sprint-3/quote-generator/quotes.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index d092bc4f9..e07116de6 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -10,6 +10,7 @@ function displayQuote() { window.addEventListener("load", () => { displayQuote(); + newQuoteBtn.addEventListener("click", displayQuote); }); // DO NOT EDIT BELOW HERE From fe8d727c316f690b943b38c9f5cad388b522b522 Mon Sep 17 00:00:00 2001 From: Kris Oldrini Date: Thu, 19 Mar 2026 15:30:11 +0000 Subject: [PATCH 3/4] style: add html elements such as main and section and start styling them in CSS --- Sprint-3/quote-generator/index.html | 15 ++++++++--- Sprint-3/quote-generator/style.css | 39 ++++++++++++++++++++++++++++- 2 files changed, 49 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 25aaf65f3..3ab13c1f8 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,12 +4,19 @@ Quote Generator App + -

hello there

-

-

- +
+

Quote Generator

+
+ " +

+

+ " +
+ +
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..36d28fb1d 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,38 @@ -/** Write your CSS in here **/ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + height: 100vh; + background: linear-gradient(135deg, #90a3ff 0%, #b893ff 50%, #f2a1ff 100%); + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; + color: #3f2475; + display: flex; + justify-content: center; + padding: 2rem 1.25rem 3rem; +} + +.app { + width: 1100px; + display: flex; + flex-direction: column; + align-items: center; +} + +h1 { + font-size: 3rem; + font-weight: 900; + margin-bottom: 2rem; +} + +.quote-card { + width: 100%; + background: rgba(249, 245, 255, 0.6); + border-radius: 1rem; + padding: 5rem; + /* position: relative; */ + text-align: center; + box-shadow: 0 14px 32px rgba(80, 40, 140, 0.14); +} From b7f36373693eba948c969a0f3c1fa85684d3dd10 Mon Sep 17 00:00:00 2001 From: XiaoQuark Date: Tue, 7 Apr 2026 19:36:29 +0100 Subject: [PATCH 4/4] coursework: complete CSS styling for button and quote text --- Sprint-3/quote-generator/index.html | 4 +- Sprint-3/quote-generator/style.css | 66 ++++++++++++++++++++++++++--- 2 files changed, 61 insertions(+), 9 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 3ab13c1f8..dfb693afe 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -8,9 +8,9 @@ -
+

Quote Generator

-
+
"

diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 36d28fb1d..abc92687c 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -2,19 +2,20 @@ box-sizing: border-box; margin: 0; padding: 0; + border: none; } body { height: 100vh; - background: linear-gradient(135deg, #90a3ff 0%, #b893ff 50%, #f2a1ff 100%); + background: var(--main-bg-colour); font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; - color: #3f2475; + color: var(--font-colour); display: flex; justify-content: center; padding: 2rem 1.25rem 3rem; } -.app { +main { width: 1100px; display: flex; flex-direction: column; @@ -25,14 +26,65 @@ h1 { font-size: 3rem; font-weight: 900; margin-bottom: 2rem; + text-align: center; } -.quote-card { - width: 100%; - background: rgba(249, 245, 255, 0.6); +section { + max-width: 800px; + background: var(--card-bg-colour); border-radius: 1rem; + border: solid 2px #e7dcfb; padding: 5rem; - /* position: relative; */ + position: relative; text-align: center; box-shadow: 0 14px 32px rgba(80, 40, 140, 0.14); } + +#quote { + font-size: 1.75rem; + font-weight: 600; + padding-bottom: 25px; + max-width: 60ch; +} + +#author { + font-size: 1.35rem; +} + +.quote-mark { + font-size: 7rem; + position: absolute; + font-family: "Times New Roman", Times, serif; +} + +.quote-mark-open { + left: 3rem; + top: 0.2rem; +} + +.quote-mark-close { + right: 3rem; + bottom: -3rem; +} + +button { + margin: 30px; + padding: 10px 25px; + font-family: inherit; + font-size: 1.15rem; + font-weight: 400; + color: white; + background-color: var(--font-colour); + border-radius: 0.5rem; +} + +:root { + --main-bg-colour: linear-gradient( + 35deg, + #90a3ff 0%, + #b893ff 50%, + #f2a1ff 100% + ); + --card-bg-colour: rgba(245, 246, 255, 0.6); + --font-colour: #3f2475; +}