From d26b16dfc43037aa6d7f752a5df03ad91b6455c0 Mon Sep 17 00:00:00 2001 From: d-odumosu Date: Sat, 1 Aug 2026 15:53:39 +0100 Subject: [PATCH] completed the quote generator app using DOM. --- Sprint-3/quote-generator/index.html | 18 ++++-- Sprint-3/quote-generator/quote_generator.js | 13 +++++ Sprint-3/quote-generator/style.css | 63 +++++++++++++++++++++ 3 files changed, 90 insertions(+), 4 deletions(-) create mode 100644 Sprint-3/quote-generator/quote_generator.js diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..0f4228274 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,23 @@ - Title here + Quote generator app + + + + + + + -

hello there

-

-

+
+
+

+

+
+
diff --git a/Sprint-3/quote-generator/quote_generator.js b/Sprint-3/quote-generator/quote_generator.js new file mode 100644 index 000000000..4fd596664 --- /dev/null +++ b/Sprint-3/quote-generator/quote_generator.js @@ -0,0 +1,13 @@ +const quote = document.getElementById("quote"); +const author = document.getElementById("author"); +const button = document.getElementById("new-quote"); + +function displayQuote() { + const quoteAndAuthor = pickFromArray(quotes); + quote.textContent = quoteAndAuthor.quote; + author.textContent = quoteAndAuthor.author; +} + +displayQuote(); + +button.addEventListener("click", displayQuote); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..21be467f1 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,64 @@ /** Write your CSS in here **/ +* { + margin-top: 20px; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Chewy", system-ui; + background-color: #ffc8dd; + font-weight: 400; + font-style: normal; + display: flex; + justify-content: center; + align-items: center; +} + +div { + background-color: #ffafcc; + width: 700px; + max-width: 90%; + padding: 3rem; + border-radius: 8px; +} + +blockquote { + margin-bottom: 2rem; +} + +#quote { + font-size: 2rem; + color: black; + line-height: 1.5; + margin-bottom: 1.5rem; +} + +#author { + text-align: right; + font-size: 1.2rem; + color: #e63946; +} + +button { + display: block; + margin-left: auto; + background-color: #ef476f; + color: white; + border: none; + padding: 0.8rem 1.5rem; + font-size: 1rem; + cursor: pointer; + border-radius: 4px; +} + +button:hover { + background-color: #d00000; +} +#quote::before { + content: "❝ "; + font-size: 2.5rem; +} +#quote::after { + content: " ❞"; +} \ No newline at end of file