HackYourFutureBelgium · serotonine · Nov 18, 2025 · Nov 18, 2025 · Nov 18, 2025 · Nov 19, 2025
diff --git a/Sprint-3/alarmclock/alarm-clock.ico b/Sprint-3/alarmclock/alarm-clock.ico
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,25 +1,92 @@
-function setAlarm() {}
+// Remove after use.
+const input = document.getElementById("alarmSet");
+const output = document.getElementById("timeRemaining").querySelector(".timer");
+const outputError = document.getElementById("output-error");
+const body = document.getElementsByTagName("body")[0];
+//
+let count, timeRemaining;
+let isPauseAlarm = false;
 
-// DO NOT EDIT BELOW HERE
+function setAlarm() {
+  reInit();
+  const time = Number(input.value);
+
+  if (time && time > 0) {
+    timeRemaining = time;
+    output.innerHTML = displayTime(timeRemaining);
+    startAlarm();
+  } else {
+    throw new Error("You must set a positive value");
+  }
+}
+
+function startAlarm() {
+  count = window.setInterval(() => {
+    if (timeRemaining >= 1) {
+      timeRemaining--;
+      output.innerHTML = displayTime(timeRemaining);
+    } else {
+      playAlarm();
+      clearInterval(count);
+      body.classList.add("alarm");
+    }
+  }, 1000);
+}
+function pauseAlarm(e) {
+  isPauseAlarm = !isPauseAlarm;
+  const btn = e.target;
+  if (isPauseAlarm) {
+    btn.classList.add("active");
+    clearInterval(count);
+  } else {
+    btn.classList.remove("active");
+    startAlarm();
+  }
+}
+
+function reInit() {
+  audio.pause();
+  body.classList.remove("alarm");
+  outputError.classList.remove("active");
+  outputError.innerHTML = "";
+}
+function displayTime(time) {
+  const seconds = time % 60;
+  const minutes = (time - seconds) / 60;
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(
+    2,
+    "0"
+  )}`;
+}
+
+// DO NOT EDIT BELOW HERE.
 
 var audio = new Audio("alarmsound.mp3");
 
 function setup() {
-  document.getElementById("set").addEventListener("click", () => {
-    setAlarm();
+  document.getElementById("set").addEventListener("click", (e) => {
+    try {
+      setAlarm();
+    } catch (e) {
+      outputError.classList.add("active");
+      outputError.innerHTML = e.message;
+    }
   });
 
   document.getElementById("stop").addEventListener("click", () => {
-    pauseAlarm();
+    stopAlarm();
+  });
+  document.getElementById("pause").addEventListener("click", (e) => {
+    pauseAlarm(e);
   });
 }
 
 function playAlarm() {
   audio.play();
 }
 
-function pauseAlarm() {
-  audio.pause();
+function stopAlarm() {
+  reInit();
 }
 
 window.onload = setup;
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -3,18 +3,22 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="./alarm-clock.ico">
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Alarm clock app</title>
   </head>
   <body>
     <div class="centre">
-      <h1 id="timeRemaining">Time Remaining: 00:00</h1>
+      <h1 id="timeRemaining"><span>Time Remaining:&nbsp</span><span class="timer">00:00</span></h1>
       <label for="alarmSet">Set time to:</label>
       <input id="alarmSet" type="number" />
 
       <button id="set" type="button">Set Alarm</button>
+      <button id="pause" type="button">Pause Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
+       <p id="output-error"></p>
     </div>
+
     <script src="alarmclock.js"></script>
   </body>
 </html>
diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json
@@ -13,5 +13,12 @@
   "bugs": {
     "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues"
   },
-  "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme"
+  "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
+  "dependencies": {
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1"
+  }
 }
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
@@ -1,15 +1,67 @@
+:root {
+  --size: 0%;
+}
+
+
+body {
+  background-color: aliceblue;
+  height: 100vh;
+  transition: background-color 0.2s ;
+  &.alarm{
+    background: radial-gradient(circle,rgba(250, 221, 5, 1) var(--size), rgba(255, 127, 80, 1) 80%);
+    animation: alarm 0.2s alternate infinite;
+  }
+}
+button {
+all:reset;
+cursor: pointer;
+padding: 0.75rem 1rem;
+border: lightgray;
+background-color: gainsboro;
+border-radius: 1rem;
+transition: all 0.2s ease-out;
+&:hover{
+  background-color: lightskyblue;
+}
+&.active{
+  background-color:coral;
+}
+}
+
 .centre {
   position: fixed;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
+  background-color: white;
+  padding: 2rem;
+  box-shadow: 2px 2px 0.5rem lightgray;
 }
 
 #alarmSet {
   margin: 20px;
 }
 
-h1 {
+h1,
+#output {
   text-align: center;
 }
+
+#output-error {
+  visibility: hidden;
+  padding: 0.5rem;
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: 700;
+  color: white;
+  background-color: red;
+}
+#output-error.active{
+    visibility: visible;
+  }
+
+  @keyframes alarm{
+    0%{--size:0%}
+   100%{--size:25%}
+
+  }
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
+
   <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="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+    <script defer type="module" src="quotes_generator.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>
+    <div class="content">
+      <header class="header">
+        <h1 class="punchline">Inspire me...</h1>
+      </header>
+      <main class="main">
+        <article class="quote-box">
+          <h2 id="quote">Strive not to be a success, but rather to be of value.</h2>
+          <p id="author">Albert Einstein</p>
+          <button type="button" id="new-quote">New quote</button>
+        </article>
+      </main>
+      </div.content>
   </body>
-</html>
+
+</html>
diff --git a/Sprint-3/quote-generator/package.json b/Sprint-3/quote-generator/package.json
@@ -3,9 +3,21 @@
   "version": "1.0.0",
   "license": "CC-BY-SA-4.0",
   "description": "You must update this package",
+  "type":"module",
   "scripts": {
     "test": "jest --config=../jest.config.js quote-generator"
   },
+  "dependencies": {
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "jest": "^30.0.4",
+    "jest-environment-jsdom": "^30.0.4"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/CodeYourFuture/CYF-Coursework-Template.git"

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -1,28 +1,6 @@
-// DO NOT EDIT BELOW HERE
-
-// pickFromArray is a function which will return one item, at
-// random, from the given array.
-//
-// Parameters
-// ----------
-// choices: an array of items to pick from.
-//
-// Returns
-// -------
-// One item at random from the given array.
-//
-// Examples of use
-// ---------------
-// pickFromArray(['a','b','c','d'])     // maybe returns 'c'
-
-// You don't need to change this function
-function pickFromArray(choices) {
-  return choices[Math.floor(Math.random() * choices.length)];
-}
-
 // A list of quotes you can use in your app.
 // DO NOT modify this array, otherwise the tests may break!
-const quotes = [
+export const quotes = [
   {
     quote: "Life isn't about getting and having, it's about giving and being.",
     author: "Kevin Kruse",
@@ -489,5 +467,3 @@ const quotes = [
     author: "Zig Ziglar",
   },
 ];
-
-// call pickFromArray with the quotes array to check you get a random quote
diff --git a/Sprint-3/quote-generator/quotes_generator.js b/Sprint-3/quote-generator/quotes_generator.js
@@ -0,0 +1,57 @@
+// Split file for lisibility.
+import { quotes } from "./quotes.js";
+// All begins when DOM is loaded.
+window.addEventListener("DOMContentLoaded", () => {
+  const trigger = document.getElementById("new-quote");
+  const quote = document.getElementById("quote");
+  const author = document.getElementById("author");
+  displayQuote();
+  trigger.addEventListener("click", () => {
+    displayQuote();
+  });
+});
+// Display with an animation.
+async function displayQuote() {
+  const currentQuote = pickFromArray(quotes);
+  await writeText(currentQuote.quote, quote);
+  author.innerHTML = currentQuote.author;
+}
+// Animation.
+function writeText(text, el) {
+  const lg = text.length;
+  let count = 0;
+  let current = text.charAt(count);
+  el.innerHTML = current;
+  const w = setInterval(() => {
+    if (count < lg) {
+      count++;
+      current += text.charAt(count);
+      el.innerHTML = current;
+    } else {
+      clearInterval(w);
+    }
+  }, 25);
+}
+
+// DO NOT EDIT BELOW HERE
+
+// pickFromArray is a function which will return one item, at
+// random, from the given array.
+//
+// Parameters
+// ----------
+// choices: an array of items to pick from.
+//
+// Returns
+// -------
+// One item at random from the given array.
+//
+// Examples of use
+// ---------------
+// pickFromArray(['a','b','c','d'])     // maybe returns 'c'
+
+// You don't need to change this function.
+function pickFromArray(choices) {
+  return choices[Math.floor(Math.random() * choices.length)];
+}
+