diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..fd78748da 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,18 @@
-
+
- Title here
+ Quote Generator
+
- hello there
-
-
-
+
+ Quote Generator
+
+
+
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..968fa3c44 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,31 @@
+// Function to fetch a random quote and update the DOM
+function displayRandomQuote() {
+ // 1. Get a random quote object using the provided helper function
+ const randomQuote = pickFromArray(quotes);
+
+ // 2. Select the HTML elements where the quote and author will go
+ const quoteElement = document.querySelector("#quote");
+ const authorElement = document.querySelector("#author");
+
+ // 3. Update the text of those elements
+ if (quoteElement && authorElement) {
+ quoteElement.innerText = randomQuote.quote;
+ authorElement.innerText = randomQuote.author;
+ }
+}
+
+// Ensure the DOM is fully loaded before attaching event listeners
+window.onload = function () {
+ // Display an initial quote right when the page loads
+ displayRandomQuote();
+
+ // Find the button and attach a click event listener
+ const newQuoteBtn = document.querySelector("#new-quote");
+ if (newQuoteBtn) {
+ newQuoteBtn.addEventListener("click", 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..71f7752b3 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,70 @@
-/** Write your CSS in here **/
+/* Reset basic margins and set font */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Center content on the screen and give it a background color */
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background-color: #f4f4f9;
+ color: #333;
+}
+
+/* Style the main container to look like a card */
+.container {
+ background-color: white;
+ padding: 40px;
+ border-radius: 12px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+ max-width: 500px;
+ text-align: center;
+ margin: 20px;
+}
+
+/* Style the heading */
+h1 {
+ font-size: 1.5rem;
+ color: #555;
+ margin-bottom: 20px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+}
+
+/* Style the quote text */
+#quote {
+ font-size: 1.25rem;
+ font-style: italic;
+ margin-bottom: 15px;
+ line-height: 1.5;
+}
+
+/* Style the author text */
+#author {
+ font-size: 1rem;
+ color: #777;
+ font-weight: bold;
+ margin-bottom: 30px;
+}
+
+/* Make the button look clickable */
+#new-quote {
+ background-color: #007bff;
+ color: white;
+ border: none;
+ padding: 12px 24px;
+ font-size: 1rem;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+/* Hover effect to button */
+#new-quote:hover {
+ background-color: #0056b3;
+}