diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..7ca98bdde 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,22 @@
-
+
- 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..cc0a4e565 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,18 @@ 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 newQuoteButton = document.querySelector("#new-quote");
+
+function displayRandomQuote() {
+ const randomQuote = pickFromArray(quotes);
+
+ quoteElement.textContent = randomQuote.quote;
+ authorElement.textContent = randomQuote.author;
+}
+
+displayRandomQuote();
+
+newQuoteButton.addEventListener("click", displayRandomQuote);
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..549fa8f37 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,82 @@
-/** Write your CSS in here **/
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: #8a4b00;
+ font-family: Georgia, "Times New Roman", Times, serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+}
+
+/* Container for heading + card */
+.outer-container {
+ width: 90%;
+ max-width: 650px;
+ text-align: center;
+}
+
+/* Heading styling */
+h1 {
+ color: white;
+ font-family: Arial, sans-serif;
+ margin-bottom: 20px;
+ font-size: 28px;
+}
+
+/* The white quote card */
+.quote-box {
+ background-color: #ffffff;
+ padding: 45px;
+ text-align: left;
+ position: relative;
+}
+
+/* Quote text styling with orange quote mark added automatically */
+#quote {
+ color: #8a4b00;
+ font-size: 22px;
+ line-height: 1.4;
+ margin-bottom: 15px;
+}
+
+#quote::before {
+ content: "“ ";
+ font-size: 40px;
+ font-weight: bold;
+ line-height: 0;
+ vertical-align: -8px;
+}
+
+/* Author text styling right-aligned */
+#author {
+ color: #8a4b00;
+ font-size: 18px;
+ text-align: right;
+ margin-bottom: 25px;
+}
+
+#author::before {
+ content: "- ";
+}
+
+/* Button styled and pushed to bottom right */
+#new-quote {
+ display: block;
+ margin-left: auto;
+ background-color: #8a4b00;
+ color: #ffffff;
+ border: none;
+ padding: 12px 22px;
+ font-size: 15px;
+ font-family: Arial, sans-serif;
+ cursor: pointer;
+}
+
+#new-quote:hover {
+ opacity: 0.9;
+}