diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..428f14890 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,18 @@
-
+
- Title here
+ Quote generator app
+
- hello there
-
-
-
+
+ "
+
+
+
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..98aec9afa 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,17 @@
+const newQuoteButton = document.querySelector("#new-quote");
+
+function displayQuote() {
+ const randomQuote = pickFromArray(quotes);
+ const quote = document.querySelector("#quote");
+ const author = document.querySelector("#author");
+
+ quote.textContent = randomQuote.quote;
+ author.textContent = `- ${randomQuote.author}`;
+}
+
+newQuoteButton.addEventListener("click", displayQuote);
+window.addEventListener("load", 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..fa4413558 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,66 @@
/** Write your CSS in here **/
+:root {
+ --primary-color: #ffa500;
+ --secondary-color: #ffffff;
+}
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: var(--primary-color);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ padding: 1rem;
+ font-family:
+ system-ui,
+ -apple-system,
+ sans-serif;
+}
+
+main {
+ background-color: var(--secondary-color);
+ color: var(--primary-color);
+ width: 100%;
+ max-width: 850px;
+ min-height: 300px;
+ padding: clamp(3rem, 6vw, 5rem);
+ text-align: right;
+ padding: 4rem;
+}
+
+h1,
+#quote {
+ display: inline;
+ font-weight: bold;
+}
+
+h1 {
+ font-size: clamp(2.5rem, 6vw, 3rem);
+ font-family: Theseadow, serif;
+}
+
+#quote {
+ font-size: clamp(1rem, 3vw, 1.5rem);
+}
+
+#author {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ font-style: italic;
+}
+
+button {
+ background-color: var(--primary-color);
+ color: var(--secondary-color);
+ border: none;
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: large;
+}