diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..f9c5ed53a 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

+
+

+
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..b1c0f4632 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,22 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +const quoteEl = document.querySelector("#quote"); +const authorEl = document.querySelector("#author"); +const button = document.querySelector("#new-quote"); + +function displayQuote() { + const randomQuote = pickFromArray(quotes); + + quoteEl.textContent = randomQuote.quote; + authorEl.textContent = randomQuote.author; +} + +// Show initial quote on page load +function setup() { + displayQuote(); + + // Change quote when button is clicked + button.addEventListener("click", displayQuote); +} +window.addEventListener("load", setup) \ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..1f6b650f6 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,24 @@ /** Write your CSS in here **/ +*{ + box-sizing: border-box; +} +body{ + background-color: orange; +} +.quote{ + background-color: white; + text-align: center; + padding: 50px; + margin: 50px; + color: orange; + font-size: larger; + +} +button{ + position: absolute; + right: 120px; + background-color: orange; + color: white; + border: orange; + padding: 8px; +}