diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..1d9f5adcd 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,13 +1,14 @@
-
+
- Title here
+
+ Quote Generator App
- hello there
+ Welcome to the Quote Generator
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..83a55d8d1 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,20 @@
+ window.addEventListener("DOMContentLoaded", () => {
+ const quoteElement = document.getElementById("quote");
+ const authorElement = document.getElementById("author");
+ const newQuoteBtn = document.getElementById("new-quote");
+
+
+function displayRandomQuote() {
+ const randomQuote = pickFromArray(quotes);
+ quoteElement.textContent = `"${randomQuote.quote}"`;
+ authorElement.textContent = randomQuote.author;
+}
+
+ newQuoteBtn.addEventListener("click", displayRandomQuote);
+
+ displayRandomQuote();
+});
+
// 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..926f18473 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,31 @@
/** Write your CSS in here **/
+body {
+ display: grid;
+ place-items: center;
+ min-height: 100vh;
+ margin: 0;
+ font-family: Arial, sans-serif;
+ text-align: center;
+ margin-top: 40px;
+ background-color: aqua;
+}
+h1 {
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+ color: green;
+}
+
+#quote {
+ font-size: 45px;
+ margin-bottom: 10px;
+ color: purple;
+}
+#author {
+ font-size: 30px;
+ color: red;
+ margin-bottom: 10px;
+ font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+}
+#new-quote {
+ padding: 10px 20px;
+ font-size: 16px;
+}