From 75a11155c8101e424ae2fff1174cb3bfd70735db Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Wed, 12 Aug 2026 21:44:22 +0100 Subject: [PATCH 01/10] change title to Quote generator app --- Sprint-3/quote-generator/index.html | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcfb..3c26601a61 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,18 @@ - - - - Title here - - - -

hello there

-

-

- - - + + + + + Quote generator app + + + + +

hello there

+

+

+ + + + \ No newline at end of file From 5da7c38823cd40f681d6f3892ff8bd00341ea9f8 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Wed, 12 Aug 2026 22:17:05 +0100 Subject: [PATCH 02/10] grab html elements --- Sprint-3/quote-generator/quotes.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b722..57c72d7745 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -19,6 +19,9 @@ function pickFromArray(choices) { return choices[Math.floor(Math.random() * choices.length)]; } +const quote = document.getElementById("quote"); +const author = document.getElementById("author"); +const quoteButton = document.getElementById("new-quote"); // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! From f0333ea07510f9f8056d6e14ba684056c3fdd2e6 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Wed, 12 Aug 2026 22:22:52 +0100 Subject: [PATCH 03/10] update naming --- Sprint-3/quote-generator/quotes.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 57c72d7745..a61ed0c3f4 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -19,9 +19,9 @@ function pickFromArray(choices) { return choices[Math.floor(Math.random() * choices.length)]; } -const quote = document.getElementById("quote"); -const author = document.getElementById("author"); -const quoteButton = document.getElementById("new-quote"); +const quotePar = document.getElementById("quote"); +const authorPar = document.getElementById("author"); +const newQuoteBtn = document.getElementById("new-quote"); // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! From 0fa399fc3cbac75886c33612a1dcdc7252fac7f6 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Wed, 12 Aug 2026 22:25:25 +0100 Subject: [PATCH 04/10] implement displayQuote() --- Sprint-3/quote-generator/quotes.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index a61ed0c3f4..ecba8a646d 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -23,6 +23,11 @@ const quotePar = document.getElementById("quote"); const authorPar = document.getElementById("author"); const newQuoteBtn = document.getElementById("new-quote"); +function displayQuote(quoteObj) { + quotePar.textContent = quoteObj.quote; + authorPar.textContent = quoteObj.author; +} + // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! const quotes = [ From c3c288745ae3cf0d7c35a8b80f2b0ffb84f1db25 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Wed, 12 Aug 2026 22:40:59 +0100 Subject: [PATCH 05/10] move function call below quotes --- Sprint-3/quote-generator/quotes.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index ecba8a646d..b588ddbb4e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -499,3 +499,5 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +console.log(pickFromArray(quotes)); //object gets logged into the console initially +displayQuote(pickFromArray(quotes)); From 6b7b0b6f4ffc49678b80a13ff73d0343cbbc898c Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Wed, 12 Aug 2026 22:55:10 +0100 Subject: [PATCH 06/10] add eventlistener --- Sprint-3/quote-generator/quotes.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index b588ddbb4e..62f3bd9fb6 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -28,6 +28,10 @@ function displayQuote(quoteObj) { authorPar.textContent = quoteObj.author; } +newQuoteBtn.addEventListener("click", function () { + displayQuote(pickFromArray(quotes)); +}); + // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! const quotes = [ From f597cffde603d0f43fe634c08742eee3b01982da Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Wed, 12 Aug 2026 22:57:46 +0100 Subject: [PATCH 07/10] add basic css --- Sprint-3/quote-generator/style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2f..63f62f3145 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,5 @@ -/** Write your CSS in here **/ +body { + background-color: teal; + color: white; + font-size: 1.5rem; +} \ No newline at end of file From a8b38f015e5735bccd38fd99e00194b04bd52b6e Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Wed, 12 Aug 2026 23:00:11 +0100 Subject: [PATCH 08/10] link css to html --- Sprint-3/quote-generator/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 3c26601a61..cd07a3cbe2 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -5,6 +5,7 @@ Quote generator app + From 948a58a7b62194a54ec2235affc39bf209b1cc09 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Wed, 12 Aug 2026 23:16:24 +0100 Subject: [PATCH 09/10] add blockquote box for styling --- Sprint-3/quote-generator/index.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index cd07a3cbe2..0c4b6e1eac 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -10,10 +10,11 @@ -

hello there

-

-

- +
+

+

+ +
\ No newline at end of file From 0bbf207b61812a5edb468f73b16e026d82fce777 Mon Sep 17 00:00:00 2001 From: Edina Kurdi Date: Wed, 12 Aug 2026 23:16:52 +0100 Subject: [PATCH 10/10] style teal --- Sprint-3/quote-generator/style.css | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63f62f3145..dbb3c874a7 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,5 +1,27 @@ body { + background-color: rgb(11, 170, 170); + color: white; + font-size: 2rem; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#quote-box { background-color: teal; + border: 3px solid white; + padding: 40px; + border-radius: 10px; + +} + +#new-quote { + display: block; + background-color: rgb(11, 170, 170); color: white; - font-size: 1.5rem; + font-size: 1.25rem; + padding: 10px 24px; + border-radius: 10px; } \ No newline at end of file