diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..a80854602 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -3,7 +3,8 @@
- Title here
+
+ Quote generator app
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..6e065fada 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,71 @@ const quotes = [
];
// call pickFromArray with the quotes array to check you get a random quote
+function createContainer() {
+ const h1 = document.querySelector("h1");
+ if (h1) {
+ h1.remove();
+ }
+
+ const container = document.createElement('div');
+ container.id = 'quote-container';
+ container.className = 'container';
+
+ container.innerHTML = document.body.innerHTML;
+
+ document.body.innerHTML = "";
+ document.body.appendChild(container);
+
+ const autoPlayWrapper = document.createElement("div");
+ autoPlayWrapper.id = "auto-play-wrapper";
+ autoPlayWrapper.innerHTML = `
+
+ `;
+ document.body.appendChild(autoPlayWrapper);
+}
+
+let autoPlayInterval = null;
+
+function handleAutoPlayToggle() {
+ const checkbox = document.getElementById("auto-play");
+ const status = document.getElementById("auto-play-status");
+
+ checkbox.addEventListener("change", () => {
+ if (checkbox.checked) {
+ status.textContent = "ON";
+ autoPlayInterval = setInterval(setQuoteAndAuthor, 60000);
+ } else {
+ status.textContent = "OFF";
+ clearInterval(autoPlayInterval);
+ }
+ });
+}
+
+function setQuoteAndAuthor() {
+ const result = pickFromArray(quotes);
+ document.querySelector(
+ "#quote"
+ ).innerHTML = `“ ${result.quote}`;
+ document.querySelector('#author').innerHTML = `- ${result.author}`;
+}
+
+function handleButton() {
+ const button = document.getElementById("new-quote");
+
+ button.addEventListener("click", () => {
+ setQuoteAndAuthor();
+ });
+}
+
+function renderQuote() {
+ createContainer();
+ setQuoteAndAuthor();
+ handleButton();
+ handleAutoPlayToggle();
+}
+
+renderQuote();
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..a7a0001a6 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,68 @@
/** Write your CSS in here **/
+:root {
+ --main-bg-color: #f1b847;
+ --bg-color: #f5f5f5;
+ --shadow: 0 0 5px rgba(0,0,0,0.2);
+}
+body {
+ background-color: var(--main-bg-color);
+ color: var(--bg-color);
+ margin: 0;
+ padding: 0;
+}
+button {
+ background-color: var(--main-bg-color);
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ cursor: pointer;
+}
+button:hover {
+ filter: brightness(90%);
+}
+
+.container {
+ background-color: var(--bg-color);
+ color: var(--main-bg-color);
+ box-shadow: var(--shadow);
+ text-align: right;
+ margin: 80px auto;
+ padding: 30px 40px;
+ max-width: 600px;
+ min-height: 150px;
+ font-size: 1.2em;
+}
+#quote {
+ font-size: 2rem;
+ line-height: 1.3;
+}
+#author {
+ margin-bottom: 24px;
+}
+.mark {
+ font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+ font-size: 5rem;
+ font-weight: bold;
+ display: inline-block;
+ transform: translateY(0.4em);
+ line-height: 1;
+}
+#auto-play-wrapper {
+ width: 130px;
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ background-color: var(--bg-color);
+ color: var(--main-bg-color);
+ padding: 8px 12px;
+ box-shadow: var(--shadow);
+ font-size: 0.9rem;
+}
+#auto-play-wrapper input {
+ cursor: pointer;
+}
+.auto-play-label {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}