diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..88f5e21e1 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,9 +1,10 @@
-
+
- Title here
+ Quote generator app
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..ad4a45a78 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,20 @@
+// Goal: page shows a random quote from the quotes array with displaying the author
+// requirements:
+// when clicking a button on the screen it changes the quote
+const author = document.getElementById("author");
+const quote = document.getElementById("quote");
+const newQuoteButton = document.getElementById("new-quote");
+
+newQuoteButton.addEventListener("click", () => {
+ displayQuote();
+});
+
+function displayQuote() {
+ const randomQuote = pickFromArray(quotes);
+ quote.textContent = randomQuote.quote;
+ author.textContent = randomQuote.author;
+}
+window.onload = displayQuote;
// DO NOT EDIT BELOW HERE
// pickFromArray is a function which will return one item, at
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..25619d382 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,45 @@
/** Write your CSS in here **/
+body{
+ font-family: Arial,sans-serif;
+ min-height: 100vh;
+ margin:0;
+ display: flex;
+ padding: 0 1rem;
+ background-color: #e2c8c8
+}
+
+* {
+ box-sizing: border-box;
+}
+main.quote-box {
+ max-width : 600px;
+ padding :2rem;
+ text-align : center;
+}
+
+#quote {
+ font-size : 1.5rem;
+ font-style : italic;
+ line-height: 1.4;
+ margin-bottom : 1rem;
+}
+#author {
+ font-size: 1rem;
+ font-weight: 600;
+ color: #272ad3;
+ margin-bottom : 2rem;
+}
+#new-quote {
+ padding: 0.6rem 1.4rem;
+ font-size: 1rem;
+ border: none;
+ border-radius: 6px;
+ background-color: #2b2b2b;
+ color: #fff;
+ cursor: pointer;
+ transition: background-color 0.15s ease;
+}
+
+#new-quote:hover {
+ background-color: #444;
+}
\ No newline at end of file