diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..8cb68f4d2 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

-

-

- +
+

+

+ +
diff --git a/Sprint-3/quote-generator/script.js b/Sprint-3/quote-generator/script.js new file mode 100644 index 000000000..54f1da792 --- /dev/null +++ b/Sprint-3/quote-generator/script.js @@ -0,0 +1,12 @@ + +const quote = document.querySelector('#quote'); +const author = document.querySelector('#author'); +callQuote(); + +const newCodeButton = document.querySelector('#new-quote'); +function callQuote() { + let randomQuote = pickFromArray(quotes); + quote.innerText = randomQuote.quote; + author.innerText = randomQuote.author; +} +newCodeButton.addEventListener('click', callQuote) \ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..18663ee9d 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,25 @@ /** Write your CSS in here **/ +body { + display: flex; + flex-direction: row; + justify-content: center; + padding: 10%; + background-color:rgba(35, 81, 56, 0.361); +} + +#quote-box { + background-color:rgba(255, 255, 255, 0.918); + border-style: solid; + padding: 10%; +} +#author { + text-align: right; +} +#new-quote { + display: block; + margin-left: auto; + margin-top: 20px; + padding: 10px; + background-color: rgba(35, 81, 56, 0.361); + border-style: solid; +} \ No newline at end of file