diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..8a5933700 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,20 @@
- Title here
+ Quote generator
+
-
- hello there
-
-
-
+
+
+
+ Daily quote
+
+
+
+
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..e865aa87e 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -20,6 +20,34 @@ function pickFromArray(choices) {
return choices[Math.floor(Math.random() * choices.length)];
}
+function displayQuote() {
+ const quoteElement = document.getElementById("quote");
+ const authorElement = document.getElementById("author");
+ const randomItem = pickFromArray(quotes);
+
+ if (!quoteElement || !authorElement) {
+ return;
+ }
+
+ quoteElement.innerText = randomItem.quote;
+ authorElement.innerText = `— ${randomItem.author}`;
+}
+
+function setupQuoteGenerator() {
+ const button = document.getElementById("new-quote");
+
+ if (button) {
+ button.addEventListener("click", () => {
+ displayQuote();
+ });
+ }
+
+ // Show one quote when the page opens
+ displayQuote();
+}
+
+window.addEventListener("DOMContentLoaded", setupQuoteGenerator);
+
// A list of quotes you can use in your app.
// DO NOT modify this array, otherwise the tests may break!
const quotes = [
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..dd451f8ef 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,79 @@
-/** Write your CSS in here **/
+.page {
+ font-family: "Georgia", "Times New Roman", serif;
+ background-color: #efa73d;
+ margin: 0;
+ min-height: 100vh;
+}
+
+/* Keep the main area simple and centered */
+.quote-app {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+}
+
+.quote-card {
+ max-width: 900px;
+ width: 100%;
+ background-color: #ffffff;
+ border-radius: 10px;
+ padding: 40px 60px;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.quote-title {
+ text-align: center;
+ margin-bottom: 18px;
+ color: #2b2d42;
+ font-size: 24px;
+}
+
+.quote-text {
+ font-size: 32px;
+ line-height: 1.5;
+ color: #d9812a;
+ margin: 0;
+ position: relative;
+}
+
+.quote-text::before {
+ content: "❝";
+ font-size: 56px;
+ color: #d9812a;
+ margin-right: 10px;
+ vertical-align: middle;
+ display: inline-block;
+}
+
+.quote-author {
+ text-align: right;
+ font-size: 20px;
+ color: #d9812a;
+ margin: 0;
+}
+
+.quote-button {
+ align-self: flex-end;
+ min-width: 140px;
+ padding: 12px;
+ font-size: 18px;
+ border: none;
+ border-radius: 8px;
+ background-color: #e7891b;
+ color: #ffffff;
+ cursor: pointer;
+}
+
+.quote-button:hover {
+ background-color: #cc6c07;
+}
+
+.quote-button:focus {
+ outline: 2px solid #9b4a00;
+ outline-offset: 2px;
+}