From 93e950c2024a5b3c27279337e93c7d81069fbb55 Mon Sep 17 00:00:00 2001 From: Ebrahim_Moqbel Date: Fri, 21 Aug 2026 15:14:11 +0100 Subject: [PATCH 1/4] added the title name --- Sprint-3/quote-generator/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..befe8788e 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,9 +1,9 @@ - + - Title here + Quote generator app From e6fefea716b7c2c29c084d6fd7f9bdabaaba1cca Mon Sep 17 00:00:00 2001 From: Ebrahim_Moqbel Date: Fri, 21 Aug 2026 15:14:47 +0100 Subject: [PATCH 2/4] implemented the function that display quotes --- Sprint-3/quote-generator/quotes.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..77a94cf8d 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,20 @@ +// Goal: page shows a random quote from the quotes array with displaying the author +// requirements: +// when clicking a button on the screen it changes the quote +const author = document.getElementById("author"); +const quote = document.getElementById("quote"); +const newQuoteButton = document.getElementById("new-quote"); + +newQuoteButton.addEventListener("click", () => { + displayQuote(); +}); + +function displayQuote() { + const randomQuote = pickFromArray(quotes); + quote.textContent = randomQuote.quote; + author.textContent = randomQuote.author; +} + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at From d32519b0eef44ecbde8f77a1fb0104259eb21c19 Mon Sep 17 00:00:00 2001 From: Ebrahim_Moqbel Date: Fri, 21 Aug 2026 15:16:52 +0100 Subject: [PATCH 3/4] added some style to the body and linked it to the index.html --- Sprint-3/quote-generator/index.html | 1 + Sprint-3/quote-generator/style.css | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index befe8788e..88f5e21e1 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,6 +4,7 @@ Quote generator app + diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..0f3194f8c 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,9 @@ /** Write your CSS in here **/ +body{ + font-family: Arial,sans-serif; + min-height: 100vh; + margin:0; + display: flex; + padding: 0 1rem; + background-color: #dd7a7a +} From 192bcce082918d952762fb02422fe49e4b89e79b Mon Sep 17 00:00:00 2001 From: Ebrahim_Moqbel Date: Fri, 21 Aug 2026 17:00:31 +0100 Subject: [PATCH 4/4] made some css style and made the page to display a quote when opening the page or refreshing it. --- Sprint-3/quote-generator/quotes.js | 2 +- Sprint-3/quote-generator/style.css | 38 +++++++++++++++++++++++++++++- 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 77a94cf8d..ad4a45a78 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -14,7 +14,7 @@ function displayQuote() { quote.textContent = randomQuote.quote; author.textContent = randomQuote.author; } - +window.onload = displayQuote; // 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 0f3194f8c..25619d382 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -5,5 +5,41 @@ body{ margin:0; display: flex; padding: 0 1rem; - background-color: #dd7a7a + background-color: #e2c8c8 } + +* { + box-sizing: border-box; +} +main.quote-box { + max-width : 600px; + padding :2rem; + text-align : center; +} + +#quote { + font-size : 1.5rem; + font-style : italic; + line-height: 1.4; + margin-bottom : 1rem; +} +#author { + font-size: 1rem; + font-weight: 600; + color: #272ad3; + margin-bottom : 2rem; +} +#new-quote { + padding: 0.6rem 1.4rem; + font-size: 1rem; + border: none; + border-radius: 6px; + background-color: #2b2b2b; + color: #fff; + cursor: pointer; + transition: background-color 0.15s ease; +} + +#new-quote:hover { + background-color: #444; +} \ No newline at end of file