diff --git a/week-3/quote-generator/index.html b/week-3/quote-generator/index.html
index 30b434bc..cfb35059 100644
--- a/week-3/quote-generator/index.html
+++ b/week-3/quote-generator/index.html
@@ -3,11 +3,12 @@
- Title here
+ Quote Generator
+
- hello there
+ Quote of the day
diff --git a/week-3/quote-generator/quotes.js b/week-3/quote-generator/quotes.js
index 4a4d04b7..f3efcee8 100644
--- a/week-3/quote-generator/quotes.js
+++ b/week-3/quote-generator/quotes.js
@@ -1,3 +1,16 @@
+addEventListener("DOMContentLoaded", displayQuote);
+
+const quoteElement = document.querySelector("#quote");
+const authorElement = document.querySelector("#author");
+const newQuote = document.querySelector("#new-quote");
+
+function displayQuote() {
+ const randomQuote = pickFromArray(quotes);
+ quoteElement.textContent = `"${randomQuote.quote}"`;
+ authorElement.textContent = `- ${randomQuote.author}`;
+}
+
+newQuote.addEventListener("click", displayQuote);
// DO NOT EDIT BELOW HERE
// pickFromArray is a function which will return one item, at
diff --git a/week-3/quote-generator/style.css b/week-3/quote-generator/style.css
index 63cedf2d..6073d0ad 100644
--- a/week-3/quote-generator/style.css
+++ b/week-3/quote-generator/style.css
@@ -1 +1,29 @@
/** Write your CSS in here **/
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f1f7ff;
+ margin: 25% 10%;
+ padding: 5%;
+
+}
+
+h1 {
+ justify-content: center;
+ color: rgb(160, 38, 38);
+}
+
+button {
+ padding: 5px 10px;
+ background-color: rgb(209, 166, 141);
+ border-radius: 10px;
+}
+
+p {
+ justify-content: center;
+ color: rgb(75, 36, 36);
+ text-decoration: solid;
+}
+
+#author {
+ text-align: right;
+}
\ No newline at end of file