CodeYourFuture · HadiVahidi20 · Dec 7, 2025 · Dec 13, 2025 · Dec 13, 2025 · Dec 13, 2025
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,6 +1,47 @@
-function setAlarm() {}
+let countdown;
 
-// DO NOT EDIT BELOW HERE
+function getSecondsFromInput() {
+  const inputValue = document.getElementById("alarmSet").value;
+  const seconds = Number(inputValue);
+
+  // Keep only a safe whole number.
+  if (!Number.isFinite(seconds) || seconds < 0) {
+    return 0;
+  }
+
+  return Math.floor(seconds);
+}
+
+function setAlarm() {
+  let seconds = getSecondsFromInput();
+
+  function updateDisplay() {
+    let mins = Math.floor(seconds / 60);
+    let secs = seconds % 60;
+    let mm = String(mins).padStart(2, "0");
+    let ss = String(secs).padStart(2, "0");
+    document.getElementById("timeRemaining").innerText =
+      "Time Remaining: " + mm + ":" + ss;
+  }
+
+  // Reset old timer and sound before starting a new one.
+  pauseAlarm();
+  updateDisplay();
+
+  if (seconds <= 0) {
+    return;
+  }
+
+  countdown = setInterval(function () {
+    seconds--;
+    updateDisplay();
+
+    if (seconds <= 0) {
+      clearInterval(countdown);
+      playAlarm();
+    }
+  }, 1000);
+}
 
 var audio = new Audio("alarmsound.mp3");
 
@@ -10,7 +51,7 @@ function setup() {
   });
 
   document.getElementById("stop").addEventListener("click", () => {
-    pauseAlarm();
+    stopAndReset();
   });
 }
 
@@ -19,7 +60,20 @@ function playAlarm() {
 }
 
 function pauseAlarm() {
-  audio.pause();
+  /* Stop the bell and freeze the timer */
+  clearInterval(countdown);
+  try {
+    audio.pause();
+    audio.currentTime = 0;
+  } catch (error) {
+    // Audio can be missing in tests.
+  }
+}
+
+function stopAndReset() {
+  pauseAlarm();
+  document.getElementById("alarmSet").value = "";
+  document.getElementById("timeRemaining").innerText = "Time Remaining: 00:00";
 }
 
 window.onload = setup;
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/alarmclock/style.css b/Sprint-3/alarmclock/style.css
@@ -1,9 +1,27 @@
+body {
+  font-family: Arial, sans-serif;
+  background: #f5f5f5;
+  margin: 0;
+  padding: 0;
+}
+
 .centre {
   position: fixed;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
+  background: white;
+  padding: 30px 40px;
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+h1 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #333;
 }
 
 #alarmSet {
@@ -12,4 +30,29 @@
 
 h1 {
   text-align: center;
+  border: 2px solid #ddd;
+  border-radius: 6px;
+}
+
+button {
+  padding: 10px 18px;
+  margin: 5px;
+  font-size: 15px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+#set {
+  background: #4caf50;
+  color: white;
+}
+
+#stop {
+  background: #e53935;
+  color: white;
+}
+
+button:hover {
+  opacity: 0.85;
 }