diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..99bb70799 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,35 @@
-function setAlarm() {}
+let alarmInterval;
+
+function setAlarm() {
+ clearInterval(alarmInterval);
+ let timeRemaining = document.getElementById("alarmSet");
+ const display = document.getElementById("timeRemaining");
+ //what ever we input is turned into seconds
+ let totalSeconds = parseInt(timeRemaining.value);
+
+ if (isNaN(totalSeconds) || totalSeconds <= 0) return;
+
+ const formattedTime = (seconds) => {
+ const mins = Math.floor(seconds / 60)
+ .toString()
+ .padStart(2, "0");
+ const secs = (seconds % 60).toString().padStart(2, "0");
+ return `${mins}:${secs}`;
+ };
+
+ display.innerHTML = `Time Remaining: ${formattedTime(totalSeconds)}`;
+
+ alarmInterval = setInterval(() => {
+ totalSeconds--;
+
+ display.innerHTML = `Time Remaining: ${formattedTime(totalSeconds)}`;
+
+ if (totalSeconds <= 0) {
+ clearInterval(alarmInterval);
+ playAlarm();
+ }
+ }, 1000);
+}
// 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..d604b5a5f 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -1,4 +1,89 @@
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ font-family: "Roboto", "Segoe UI", sans-serif;
+}
+
+body {
+ background: linear-gradient(#d49562, #9e897c);
+ color: #797d8131;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* Centered card*/
.centre {
+ background-color: #a16093;
+ padding: 40px 60px;
+ border-radius: 10px;
+ text-align: center;
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+ min-width: 300px;
+}
+
+/* Time display */
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 30px;
+ font-weight: 600;
+ color: #f1bcaf;
+ letter-spacing: 1px;
+}
+
+/* Input time*/
+#alarmSet {
+ padding: 4px 15px 6px 15px;
+ font-size: 1.3rem;
+ border-radius: 4px;
+ border: 2px solid #cbc1bc;
+ outline: none;
+ margin-bottom: 20px;
+ margin-right: 10px;
+ width: 100px;
+ text-align: center;
+ background-color: #e8dfdb;
+ color: #121212;
+}
+
+/* Buttons */
+button {
+ padding: 12px 25px;
+ margin: 10px;
+ font-size: 1rem;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+ font-weight: 600;
+ transition: all 0.3s ease-in-out;
+}
+
+/* Set Alarm */
+#set {
+ background-color: #2b2c2d;
+ color: #fff;
+}
+
+#set:hover {
+ background-color: #2b2c2d7b;
+ transform: translateY(-2px);
+}
+
+/* Stop Alarm */
+#stop {
+ background-color: #2b2c2d;
+ color: #fff;
+}
+
+#stop:hover {
+ background-color: brown;
+ transform: translateY(-1px);
+}
+
+/* keep old styling in case you need to revert back */
+/* .centre {
position: fixed;
top: 50%;
left: 50%;
@@ -12,4 +97,4 @@
h1 {
text-align: center;
-}
+} */