diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..45408e183 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,25 +1,60 @@
-function setAlarm() {}
+let countdown;
+let isPaused = false;
+let timeRemaining;
+
+function setAlarm(){
+ const inputField = document.getElementById("alarmSet");
+ timeRemaining = parseInt(inputField.value);
+
+ const updateTitle = () => {
+ const minutes = String(Math.floor(timeRemaining/60)).padStart(2, '0'); // minutes
+ const seconds = String(timeRemaining % 60).padStart(2, '0'); // seconds
+ document.getElementById("timeRemaining").innerText = `Time Remaining: ${minutes}:${seconds}`;
+ };
+
+ updateTitle();
+
+ countdown = setInterval(() => {
+ if (!isPaused){
+ timeRemaining = timeRemaining - 1;
+ updateTitle();
+
+ if (timeRemaining <= 0) {
+ clearInterval(countdown);
+ playAlarm();
+ }
+ }
+ }, 1000);
+}
+
+function pauseTimer() {
+isPaused = !isPaused;
+document.getElementById("pause").innerText = isPaused ? "Resume Timer" : "Pause Timer";
+}
// DO NOT EDIT BELOW HERE
var audio = new Audio("alarmsound.mp3");
-
function setup() {
document.getElementById("set").addEventListener("click", () => {
setAlarm();
});
-
document.getElementById("stop").addEventListener("click", () => {
pauseAlarm();
});
+
+ document.getElementById("pause").addEventListener("click", () => {
+ pauseTimer();
+ });
}
function playAlarm() {
audio.play();
}
-
function pauseAlarm() {
audio.pause();
}
-
window.onload = setup;
+
+
+
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
index 48e2e80d9..cfd3fdcb4 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -4,7 +4,7 @@
- Title here
+ Alarm Clock App
@@ -13,6 +13,7 @@
Time Remaining: 00:00
+
diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json
index b532c6908..8cf7aea88 100644
--- a/Sprint-3/alarmclock/package.json
+++ b/Sprint-3/alarmclock/package.json
@@ -19,7 +19,7 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/user-event": "^13.5.0",
"jest": "^29.2.2",
- "jest-environment-jsdom": "^29.2.2"
+ "jest-environment-jsdom": "^30.0.4"
},
"jest": {
"setupFilesAfterEnv": [
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..894647004 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -1,15 +1,35 @@
-.centre {
- position: fixed;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
-
#alarmSet {
- margin: 20px;
-}
+ margin: 20px 40px;
+ padding: 20px;
+ max-width: 400px;
+ height: 100px;
+ font-size: clamp(1rem, 2vw, 2rem);
+ box-shadow: #1b58db66 10px 10px;
+
+ #alarmSet:focus {
+ outline: none;
+ box-shadow: rgba(29, 240, 103, 0.871) 20px 20px;
+ transform: translate(-10px, -10px);
+ }
-h1 {
- text-align: center;
-}
+ button {
+ background-color: #1b58db66;
+ border: none;
+ color: white;
+ padding: 15px 32px;
+ display: inline-block;
+ font-size: clamp(1rem, 2vw, 2rem);
+ margin-top: 60px;
+ margin-left: 20px;
+ margin-right: 20px;
+ cursor: pointer;
+ box-shadow: rgba(0, 0, 0, 0.114) 10px 10px;
+ border-radius: 3px;
+ transition: all cubic-bezier(0.165, 0.84, 0.44, 1) 0.9s;
+
+ }
+
+ button:hover {
+ box-shadow: #042b7ec4 20px 20px;
+ transform: translate(-10px, -10px);
+ }