diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..b03fa784a 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..4d7d52895 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 +//Show a random quotes when the page has fully loaded alongside the author +const quoteElement = document.querySelector("#quote"); +const authorElement = document.querySelector("#author"); +const buttonElement = document.querySelector("#new-quote"); + +document.addEventListener("DOMContentLoaded", generateQuote); + +// 2. Change the quote when the button is clicked +buttonElement.addEventListener("click", generateQuote); + +function generateQuote() { + const randomQuote = pickFromArray(quotes); + + quoteElement.innerText = `❝ ${randomQuote.quote}"`; + authorElement.innerText = `- ${randomQuote.author}`; //I could also use textcontent to access this +} diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..6b14e701d 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,32 @@ /** Write your CSS in here **/ +body { + background-color: rgb(187, 58, 80); +} +#quote { + color: rgb(136, 38, 54); + text-align: center; + font-size: 30px; + font-weight: bold; +} +#author { + color: rgb(66, 11, 21); + text-align: right; + font-weight: bold; + font-size: 20px; +} +button { + background-color: rgb(121, 29, 29); + border: none; + color: white; + padding: 15px 25px; + margin-bottom: 50px; + text-align: center; + text-decoration: none; + font-size: 16px; + float: right; +} +#borders { + padding: 50px; + margin: 100px 40px; + background-color: white; +}