From 17893af4e39f926e84fa842f4cc23f2deee29892 Mon Sep 17 00:00:00 2001 From: KK Tech Date: Thu, 2 Apr 2026 20:21:19 +0100 Subject: [PATCH 1/2] I have made some few improvments --- Sprint-3/quote-generator/index.html | 9 ++++++- Sprint-3/quote-generator/style.css | 37 +++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..7fc1f68c7 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,20 @@ - Title here + Quote generator app +

hello there

+ + + + + + diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..c429baa2a 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,38 @@ /** Write your CSS in here **/ +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + padding: 20px; +} + + #quote-container { + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + max-width: 600px; + margin: auto; +} +#quote { + font-size: 24px; + font-style: italic; + margin-bottom: 10px; +} +#author { + font-size: 20px; + text-align: right; + margin-bottom: 20px; +} +button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} +#quote-input, #author-input { + padding: 10px; + font-size: 16px; + margin-right: 10px; +} + + + From 4c6f9e9059910218682fefeff51f85d2fd173e73 Mon Sep 17 00:00:00 2001 From: KK Tech Date: Sat, 4 Apr 2026 21:21:19 +0100 Subject: [PATCH 2/2] I have improved my code and got the qoute generator to function --- Sprint-3/quote-generator/index.html | 14 ++++++-------- Sprint-3/quote-generator/quotes.js | 22 ++++++++++++++++++++++ Sprint-3/quote-generator/style.css | 18 ++++++++++++------ 3 files changed, 40 insertions(+), 14 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 7fc1f68c7..20822cbf7 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -8,15 +8,13 @@ -

hello there

-

-

+
+

Quote Generator

- - - +

+

- - + +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..8a0e21b75 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,25 @@ +const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); +const newQuoteButton = document.getElementById("new-quote"); + +function showQuote(quoteObject) { + quoteElement.textContent = quoteObject.quote; + authorElement.textContent = quoteObject.author; +} + +function showRandomQuote() { + const randomQuote = pickFromArray(quotes); + showQuote(randomQuote); +} + +window.addEventListener("load", function () { + showRandomQuote(); + + newQuoteButton.addEventListener("click", function () { + showRandomQuote(); + }); +}); + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index c429baa2a..b43628924 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,7 +1,7 @@ /** Write your CSS in here **/ body { font-family: Arial, sans-serif; - background-color: #f0f0f0; + background-color:burlywood; padding: 20px; } @@ -12,6 +12,7 @@ body { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); max-width: 600px; margin: auto; + text-align: center; } #quote { font-size: 24px; @@ -20,19 +21,24 @@ body { } #author { font-size: 20px; - text-align: right; + text-align: center; margin-bottom: 20px; + color: #555; } button { + background-color: #007BFF; + color: white; padding: 10px 20px; font-size: 16px; cursor: pointer; } -#quote-input, #author-input { - padding: 10px; - font-size: 16px; - margin-right: 10px; + +h1 { + color: #333; + margin-bottom: 20px; } + +