diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..c0b23e7be 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,37 @@
-function setAlarm() {}
+let timer;
+function setAlarm() {
+ const input = document.getElementById("alarmSet");
+ let seconds = Number(input.value);
+
+ const timeRemaining = document.getElementById("timeRemaining");
+
+ clearInterval(timer);
+
+ function updateDisplay() {
+ const minutes = Math.floor(seconds / 60);
+ const remainingSeconds = seconds % 60;
+
+ const formattedTime =
+ String(minutes).padStart(2, "0") +
+ ":" +
+ String(remainingSeconds).padStart(2, "0");
+
+ timeRemaining.textContent = `Time Remaining: ${formattedTime}`;
+ }
+
+ updateDisplay();
+
+ timer = setInterval(() => {
+ if (seconds > 0) {
+ seconds--;
+ updateDisplay();
+ } else {
+ clearInterval(timer);
+ playAlarm();
+ document.body.style.backgroundColor = "red";
+ }
+ }, 1000);
+}
// DO NOT EDIT BELOW HERE
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
index 48e2e80d9..21755f408 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -1,16 +1,17 @@
-
+
- Title here
+ Alarm clock app
+
⏰ Alarm Clock
Time Remaining: 00:00
-
+
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..5ec0cfde1 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -13,3 +13,37 @@
h1 {
text-align: center;
}
+
+body {
+ background-color: #f4f4f4;
+ font-family: Arial, sans-serif;
+}
+
+.centre {
+ background-color: white;
+ padding: 30px;
+ border-radius: 10px;
+ box-shadow: 0 4px 10px gray;
+}
+
+button {
+ padding: 10px 15px;
+ margin: 5px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+#set {
+ background-color: green;
+ color: white;
+}
+
+#stop {
+ background-color: red;
+ color: white;
+}
+
+button:hover {
+ opacity: 0.9;
+}