diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..384952c08 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,15 @@ - Title here + Quote generator app +

hello there

+

Test

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..64f612f69 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,20 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +console.log(pickFromArray(quotes)); + +const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); +const button = document.getElementById("new-quote"); + +function showQuote() { + const randomQuote = pickFromArray(quotes); + + quoteElement.textContent = randomQuote.quote; + authorElement.textContent =randomQuote.author; +} + +button.addEventListener("click", showQuote); + +showQuote(); \ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..abbdebef4 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,34 @@ /** Write your CSS in here **/ +body { + font-family: Arial, sans-serif; + background-color: purple; + text-align: center; + padding: 50px; +} + +.container { + background: blue; + padding: 20px; + border-radius: 10px; + display: inline-block; +} + +#quote { + font-size: 1.5em; + margin-bottom: 10px; +} + +#author { + font-style: italic; + margin-bottom: 20px; +} + +button { + padding: 10px 20px; + font-size: 1em; + cursor: pointer; +} + +.autoplay { + margin-top: 20px; +} \ No newline at end of file