diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..d467eb5fd 100644
--- 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
index 48e2e80d9..ff2d3b453 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -4,7 +4,7 @@
- Title here
+ Alarm clock app
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..5e6780e8f 100644
--- 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;
}