From 9f8f20688a28a0f4147d8ea7be347cb8e432a081 Mon Sep 17 00:00:00 2001 From: dcostaprakash Date: Thu, 26 Mar 2026 18:25:45 +0000 Subject: [PATCH 1/3] GLASGOW | Jan-26-ITP | Prakash Dcosta | Sprint 3 | Quote Generator --- Sprint-3/quote-generator/index.html | 9 +++- Sprint-3/quote-generator/quotes.js | 15 +++++++ Sprint-3/quote-generator/style.css | 68 +++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..d5496f089 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,18 @@ - Title here + Quote generator app + -

hello there

+
+

Your Quote for the day

+

+
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..2f0064761 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -490,4 +490,19 @@ const quotes = [ }, ]; +function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); + + document.getElementById("quote").textContent = randomQuote.quote; + document.getElementById("author").textContent = randomQuote.author; +} + +// A new quote is shown on page load +displayRandomQuote(); + +//Button click +document + .getElementById("new-quote") + .addEventListener("click", displayRandomQuote); + // call pickFromArray with the quotes array to check you get a random quote diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..f751d5b82 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,69 @@ /** Write your CSS in here **/ +body { + margin: 0; + font-family: Georgia, "Times New Roman", serif; + background-color: #f59e0b; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} +/* h1 changes */ +h1 { + color: #050301; + text-align: center; + margin-bottom: 40px; + font-weight: normal; +} + +/* Container card */ +.quote-container { + background-color: #d9d9d9; + width: 70%; + max-width: 800px; + padding: 60px; + box-sizing: border-box; + text-align: left; +} + +/* Quote text */ +#quote { + font-size: 32px; + color: #f59e0b; + line-height: 1.4; + margin-bottom: 30px; + position: relative; +} + +/* Big quote mark */ +#quote::before { + content: "“"; + font-size: 80px; + position: absolute; + left: -40px; + top: -20px; + color: #f59e0b; +} + +/* Author */ +#author { + text-align: right; + font-size: 20px; + color: #130d04; + margin-bottom: 30px; +} + +/* Button */ +#new-quote { + float: right; + background-color: #f59e0b; + color: white; + border: none; + padding: 15px 25px; + font-size: 16px; + cursor: pointer; +} + +#new-quote:hover { + background-color: #d97706; +} \ No newline at end of file From 0e554adb6b4dd532d129456fb3fac734a8b7db1b Mon Sep 17 00:00:00 2001 From: dcostaprakash Date: Sat, 4 Apr 2026 13:47:54 +0100 Subject: [PATCH 2/3] I have made the modifications as per the review. --- Sprint-3/quote-generator/index.html | 9 +++++++-- Sprint-3/quote-generator/style.css | 15 +++++++++++++-- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index d5496f089..d69546df1 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -10,9 +10,14 @@

Your Quote for the day

+
-

-

+ + +
+

+

+
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index f751d5b82..d14a22912 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -20,10 +20,15 @@ h1 { .quote-container { background-color: #d9d9d9; width: 70%; - max-width: 800px; + max-width: 1100px; padding: 60px; box-sizing: border-box; text-align: left; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 500px; + } /* Quote text */ @@ -55,15 +60,21 @@ h1 { /* Button */ #new-quote { - float: right; background-color: #f59e0b; color: white; border: none; padding: 15px 25px; font-size: 16px; cursor: pointer; + align-self: flex-end; } #new-quote:hover { background-color: #d97706; +} +/* Making the new area scrollable*/ +.quote-text { + flex-grow: 1; + overflow-y: auto; + min-height: 0; } \ No newline at end of file From 3619a77dab4aca5d6ac56ccfdc107f995e85c2f8 Mon Sep 17 00:00:00 2001 From: dcostaprakash Date: Mon, 6 Apr 2026 00:49:34 +0100 Subject: [PATCH 3/3] Made the changes as per the review --- Sprint-3/quote-generator/index.html | 2 +- Sprint-3/quote-generator/style.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index d69546df1..a858b34a1 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -18,7 +18,7 @@

Your Quote for the day

- + diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index d14a22912..97b751b0a 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -19,8 +19,8 @@ h1 { /* Container card */ .quote-container { background-color: #d9d9d9; - width: 70%; - max-width: 1100px; + width: 1200px; + max-width: none; padding: 60px; box-sizing: border-box; text-align: left;