diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..e1b96f50c 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -3,11 +3,12 @@
- Title here
+ Quote generator app"
+
- hello there
+ Welcome
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..bc019ca24 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -16,6 +16,7 @@
// 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)];
}
@@ -490,4 +491,27 @@ const quotes = [
},
];
+//console.log(pickFromArray(quotes));
// call pickFromArray with the quotes array to check you get a random quote
+
+//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.
+
+//When you click a button on the screen it should change the quote on the screen.
+
+const button = document.querySelector("#new-quote");
+const quoteText = document.querySelector("#quote");
+const quoteAuthor = document.querySelector("#author");
+
+function showRandomQuote() {
+ const randomQuote = pickFromArray(quotes);
+ quoteText.textContent = randomQuote.quote;
+ quoteAuthor.textContent = randomQuote.author;
+}
+
+showRandomQuote();
+
+button.addEventListener("click", showRandomQuote);
+
+//function pickFromArray(choices) {
+// return choices[Math.floor(Math.random() * choices.length)];
+//}
\ No newline at end of file
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..6c92827a5 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,28 @@
/** Write your CSS in here **/
+
+body {
+ color: rgb(48, 46, 46);
+ background-color: rgb(238, 235, 235);
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 20px;
+}
+
+h1 {
+ text-align: center;
+ font-size: 2.5rem;
+ color: ;
+}
+
+p {
+ font-size: 1rem;
+ color: ;
+}
+
+button {
+ background-color: rgb(221, 235, 116);
+ color: rgb(131, 95, 29);
+ border: none;
+ padding: 10px;
+ border-radius: 5px;
+}