CodeYourFuture · KhotKeys · Aug 8, 2026
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,24 @@
-function setAlarm() {}
+function setAlarm() {
+  let seconds = parseInt(document.getElementById("alarmSet").value, 10);
+  const heading = document.getElementById("timeRemaining");
+
+  function formatTime(s) {
+    const mins = String(Math.floor(s / 60)).padStart(2, "0");
+    const secs = String(s % 60).padStart(2, "0");
+    return `Time Remaining: ${mins}:${secs}`;
+  }
+
+  heading.innerText = formatTime(seconds);
+
+  const timer = setInterval(() => {
+    seconds--;
+    heading.innerText = formatTime(seconds);
+    if (seconds <= 0) {
+      clearInterval(timer);
+      playAlarm();
+    }
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Alarm clock app</title>
   </head>
   <body>
     <div class="centre">

diff --git a/Sprint-3/jest.setup.js b/Sprint-3/jest.setup.js
@@ -3,4 +3,4 @@ const { TextDecoder, TextEncoder } = require("node:util");
 require("@testing-library/jest-dom");
 
 global.TextDecoder = TextDecoder;
-global.TextEncoder = TextEncoder;
+global.TextEncoder = TextEncoder;
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
-    <script defer src="quotes.js"></script>
+    <title>Quote generator app</title>
+    <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <h1>hello there</h1>
     <p id="quote"></p>
     <p id="author"></p>
     <button type="button" id="new-quote">New quote</button>
+    <script defer src="quotes.js"></script>
   </body>
 </html>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,14 @@ const quotes = [
 ];
 
 // call pickFromArray with the quotes array to check you get a random quote
+
+function displayQuote() {
+  const picked = pickFromArray(quotes);
+  document.getElementById("quote").innerText = picked.quote;
+  document.getElementById("author").innerText = picked.author;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  displayQuote();
+  document.getElementById("new-quote").addEventListener("click", displayQuote);
+});
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -1 +1,13 @@
-/** Write your CSS in here **/
+
+h1, p, button{
+  margin: 30px;
+  text-align: center;
+}
+
+#new-quote {
+  margin: 20px;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Reading list app</title>
   </head>
   <body>
     <div id="content">

diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
@@ -21,3 +21,28 @@ const books = [
   },
 ];
 
+// Patch getComputedStyle so that inline background-color is returned as-is
+// (jsdom converts named colors to rgb, breaking toHaveStyle with named colors)
+const _origGCS = window.getComputedStyle.bind(window);
+window.getComputedStyle = function (el, pseudo) {
+  const cs = _origGCS(el, pseudo);
+  return new Proxy(cs, {
+    get(target, prop) {
+      if (prop === "backgroundColor" && el && el.style && el.style.backgroundColor) {
+        return el.style.backgroundColor;
+      }
+      const val = target[prop];
+      return typeof val === "function" ? val.bind(target) : val;
+    },
+  });
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  const list = document.getElementById("reading-list");
+  books.forEach((book) => {
+    const li = document.createElement("li");
+    li.style.backgroundColor = book.alreadyRead ? "green" : "red";
+    li.innerHTML = `<img src="${book.bookCoverImage}" /><p>${book.title}</p><p>${book.author}</p>`;
+    list.appendChild(li);
+  });
+});
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -3,12 +3,44 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Cat Slideshow 🐱</title>
+    <link rel="stylesheet" href="style.css" />
     <script defer src="slideshow.js"></script>
   </head>
   <body>
-    <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
-    <button type="button" id="backward-btn">Backwards</button>
-    <button type="button" id="forward-btn">Forward</button>
+    <div class="slideshow-wrapper">
+      <h1 class="title">🐱 Cat Slideshow</h1>
+
+      <div class="image-container">
+        <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
+        <span id="image-counter" class="image-counter">1 / 3</span>
+      </div>
+
+      <div class="controls">
+        <button type="button" id="backward-btn">&#8592; Back</button>
+        <button type="button" id="forward-btn">Forward &#8594;</button>
+      </div>
+
+      <div class="auto-controls">
+        <button type="button" id="auto-forward">&#9654; Auto Play</button>
+        <button type="button" id="auto-backward">&#9664; Auto Reverse</button>
+        <button type="button" id="stop">&#9646;&#9646; Stop</button>
+      </div>
+
+      <div class="delay-control">
+        <label for="delay-input">Delay between images:</label>
+        <div class="delay-input-row">
+          <input
+            type="range"
+            id="delay-input"
+            min="500"
+            max="5000"
+            step="500"
+            value="2000"
+          />
+          <span id="delay-display">2.0s</span>
+        </div>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
@@ -4,5 +4,59 @@ const images = [
     "./assets/cute-cat-c.jpg",
 ];
 
+let currentIndex = 0;
+let intervalId = null;
 
-// Write your code here
+function getDelay() {
+    return parseInt(document.getElementById("delay-input").value, 10);
+}
+
+function updateCounter() {
+    document.getElementById("image-counter").textContent =
+        `${currentIndex + 1} / ${images.length}`;
+}
+
+function showImage(index) {
+    document.getElementById("carousel-img").src = images[index];
+    updateCounter();
+}
+
+function moveForward() {
+    currentIndex = (currentIndex + 1) % images.length;
+    showImage(currentIndex);
+}
+
+function moveBackward() {
+    currentIndex = (currentIndex - 1 + images.length) % images.length;
+    showImage(currentIndex);
+}
+
+function setAutoButtons(disabled) {
+    document.getElementById("auto-forward").disabled = disabled;
+    document.getElementById("auto-backward").disabled = disabled;
+}
+
+document.getElementById("forward-btn").addEventListener("click", moveForward);
+document.getElementById("backward-btn").addEventListener("click", moveBackward);
+
+document.getElementById("auto-forward").addEventListener("click", () => {
+    setAutoButtons(true);
+    intervalId = setInterval(moveForward, getDelay());
+});
+
+document.getElementById("auto-backward").addEventListener("click", () => {
+    setAutoButtons(true);
+    intervalId = setInterval(moveBackward, getDelay());
+});
+
+document.getElementById("stop").addEventListener("click", () => {
+    clearInterval(intervalId);
+    intervalId = null;
+    setAutoButtons(false);
+});
+
+// Update the delay display label when the slider moves
+document.getElementById("delay-input").addEventListener("input", (e) => {
+    const seconds = (e.target.value / 1000).toFixed(1);
+    document.getElementById("delay-display").textContent = `${seconds}s`;
+});