diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/quote-generator-app.html similarity index 90% rename from Sprint-3/quote-generator/index.html rename to Sprint-3/quote-generator/quote-generator-app.html index 30b434bc..5f6a720f 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/quote-generator-app.html @@ -3,7 +3,7 @@ - Title here + Quote generator app diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b7..235c0912 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,21 @@ +// Step 1: Get the required elements +const quote = document.querySelector("#quote"); +const author = document.querySelector("#author"); +const newQuoteButton = document.querySelector("#new-quote"); + +// Step 2: Function to display a random quote +function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); + quote.innerText = randomQuote.quote; + author.innerText = randomQuote.author; +} + +// Step 3: Event listeners +document.addEventListener("DOMContentLoaded", displayRandomQuote); +newQuoteButton.addEventListener("click", displayRandomQuote); + + + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -14,7 +32,7 @@ // Examples of use // --------------- // pickFromArray(['a','b','c','d']) // maybe returns 'c' - + // You don't need to change this function function pickFromArray(choices) { return choices[Math.floor(Math.random() * choices.length)];