diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..8c48a4b87 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,23 @@
-
+
- Title here
+ Quote generator app
+
+
hello there
+
+
+
diff --git a/Sprint-3/quote-generator/script.js b/Sprint-3/quote-generator/script.js
new file mode 100644
index 000000000..ab737a081
--- /dev/null
+++ b/Sprint-3/quote-generator/script.js
@@ -0,0 +1,31 @@
+const quoteP = document.querySelector("#quote");
+const authorP = document.querySelector("#author");
+const newQuoteBtn = document.querySelector("#new-quote");
+
+function displayRandomQuote() {
+ const randomQuote = pickFromArray(quotes);
+ quoteP.innerText = randomQuote.quote;
+ authorP.innerText = randomQuote.author;
+}
+
+window.addEventListener("load", () => {
+ displayRandomQuote();
+});
+
+newQuoteBtn.addEventListener("click", () => {
+ displayRandomQuote();
+});
+
+let intervalId = null;
+const autoToggle = document.querySelector("#auto-toggle");
+const autoStatus = document.querySelector("#auto-status");
+
+autoToggle.addEventListener("change", () => {
+ if (autoToggle.checked) {
+ autoStatus.innerText = "auto-play:ON";
+ intervalId = setInterval(displayRandomQuote, 5000); // 5 seconds for testing
+ } else {
+ autoStatus.innerText = "auto-play:OFF";
+ clearInterval(intervalId);
+ }
+});
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..0d48912d2 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,69 @@
-/** Write your CSS in here **/
+body {
+ margin: 0;
+ padding: 0;
+ font-family: "Segoe UI", sans-serif;
+ background: linear-gradient(135deg, #4b79a1, #283e51);
+ color: white;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
+/* Quote box */
+.quote-box {
+ background: rgba(255, 255, 255, 0.1);
+ padding: 30px 40px;
+ border-radius: 12px;
+ max-width: 600px;
+ backdrop-filter: blur(8px);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+ animation: fadeIn 0.8s ease;
+}
+
+/* Quote text */
+#quote {
+ font-size: 1.6rem;
+ margin-bottom: 20px;
+ line-height: 1.4;
+}
+
+/* Author */
+#author {
+ font-size: 1.2rem;
+ opacity: 0.8;
+}
+
+/* Button */
+#new-quote {
+ margin-top: 30px;
+ padding: 12px 25px;
+ font-size: 1rem;
+ border: none;
+ border-radius: 8px;
+ background: #ffcc00;
+ color: #333;
+ cursor: pointer;
+ transition:
+ transform 0.2s ease,
+ background 0.3s ease;
+}
+
+#new-quote:hover {
+ background: #ffdb4d;
+ transform: scale(1.05);
+}
+
+/* Fade animation */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}