From dbbe06726ce05e28a98340dd7a9b2249dd3c2d09 Mon Sep 17 00:00:00 2001 From: cyf Date: Wed, 12 Aug 2026 22:13:04 +0100 Subject: [PATCH 1/3] Update page title to Quote generator app --- Sprint-3/quote-generator/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..5f6a720f1 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,7 +3,7 @@ - Title here + Quote generator app From 52a468c00e0a0bbf1eaddf9d8f90c19a52e0407b Mon Sep 17 00:00:00 2001 From: cyf Date: Wed, 12 Aug 2026 22:41:58 +0100 Subject: [PATCH 2/3] Display random quote on page load --- Sprint-3/quote-generator/quotes.js | 10 ++++++++++ Sprint-3/quote-generator/style.css | 29 +++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..ec4504db9 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,13 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +function displayQuote() { + const picked = pickFromArray(quotes); + document.getElementById("quote").innerText = picked.quote; + document.getElementById("author").innerText = picked.author; +} + +document.addEventListener("DOMContentLoaded", () => { + displayQuote(); + 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..576b0cd8c 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,30 @@ /** Write your CSS in here **/ +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 60vh; + margin: 0; + font-family: 'Courier New', Courier, monospace; +} + + +h1, p, button, blockquote, cite { + margin: 30px; + text-align: center; +} + +cite { + display: block; + font-style: italic; + color: #555; +} + +#new-quote { + display: block; + margin: 20px auto; + padding: 10px 20px; + cursor: pointer; + margin-top: 20px; +} \ No newline at end of file From 36f560419de6d2c898ef6f81bf9c1fb100ab3286 Mon Sep 17 00:00:00 2001 From: cyf Date: Thu, 13 Aug 2026 00:12:41 +0100 Subject: [PATCH 3/3] Add opening quote styling --- Sprint-3/quote-generator/index.html | 14 +++++-- Sprint-3/quote-generator/style.css | 65 ++++++++++++++++++++++------- 2 files changed, 59 insertions(+), 20 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 5f6a720f1..a7633a8f5 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,12 +4,18 @@ Quote generator app + -

hello there

+
+

-

- - +
+ +

+ + +
+ diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 576b0cd8c..c4b305991 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,30 +1,63 @@ /** Write your CSS in here **/ + body { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 60vh; - margin: 0; - font-family: 'Courier New', Courier, monospace; + margin: 0; + min-height: 100vh; + background-color: orange; + display: flex; + justify-content: center; + align-items: center; + font-family: Arial, sans-serif; +} + +.quote-card { + width: 75%; + min-height: 350px; + background-color: white; + padding: 60px; + box-sizing: border-box; + text-align: center; } +.quote-container { + position: relative; + display: inline-block; + max-width: 900px; +} -h1, p, button, blockquote, cite { - margin: 30px; +#quote { + color: #ff9d00; + font-family: Georgia, "Times New Roman", serif; + font-size: 38px; + line-height: 1.3; text-align: center; + margin: 0; } -cite { - display: block; - font-style: italic; - color: #555; +#quote::before { + content: "\201C"; + color: #ff9d00; + font-size: 70px; + line-height: 0; + vertical-align: -15px; + margin-right: 5px; +} + +#author { + margin: 40px; + font-family: Georgia, serif; + font-size: 24px; + color: orange; + text-align: right; } #new-quote { display: block; - margin: 20px auto; - padding: 10px 20px; + margin: 40px 0 0 auto; + padding: 20px; + border: none; + background-color: orange; + color: white; + font-size: 20px; cursor: pointer; - margin-top: 20px; } \ No newline at end of file