diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..968ac5fe6 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
+ Hello There
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..54bdc6797 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,14 @@ const quotes = [
];
// call pickFromArray with the quotes array to check you get a random quote
+
+const quoteElement = document.querySelector("#quote");
+const authorElement = document.querySelector("#author");
+const buttonElement = document.querySelector("#new-quote");
+function updateRandomQuote() {
+ const randomQuote = pickFromArray(quotes);
+ quoteElement.innerText = randomQuote.quote;
+ authorElement.innerText = randomQuote.author;
+}
+updateRandomQuote();
+buttonElement.addEventListener("click", updateRandomQuote);
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..c32dd6767 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,38 @@
/** Write your CSS in here **/
+h1 {
+ color: blueviolet;
+ font-style: normal;
+ font-size: 48px;
+}
+#quote {
+ font-size: 32px;
+ font-style: italic;
+ margin-left: 10px;
+ margin-bottom: 3px;
+}
+#author {
+ font-size: 30px;
+ margin-top: 20px;
+}
+#quote::before {
+ content: '"';
+}
+
+#quote::after {
+ content: '"';
+}
+#author::before {
+ content: "---";
+}
+
+body {
+ background-color: #fff8e7;
+ display: grid;
+ place-items: center;
+}
+#new-quote {
+ font-size: 28px;
+ font-family: serif;
+ background-color: white;
+ box-shadow: 5px 5px 2px 1px black;
+}