From 1b021998be6203482d473aaebc26bbd01e13d016 Mon Sep 17 00:00:00 2001 From: Dagim-Daniel Date: Tue, 28 Jul 2026 23:20:34 +0100 Subject: [PATCH] quote_generator task under sprint 3 has been done --- Sprint-3/quote-generator/index.html | 14 +++++++---- Sprint-3/quote-generator/quotes.js | 20 +++++++++++++++ Sprint-3/quote-generator/style.css | 38 +++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..6ed93acd0 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,17 @@ - Title here + + Quote generator app -

hello there

-

-

- +
+

hello there

+

+

Quote by

+

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..33ba70151 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -490,4 +490,24 @@ const quotes = [ }, ]; +// getting access from the html +const showquote = document.querySelector("displayArea"); +const areaOfQuote = document.querySelector("h1"); +const shufflebutton = document.querySelector("#new-quote"); +const AreaOfQuoteBy = document.querySelector("h3"); + // call pickFromArray with the quotes array to check you get a random quote + +function quoteGenerator() { + const entireQuote = pickFromArray(quotes); + const quot = entireQuote.quote; + const Author = entireQuote.author; + areaOfQuote.textContent = `" ${quot} "`; + AreaOfQuoteBy.textContent = `- ${Author}`; +} +//console.log(quoteGenerator); +//console.log(quot); +//console.log(Author); +quoteGenerator(); +//event handler +shufflebutton.addEventListener("click", quoteGenerator); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..79423435c 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,39 @@ /** Write your CSS in here **/ +.displayArea { + position: fixed; + border-style: groove; + border-top-left-radius: 0%; + top: 50%; + left: 50%; + width: 75%; + transform: translate(-50%, -50%); + background-color: whitesmoke; +} +body { + background-color: rgb(223, 208, 182); +} +#new-quote { + border-style: outset; + font-size: larger; + color: whitesmoke; + margin-left: 80%; + margin-bottom: 10px; + background-color: rgb(226, 203, 163); + block-size: 50px; +} +#new-quote:hover { + color: black; + border-right-width: 10px; + border-bottom-width: 10px; +} + +h1 { + text-align: center; + margin-right: 20px; + color: rgb(226, 203, 163); +} +h3 { + text-align: right; + margin-right: 20px; + color: rgb(226, 203, 163); +}