diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..8eff16674 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,23 @@
-
+
- Title here
+ Quote Generator
+
+
- hello there
-
-
-
+
+ Quote Generator
+
+
+
+
+
diff --git a/Sprint-3/quote-generator/script.js b/Sprint-3/quote-generator/script.js
new file mode 100644
index 000000000..0efec29f6
--- /dev/null
+++ b/Sprint-3/quote-generator/script.js
@@ -0,0 +1,48 @@
+// Get references to the HTML elements that will display
+// the quote, the author, and the button
+const quoteElement = document.getElementById("quote");
+const authorElement = document.getElementById("author");
+const newQuoteButton = document.getElementById("new-quote");
+
+// Store the currently displayed quote so that
+// the same quote is not shown twice in a row
+let currentQuote = null;
+
+/**
+ * Returns a random quote object from the quotes array.
+ * If a quote is already being displayed, this function
+ * keeps picking again until it gets a different one.
+ */
+function getNewRandomQuote() {
+ let randomQuote = pickFromArray(quotes);
+
+ while (quotes.length > 1 && randomQuote === currentQuote) {
+ randomQuote = pickFromArray(quotes);
+ }
+
+ return randomQuote;
+}
+
+/**
+ * Displays a random quote and its author on the page.
+ */
+function displayRandomQuote() {
+ const selectedQuote = getNewRandomQuote();
+
+ quoteElement.textContent = `"${selectedQuote.quote}"`;
+ authorElement.textContent = selectedQuote.author;
+
+ currentQuote = selectedQuote;
+}
+
+/**
+ * Runs when the page loads.
+ * It shows the first quote and sets up the button click event.
+ */
+function setup() {
+ displayRandomQuote();
+ newQuoteButton.addEventListener("click", displayRandomQuote);
+}
+
+// Run setup when the page has finished loading
+window.addEventListener("load", setup);
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..4c217ceba 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,77 @@
-/** Write your CSS in here **/
+/* Apply box sizing to all elements so padding and borders
+ do not affect the final width and height unexpectedly */
+* {
+ box-sizing: border-box;
+}
+
+/* Basic page styling */
+body {
+ margin: 0;
+ font-family: Arial, Helvetica, sans-serif;
+ background-color: #f4f4f4;
+ color: #222222;
+}
+
+/* Main layout container */
+.container {
+ max-width: 750px;
+ margin: 60px auto;
+ padding: 20px;
+ text-align: center;
+}
+
+/* Page heading */
+h1 {
+ margin-bottom: 30px;
+ font-size: 2rem;
+}
+
+/* Card that holds the quote and author */
+.quote-card {
+ background-color: #ffffff;
+ border-radius: 12px;
+ padding: 30px 20px;
+ margin-bottom: 25px;
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
+}
+
+/* Quote text styling */
+.quote-text {
+ font-size: 1.5rem;
+ line-height: 1.6;
+ margin-bottom: 20px;
+}
+
+/* Author text styling */
+.quote-author {
+ font-size: 1.1rem;
+ font-weight: bold;
+ color: #555555;
+}
+
+/* Add the dash in CSS instead of JavaScript */
+.quote-author::before {
+ content: "— ";
+}
+
+/* Button styling */
+#new-quote {
+ padding: 12px 24px;
+ font-size: 1rem;
+ border: none;
+ border-radius: 8px;
+ background-color: #0b5ed7;
+ color: white;
+ cursor: pointer;
+}
+
+/* Button hover state */
+#new-quote:hover {
+ background-color: #094db1;
+}
+
+/* Button keyboard focus state */
+#new-quote:focus {
+ outline: 3px solid #99c2ff;
+ outline-offset: 3px;
+}