CodeYourFuture · Enice-Codes · Aug 10, 2026 · Aug 15, 2026 · cjyuan · Aug 15, 2026
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,31 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote generator app</title>
+   <link rel="stylesheet" href="style.css" />
     <script defer src="quotes.js"></script>
   </head>
   <body>
-    <h1>hello there</h1>
-    <p id="quote"></p>
-    <p id="author"></p>
-    <button type="button" id="new-quote">New quote</button>
+    <main class="card">
+      <h1 class="visually-hidden">Quote generator app</h1>
+
+      <div class="quote-container">
+        <blockquote id="quote"></blockquote>
+      </div>
+
+      <div class="author-container">
+        <p id="author"></p>
+      </div>
+
+      <div class="controls">
+        <button type="button" id="new-quote">New quote</button>
+      </div>
+
+      <label class="autoplay-toggle">
+        <input type="checkbox" id="autoplay-checkbox" />
+        Auto-play
+      </label>
+      <p id="autoplay-status"></p>
+    </main>
   </body>
-</html>
+</html>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -490,4 +490,74 @@ const quotes = [
   },
 ];
 
-// call pickFromArray with the quotes array to check you get a random quote
+
+// Grab the elements we need to update once, so we're not
+// searching the page every time.
+const quoteEl = document.getElementById("quote");
+const authorEl = document.getElementById("author");
+const newQuoteButton = document.getElementById("new-quote");
+const autoplayCheckbox = document.getElementById("autoplay-checkbox");
+const autoplayStatusEl = document.getElementById("autoplay-status");
+
+// This will hold the id returned by setInterval so we can
+// stop it again later when auto-play is switched off.
+let autoplayIntervalId = null;
+
+// How often to change the quote automatically, in milliseconds.
+// Set to 60 seconds as per the brief - turn this down to
+// something like 5000 (5 seconds) while you're testing.
+const AUTOPLAY_INTERVAL_MS = 60000;
+
+// Picks a new random quote and displays it on the screen.
+function showRandomQuote() {
+  const randomQuote = pickFromArray(quotes);
+  // If you prefer the Math.random() approach directly, you could
+  // instead write:
+  // const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
+quoteEl.textContent = randomQuote.quote;
+authorEl.textContent = randomQuote.author;
+}
+
+// Updates the on-screen text that says whether auto-play is on or off.
+function updateAutoplayStatus(isOn) {
+  autoplayStatusEl.textContent = isOn
+    ? "auto-play: ON — a new quote will appear every 60 seconds."
+    : "auto-play: OFF — quotes will only change when you click the button.";
+}
+
+// Turns auto-play on: shows a new quote immediately, then keeps
+// showing a new one every AUTOPLAY_INTERVAL_MS.
+function startAutoplay() {
+  updateAutoplayStatus(true);
+  autoplayIntervalId = setInterval(showRandomQuote, AUTOPLAY_INTERVAL_MS);
+}
+
+// Turns auto-play off: stops the repeating timer so the quote
+// stops changing by itself.
+function stopAutoplay() {
+  updateAutoplayStatus(false);
+  clearInterval(autoplayIntervalId);
+  autoplayIntervalId = null;
+}
+
+// Wire everything up once the page has loaded.
+document.addEventListener("DOMContentLoaded", () => {
+  // Show a random quote as soon as the page loads.
+  showRandomQuote();
+
+  // Show a new quote whenever the button is clicked.
+  newQuoteButton.addEventListener("click", showRandomQuote);
+
+  // Start in the "off" state so the status text is correct
+  // even before the user touches the checkbox.
+  updateAutoplayStatus(false);
+
+  // Toggle auto-play on/off when the checkbox is switched.
+  autoplayCheckbox.addEventListener("change", () => {
+    if (autoplayCheckbox.checked) {
+      startAutoplay();
+    } else {
+      stopAutoplay();
+    }
+  });
+});
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -1 +1,114 @@
 /** Write your CSS in here **/
+
+:root {
+  --accent: #ff9f0a;
+  --accent-dark: #e08600;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Georgia, "Times New Roman", serif;
+  background: var(--accent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+  padding: 2rem;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.card {
+  background: #fff;
+  padding: 3rem 3.5rem;
+  max-width: 700px;
+  width: 100%;
+}
+
+.quote-container {
+  margin-bottom: 1.5rem;
+}
+
+#quote {
+  font-size: 1.6rem;
+  color: var(--accent);
+  margin: 0;
+  line-height: 1.4;
+  quotes: '"' '"';
+}
+
+#quote::before {
+  content: open-quote;
+}
+
+#quote::after {
+  content: close-quote;
+}
+
+.author-container {
+  text-align: right;
+  margin-bottom: 2rem;
+}
+
+#author {
+  font-size: 1.1rem;
+  color: var(--accent);
+  margin: 0;
+}
+
+#author::before {
+  content: "— ";
+}
+
+.controls {
+  display: flex;
+  justify-content: flex-end;
+}
+
+button {
+  font-family: system-ui, sans-serif;
+  padding: 0.85rem 1.75rem;
+  border: none;
+  background: var(--accent);
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button:hover {
+  background: var(--accent-dark);
+}
+
+.autoplay-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.4rem;
+  font-family: system-ui, sans-serif;
+  font-size: 0.9rem;
+  color: #888;
+  margin-top: 1rem;
+}
+
+#autoplay-status {
+  font-family: system-ui, sans-serif;
+  font-size: 0.8rem;
+  color: #999;
+  text-align: right;
+  margin: 0.25rem 0 0;
+}