diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..5deadd54c 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,14 @@ - 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..708be4afe 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,14 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +function displayQuote() { + const picked = pickFromArray(quotes); + document.getElementById("quote").innerText = picked.quote; + document.getElementById("author").innerText = picked.author; +} + +document.addEventListener("DOMContentLoaded", () => { + displayQuote(); + document.getElementById("new-quote").addEventListener("click", displayQuote); +}); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..1494b4134 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,29 @@ -/** Write your CSS in here **/ +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 60vh; + margin: 0; + font-family: 'Courier New', Courier, monospace; +} + + +h1, p, button, blockquote, cite { + margin: 30px; + text-align: center; +} + +cite { + display: block; + font-style: italic; + color: #555; +} + +#new-quote { + display: block; + margin: 20px auto; + padding: 10px 20px; + cursor: pointer; + margin-top: 20px; +}