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

hello there

-

-

- +
+

hello there

+

Quote by

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..655e9044a 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,27 +1,7 @@ -// DO NOT EDIT BELOW HERE - -// pickFromArray is a function which will return one item, at -// random, from the given array. -// -// Parameters -// ---------- -// choices: an array of items to pick from. -// -// Returns -// ------- -// One item at random from the given array. -// -// 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)]; } -// A list of quotes you can use in your app. -// DO NOT modify this array, otherwise the tests may break! const quotes = [ { quote: "Life isn't about getting and having, it's about giving and being.", @@ -490,4 +470,18 @@ const quotes = [ }, ]; -// call pickFromArray with the quotes array to check you get a random quote +const areaOfQuote = document.querySelector("#quote"); +const shufflebutton = document.querySelector("#new-quote"); +const AreaOfQuoteBy = document.querySelector("#author"); + +function quoteGenerator() { + const entireQuote = pickFromArray(quotes); + const quot = entireQuote.quote; + const Author = entireQuote.author; + areaOfQuote.textContent = quot; + AreaOfQuoteBy.textContent = Author; +} + +quoteGenerator(); + +shufflebutton.addEventListener("click", quoteGenerator); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..19e018878 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,49 @@ /** Write your CSS in here **/ +.displayArea { + position: fixed; + border-style: groove; + border-top-left-radius: 0%; + top: 50%; + left: 50%; + width: 75%; + transform: translate(-50%, -50%); + background-color: whitesmoke; +} +body { + background-color: rgb(223, 208, 182); +} +#new-quote { + border-style: outset; + font-size: larger; + color: whitesmoke; + margin-left: 80%; + margin-bottom: 10px; + background-color: rgb(226, 203, 163); + block-size: 50px; +} +#new-quote:hover { + color: black; + border-right-width: 10px; + border-bottom-width: 10px; +} + +#quote { + display: block; + font-size: 2em; + margin-block-start: 0.67em; + margin-block-end: 0.67em; + font-weight: bold; + text-align: center; + margin-right: 20px; + color: rgb(226, 203, 163); +} +#author { + font-size: 1.17em; + font-weight: bold; + margin-block-start: 1em; + margin-block-end: 1em; + display: block; + text-align: right; + margin-right: 20px; + color: rgb(226, 203, 163); +}