From fff2726cb763fc76f53528c65c4143b45b1b60f6 Mon Sep 17 00:00:00 2001 From: Mansoor Munawar Date: Wed, 13 Aug 2025 13:28:16 +0100 Subject: [PATCH 1/4] Implement quote display functionality and update HTML structure --- Sprint-3/quote-generator/index.html | 3 ++- Sprint-3/quote-generator/quotes.js | 11 +++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..1e6062e70 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,11 +3,12 @@ + Title here + -

hello there

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..4dbdddd24 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,14 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +let quote = document.getElementById("quote"); +let author = document.getElementById("author"); +let quoteButton = document.getElementById("new-quote"); + +function displayQuote() { + let randomQuote = pickFromArray(quotes); + quote.textContent = randomQuote.quote; + author.textContent = randomQuote.author; +} +displayQuote(); +quoteButton.addEventListener("click", displayQuote); From a655e9afb82ae33909571b32d4834294af9d4156 Mon Sep 17 00:00:00 2001 From: Mansoor Munawar Date: Thu, 14 Aug 2025 01:33:43 +0100 Subject: [PATCH 2/4] Refactor HTML structure and enhance quote display formatting --- Sprint-3/quote-generator/index.html | 8 +++++--- Sprint-3/quote-generator/quotes.js | 4 ++-- Sprint-3/quote-generator/style.css | 29 +++++++++++++++++++++++++++++ 3 files changed, 36 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 1e6062e70..5de035e6c 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -9,8 +9,10 @@ -

-

- +
+

+

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4dbdddd24..2f756d627 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -497,8 +497,8 @@ let quoteButton = document.getElementById("new-quote"); function displayQuote() { let randomQuote = pickFromArray(quotes); - quote.textContent = randomQuote.quote; - author.textContent = randomQuote.author; + quote.textContent = `"${randomQuote.quote}"`; + author.textContent = `-${randomQuote.author}`; } displayQuote(); quoteButton.addEventListener("click", displayQuote); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..ca3a0837f 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,30 @@ /** Write your CSS in here **/ +body { + background-color: antiquewhite; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + font-family: Arial, Helvetica, sans-serif; +} + +div { + background-color: azure; + width: 500px; + padding: 60px; + border-radius: 10px; + box-shadow: 5px 5px 10px black; +} + +#quote { + font-size: 24px; +} + +#author { + font-size: 18px; +} + +#new-quote { + padding: 16px 10px; + border-radius: 10px; +} From 9d4ea1c6076728d04978d176ffae21a32a8798a4 Mon Sep 17 00:00:00 2001 From: Mansoor Munawar Date: Fri, 15 Aug 2025 21:06:48 +0100 Subject: [PATCH 3/4] Update title in HTML and added hover effect for the new quote button --- Sprint-3/quote-generator/index.html | 2 +- Sprint-3/quote-generator/style.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 5de035e6c..8a36780b4 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,7 +4,7 @@ - Title here + Quote Generator diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index ca3a0837f..013efc744 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -28,3 +28,7 @@ div { padding: 16px 10px; border-radius: 10px; } + +#new-quote:hover { + color: red; +} From 9c2ce0f546c768fc49d4862c8bdcbf1459b21dae Mon Sep 17 00:00:00 2001 From: Mansoor Munawar Date: Fri, 15 Aug 2025 21:07:40 +0100 Subject: [PATCH 4/4] Add cursor pointer style to new quote button --- Sprint-3/quote-generator/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 013efc744..7da700658 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -27,6 +27,7 @@ div { #new-quote { padding: 16px 10px; border-radius: 10px; + cursor: pointer; } #new-quote:hover {