diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..9c3f174a2 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,77 @@
-function setAlarm() {}
+let inputTime = 0;
+let timer = null;
+let changeBgColor = false;
+
+function setAlarm() {
+  resetState();
+
+  inputTime = Number(document.querySelector("#alarmSet").value);
+
+  if (!Number.isInteger(inputTime) || inputTime < 0) {
+    return;
+  }
+  if (inputTime === 10) {
+    changeBgColor = true;
+  } else if (inputTime === 0) {
+    playAlarm();
+  }
+
+  displayTime(inputTime);
+  timer = setInterval(countDown, 1000);
+}
+
+function displayTime(totalTime) {
+  const seconds = totalTime % 60;
+  const minutes = (totalTime - seconds) / 60;
+  const timeLeft = document.querySelector("#theTime");
+  timeLeft.innerText = `${minutes.toString().padStart(2, 0)}:${seconds
+    .toString()
+    .padStart(2, 0)}`;
+}
+
+function countDown() {
+  inputTime--;
+  if (inputTime >= 0) {
+    displayTime(inputTime);
+  }
+
+  if (inputTime === 0) {
+    playAlarm();
+    document.getElementById("alarmSet").value = "";
+
+    if (changeBgColor) {
+      changeColor();
+      changeBgColor = false;
+    }
+
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+function changeColor() {
+  const bgColor = document.querySelector("div");
+  bgColor.classList.add("myBgColor");
+}
+
+function resetState() {
+  if (typeof audio !== "undefined" && audio) {
+    audio.pause();
+    try {
+      audio.currentTime = 0;
+    } catch (e) {} // audio may not be ready
+    audio.loop = false;
+  }
+
+  if (timer) {
+    clearInterval(timer);
+  }
+
+  const container = document.querySelector("div");
+  if (container && container.classList.contains("myBgColor")) {
+    container.classList.remove("myBgColor");
+  }
+}
 
 // DO NOT EDIT BELOW HERE
 
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
index 48e2e80d9..d0929d540 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -4,11 +4,13 @@
     <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">
-      <h1 id="timeRemaining">Time Remaining: 00:00</h1>
+      <div id="timeRemaining">
+        Time Remaining: <span id="theTime">00:00</span>
+      </div>
       <label for="alarmSet">Set time to:</label>
       <input id="alarmSet" type="number" />
 
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..946c279f2 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -6,10 +6,34 @@
   transform: translate(-50%, -50%);
 }
 
-#alarmSet {
+.myBgColor {
+  background-color: #f0f8ff;
+}
+
+#theTime {
+  font-size: 24px;
+  text-align: center;
   margin: 20px;
 }
 
-h1 {
+#timeRemaining {
+  font-size: 24px;
   text-align: center;
+  margin: 20px;
+}
+
+#alarmSet {
+  margin: 20px;
+  font-size: 18px;
+  text-align: center;
+}
+#set {
+  font-size: 14px;
+  padding: 5px;
+}
+
+#stop {
+  font-size: 14px;
+  padding: 5px;
+  margin-left: 20px;
 }
