diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..e2377edbe 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,22 @@
-
-
-
+
- Title here
+ Quote Generator
+
+
+
+
+
+
- hello there
-
-
-
+
+
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..90a909f4d 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,31 @@
+// Show a random quote on the screen
+function showRandomQuote() {
+ // Get one random object from the quotes array
+ const randomQuote = pickFromArray(quotes);
+
+ // Find the HTML elements
+ const quoteElement = document.getElementById("quote");
+ const authorElement = document.getElementById("author");
+
+ // Put the text inside the page
+ quoteElement.textContent = `"${randomQuote.quote}"`;
+ authorElement.textContent = `— ${randomQuote.author}`;
+}
+
+// This runs when the page loads
+function setup() {
+ // Show the first random quote
+ showRandomQuote();
+
+ // When button is clicked → show another quote
+ const button = document.getElementById("new-quote");
+ button.addEventListener("click", showRandomQuote);
+}
+
+// Make sure setup runs after page loads
+window.onload = setup;
+
+
// 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..f6bea63c6 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,68 @@
/** Write your CSS in here **/
+/* Page background */
+body {
+ margin: 0;
+ padding: 0;
+ background-color: #f19d17; /* light orange color */
+ font-family: Georgia, "Times New Roman", serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+
+/* Center white box */
+#quote-container {
+ background: white;
+ padding: 60px 80px;
+ width: 70%;
+ max-width: 900px;
+ border-radius: 4px;
+ text-align: left;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Quote text */
+#quote {
+ font-size: 2rem;
+ color: #fdc682; /* matching orange tone */
+ font-weight: normal;
+ line-height: 1.5;
+ margin-bottom: 40px;
+ position: relative;
+ padding-left: 50px;
+}
+
+/* Big quotation mark style */
+#quote::before {
+ content: "❝";
+ font-size: 3rem;
+ color: #f4b48a;
+ position: absolute;
+ left: 0;
+ top: -10px;
+}
+
+/* Author text */
+#author {
+ text-align: right;
+ font-size: 1.2rem;
+ color: #ed8208;
+ margin-bottom: 40px;
+}
+
+/* Button styling */
+#new-quote {
+ background-color: #a0e0ed;
+ color: rgb(146, 160, 185);
+ padding: 12px 30px;
+ border: none;
+ border-radius: 3px;
+ font-size: 1rem;
+ cursor: pointer;
+ float: right;
+}
+
+#new-quote:hover {
+ background-color: #cf7f22;
+}
\ No newline at end of file