diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..8fa7dce16 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,57 @@
-function setAlarm() {}
+let intervalID = null;
+let seconds = 0;
+let isPaused = false;
+
+function setAlarm() {
+ const alarmSetInputElement = document.getElementById("alarmSet");
+ const setAlarmButton = document.getElementById("set");
+ const delay = 1 * 1000;
+
+ const updateTimeRemaining = () => {
+ if (!isPaused && seconds <= 0) {
+ document.body.className = "flash";
+ playAlarm();
+ clearInterval(intervalID);
+ intervalID = null;
+ setAlarmButton.textContent = "Set Alarm";
+ return;
+ }
+
+ seconds--;
+ setRemainingTime(seconds);
+ };
+
+ if (intervalID) {
+ clearInterval(intervalID);
+ intervalID = null;
+ isPaused = true;
+ setAlarmButton.textContent = "Resume Alarm";
+ return;
+ }
+
+ if (isPaused) {
+ isPaused = false;
+ intervalID = setInterval(updateTimeRemaining, delay);
+ setAlarmButton.textContent = "Pause Alarm";
+ return;
+ }
+
+ seconds = Number(alarmSetInputElement.value);
+ setRemainingTime(seconds);
+ intervalID = setInterval(updateTimeRemaining, delay);
+ setAlarmButton.textContent = "Pause Alarm";
+}
+
+function setRemainingTime(seconds) {
+ const timeString = new Date(seconds * 1000).toLocaleTimeString([], {
+ minute: "numeric",
+ second: "numeric",
+ });
+
+ document.getElementById(
+ "timeRemaining"
+ ).innerHTML = `Time Remaining: ${timeString}`;
+}
// DO NOT EDIT BELOW HERE
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..66e6249b6 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -13,3 +13,16 @@
h1 {
text-align: center;
}
+
+.flash {
+ animation: flash 500ms infinite;
+}
+
+@keyframes flash {
+ 0%, 49% {
+ background: white;
+ }
+ 50%, 100% {
+ background: red;
+ }
+}
\ No newline at end of file