diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..01f83e188 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,22 @@ - Title here + + + + + Quote Generator App -

hello there

-

-

- +
+

Quote of the day

+

+

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..e1ddb072e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,22 @@ +function displayQuote() { + const firstQuote = pickFromArray(quotes); + const initialQuote = document.querySelector("#quote"); + initialQuote.innerText = firstQuote.quote; + + const author = document.querySelector("#author"); + author.innerText = firstQuote.author; +} + +function generateQuote() { + displayQuote(); + + document.querySelector("#new-quote").addEventListener("click", () => { + displayQuote(); + }); +} + +window.onload = generateQuote; + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at diff --git a/Sprint-3/quote-generator/readme.md b/Sprint-3/quote-generator/readme.md index 868291958..b521dc17d 100644 --- a/Sprint-3/quote-generator/readme.md +++ b/Sprint-3/quote-generator/readme.md @@ -10,8 +10,25 @@ First off, once you've branched off `main`, then update the title element in `in When the page loads it should show a random quote from the `quotes` array on the screen. It should also show who said the quote. +- onload get random quote from array + - get the length of the array + - generate random number between 0 and last index of array + - use number to fetch quote from array and store in variable randomQuote +- display quote + - display quote stored in randomQuote +- display author associated with quote + When you click a button on the screen it should change the quote on the screen. +- when button clicked + - get random quote from array + - get the length of the array + - generate random number between 0 and last index of array + - use number to fetch quote from array and store in variable randomQuote +- display quote + - display quote stored in randomQuote +- display author associated with quote + It can look however you like but there is an example in this folder at `quote_generator_example.png` ## Need Help? diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..4f35347c8 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,54 @@ /** Write your CSS in here **/ +body { + font-family: "Roboto", sans-serif; + text-align: center; + margin: 50px; + color: #222843; + background-color: #5372ef; +} + +#card { + background-color: #ffffff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + max-width: 600px; + margin: auto; +} + +#quote { + font-size: 1.5rem; + margin-bottom: 10px; + padding: 0 2rem; +} + +#quote::before, +#quote::after { + content: '"'; + font-size: 1.5rem; +} + +#author { + font-style: italic; + margin-top: 10px; + margin-bottom: 2rem; + padding-right: 2rem; + padding-bottom: 1.5rem; + color: #555555; + text-align: right; + border-bottom: #e8e8e8 1px solid; +} + +#author::before { + content: "— "; +} + +#new-quote { + background-color: #5372ef; + color: white; + border: none; + padding: 10px 20px; + border-radius: 25px; + cursor: pointer; + font-size: 16px; +}