From dab1b08e2bc17e61a00f3620c5b14204911bd4bb Mon Sep 17 00:00:00 2001 From: vmoratti Date: Tue, 4 Aug 2026 19:04:09 +0100 Subject: [PATCH 1/2] write function for quote generator --- Sprint-3/quote-generator/index.html | 8 ++++---- Sprint-3/quote-generator/quotes.js | 16 ++++++++++++++++ 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..e7dae539a 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,13 @@ - Title here + Quote generator app -

hello there

-

-

+

Quote Generator

+

Quote:

+

Author:

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..65ab13386 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,19 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +console.log(pickFromArray(quotes)); + +// 1. get a button variable. +// 2. listen to the event. +// 3, when event happens produce a quote in one place

+//4. when an event happens produce author of that quote in the other

+const button = document.querySelector("#new-quote"); +function newQuoteEveryTime() { + const quote = pickFromArray(quotes); + const quotePlace = document.querySelector("#quote"); + const authorPlace = document.querySelector("#author"); + quotePlace.innerText = `The quote of the day is: ${quote.quote}`; + authorPlace.innerText = `By the author - ${quote.author}`; +} + +button.addEventListener("mousedown", newQuoteEveryTime); From 9927f3f205c69c3372571d389cbed03c695f27fa Mon Sep 17 00:00:00 2001 From: vmoratti Date: Tue, 4 Aug 2026 22:08:10 +0100 Subject: [PATCH 2/2] tune the quote generator --- Sprint-3/quote-generator/index.html | 20 ++++++++++--- Sprint-3/quote-generator/quotes.js | 13 ++++++--- Sprint-3/quote-generator/style.css | 45 +++++++++++++++++++++++++++++ 3 files changed, 70 insertions(+), 8 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index e7dae539a..834cd0b2e 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -5,11 +5,23 @@ Quote generator app + -

Quote Generator

-

Quote:

-

Author:

- +
+

Quote Generator

+
+
+
+

+

+
+
+
+
+ +
+ + diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 65ab13386..661b13909 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,19 +491,24 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote -console.log(pickFromArray(quotes)); // 1. get a button variable. // 2. listen to the event. // 3, when event happens produce a quote in one place

//4. when an event happens produce author of that quote in the other

const button = document.querySelector("#new-quote"); +const initialQuote = pickFromArray(quotes); +const placeInitialQuote = document.querySelector("#quote"); +const placeInitialAuthor = document.querySelector("#author"); +placeInitialQuote.innerText = `${initialQuote.quote}`; +placeInitialAuthor.innerText = `${initialQuote.author}`; + function newQuoteEveryTime() { const quote = pickFromArray(quotes); const quotePlace = document.querySelector("#quote"); const authorPlace = document.querySelector("#author"); - quotePlace.innerText = `The quote of the day is: ${quote.quote}`; - authorPlace.innerText = `By the author - ${quote.author}`; + quotePlace.innerText = `${quote.quote}`; + authorPlace.innerText = `${quote.author}`; } -button.addEventListener("mousedown", newQuoteEveryTime); +button.addEventListener("click", newQuoteEveryTime); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..d7a3f66aa 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,46 @@ +h1 { + font-size: 24px; + text-align: center; + color: rgb(225, 71, 36); +} + +body { + font-family: Arial, sans-serif; + background: rgb(24, 25, 24); + + display: flex; + flex-direction: column; + align-items: center; + + min-height: 100vh; +} +#quote { + max-width: 700px; + min-height: 160px; + + text-align: center; + font-size: 24px; + color: rgb(225, 71, 36); +} + +#author { + width: 700px; + text-align: right; + font-style: italic; + color: rgb(225, 71, 36); +} + +#new-quote { + padding: 12px 30px; + font-size: 18px; + color: white; + background-color: rgb(225, 71, 36); + + cursor: pointer; +} + + + + + /** Write your CSS in here **/