diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..aed682da2 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,28 @@
-
-
-
- Title here
-
-
-
- hello there
-
-
-
-
+
+
+
+ Quote Generator App
+
+
+
+
+
+
+
+
+
+ Quote Generator
+
+
+
+
+
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..2b96ef639 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,24 @@ const quotes = [
];
// call pickFromArray with the quotes array to check you get a random quote
+function getRandomQuote() {
+ const index = Math.floor(Math.random() * quotes.length);
+ return quotes[index];
+}
+function displayQuote(quoteObj) {
+ const quoteElement = document.getElementById("quote");
+ const authorElement = document.getElementById("author");
+
+ quoteElement.innerText = quoteObj.quote;
+ authorElement.innerText = quoteObj.author;
+}
+window.addEventListener("DOMContentLoaded", () => {
+ const newQuoteBtn = document.getElementById("new-quote");
+
+ // Show initial quote
+ displayQuote(getRandomQuote());
+ // Show a new quote when the button is clicked
+ newQuoteBtn.addEventListener("click", () => {
+ displayQuote(getRandomQuote());
+ });
+});
\ No newline at end of file
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..0a8b8f216 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,69 @@
/** Write your CSS in here **/
+* {
+ margin: 2px;
+ padding: 2px;
+ box-sizing: border-box;
+}
+
+body.centre {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background: linear-gradient(to right, #1644da, #e2e2e2);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+}
+
+/* Heading */
+h1 {
+ margin-bottom: 2rem;
+ color: #2c3e50;
+}
+
+/* Quote Box */
+#quote-box {
+ background: linear-gradient(135deg, #2980b9, #6dd5fa);
+ color: white;
+ border-radius: 15px;
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+ padding: 2rem 3rem;
+ max-width: 600px;
+ width: 90%;
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+/* Quote Text */
+#quote {
+ font-size: 1.5rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+ text-align: center;
+}
+
+/* Author Text */
+#author {
+ font-size: 1.1rem;
+ font-style: italic;
+}
+
+/* Button */
+#new-quote {
+ background-color: #ffffff;
+ color: #2980b9;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ font-size: 1rem;
+ font-weight: bold;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+#new-quote:hover {
+ background-color: #2abfe4;
+ transform: translateY(-2px);
+}
\ No newline at end of file