From bfa2f25c040cf974a28ebde9d691f002f6cf0246 Mon Sep 17 00:00:00 2001 From: Alina Sofragiu Date: Sun, 19 Jul 2026 12:57:13 +0100 Subject: [PATCH] quotes generator --- Sprint-3/quote-generator/index.html | 14 +++++---- Sprint-3/quote-generator/quotes.js | 14 +++++++++ Sprint-3/quote-generator/style.css | 46 ++++++++++++++++++++++++++++- 3 files changed, 67 insertions(+), 7 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..4f317e9f2 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,17 @@ - + - Title here + Quote Generator App + -

hello there

-

-

- +
+

+

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..282b05056 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,17 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +const quoteElement = document.querySelector("#quote"); +const authorElement = document.querySelector("#author"); +const newQuoteButton = document.querySelector("#new-quote"); + +function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); + + quoteElement.innerText = `"${randomQuote.quote}"`; + authorElement.innerText = randomQuote.author; +} + +displayRandomQuote(); + +newQuoteButton.addEventListener("click", displayRandomQuote); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..aac21b0a3 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,45 @@ -/** Write your CSS in here **/ +body { + background-color: lavender; + height: 100vh; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + font-family: Arial, sans-serif; +} + +#quote-box { + background-color: white; + width: 500px; + max-width: 80%; + padding: 40px; + border-radius: 20px; + text-align: center; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); +} + +#quote { + font-size: 24px; + font-style: italic; + color: #333; + margin-bottom: 20px; +} + +#author { + font-size: 18px; + color: #777; + margin-bottom: 30px; +} + +button { + background-color: lavender; + border: none; + padding: 12px 25px; + border-radius: 10px; + font-size: 16px; + cursor: pointer; +} + +button:hover { + background-color: #d8b4fe; +}