diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bc..9b17b3f8 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,16 @@ - Title here + Quote generator app + -

hello there

-

-

- +
+

Daily Dose of Inspiration!

+

+

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b7..5cec263e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -15,6 +15,7 @@ // --------------- // pickFromArray(['a','b','c','d']) // maybe returns 'c' +// DO NOT EDIT ABOVE HERE // You don't need to change this function function pickFromArray(choices) { return choices[Math.floor(Math.random() * choices.length)]; @@ -491,3 +492,21 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +// import { quotes } from "./quotes.js"; // we implemented an import statement to import the quotes array and in other to access the quotes array as const quotes can not be resigned. + +// Get the elements from the HTML +const quoteHolder = document.getElementById("quote"); +const authorHolder = document.getElementById("author"); +const newQuoteBtn = document.getElementById("new-quote"); + +function displayQuote() { + const randomQuote = pickFromArray(quotes); // assign the function pickFromArray to a variable randomQuote and pass the quotes array as an argument to the function. + quoteHolder.textContent = randomQuote.quote; // this will display the quote in the quoteHolders element which is

in html. + authorHolder.textContent = randomQuote.author; + // this will display the author in the authorHolders element which is

in html. +} + +displayQuote(); // call the displayQuote function to display the quote and author when the page loads. + +newQuoteBtn.addEventListener("click", displayQuote); // this will add a click event listener to the newQuoteBtn and call the displayQuote function when the button is clicked. diff --git a/Sprint-3/quote-generator/readme.md b/Sprint-3/quote-generator/readme.md index 86829195..da1a34ee 100644 --- a/Sprint-3/quote-generator/readme.md +++ b/Sprint-3/quote-generator/readme.md @@ -38,6 +38,6 @@ For this task you will return to your quote generator and improve it with "auto- ## Hints: -Use https://rot13.com/ to decipher this hint: +Use https://rot13.com/ to decipher this hint:: `Pubbfr bar bs frgGvzrbhg be frgVagreiny.` diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d..29133a19 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,56 @@ /** Write your CSS in here **/ +body { + background-color: #d5cdba; + font-family: Arial, sans-serif; + text-align: center; + color: #1a1a1a; + padding: 50px; +} + +h1 { + font-size: 2.5em; + margin-bottom: 20px; + color: #322128; +} + +p { + font-size: 1.5em; + margin: 20px 0; + font-style: italic; +} + +button { + background-color: #322128; + color: #d5cdba; + font-size: 1.5em; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #1a1a1a; +} + +.loader { + background: #f5ebe0; + padding: 20px; + border-radius: 10px; + margin-top: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + max-width: 500px; + margin: 0 auto; +} +#quote { + font-style: italic; + font-weight: 500; + color: #322128; +} + +#author { + font-style: italic; + margin-top: 18px; + color: #322128; + font-size: 18px; +}