diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..dd4deae69 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,8 +1,85 @@
-function setAlarm() {}
+let countdownInterval;
+let flashInterval;
+
+let audio = new Audio("assets/trebolClan.mp3");
+let stopAudio = new Audio("assets/stopAlarm.mp3");
+
+// helper to reset the app to its initial state
+function resetApp() {
+ clearInterval(countdownInterval);
+ clearInterval(flashInterval);
+ document.body.style.backgroundColor = "white";
+
+
+ if(audio){
+ audio.pause();
+ audio.currentTime = 0;
+ }
+}
+
+//function to changing colors animation.
+function startBackgroundAnimation() {
+ let repetitions = 0;
+ flashInterval = setInterval(() => {
+ document.body.style.backgroundColor = `rgb(
+ ${Math.floor(Math.random() * 256)},
+ ${Math.floor(Math.random() * 256)},
+ ${Math.floor(Math.random() * 256)})`;
+
+ repetitions++;
+ if (repetitions > 100) {
+ clearInterval(flashInterval);
+ document.body.style.backgroundColor = "white";
+ }
+ }, 200);
+}
+
+
+function setAlarm() {
+ resetApp();
+
+ const rawValue = document.getElementById("alarmSet").value;
+ const inputTime = Number(rawValue);
+
+ if (!Number.isInteger(inputTime) || inputTime <= 0) {
+ alert("Please type or select a valid positive time in seconds 👇⏰");
+ return;
+ }
+
+ let timeLeft = inputTime;
+ updateDisplay(timeLeft);
+
+ countdownInterval = setInterval(() => {
+ timeLeft--;
+
+ if (timeLeft <= 0) {
+ clearInterval(countdownInterval);
+ updateDisplay(0);
+ playAlarm();
+
+ startBackgroundAnimation();
+
+ } else {
+ updateDisplay(timeLeft);
+ }
+ }, 1000);
+}
+
+function updateDisplay(seconds) {
+ const minutes = Math.floor(seconds / 60);
+ const remainingSeconds = seconds % 60;
+
+ const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
+ const formattedSeconds =
+ remainingSeconds < 10 ? `0${remainingSeconds}` : remainingSeconds;
+
+ const display = `Time Remaining: ${formattedMinutes}:${formattedSeconds}`;
+
+ document.getElementById("timeRemaining").innerText = display;
+}
// DO NOT EDIT BELOW HERE
-var audio = new Audio("alarmsound.mp3");
function setup() {
document.getElementById("set").addEventListener("click", () => {
@@ -19,7 +96,8 @@ function playAlarm() {
}
function pauseAlarm() {
- audio.pause();
+ resetApp();
+ stopAudio.play();
}
window.onload = setup;
diff --git a/Sprint-3/alarmclock/assets/favicon.png b/Sprint-3/alarmclock/assets/favicon.png
new file mode 100644
index 000000000..b3730e026
Binary files /dev/null and b/Sprint-3/alarmclock/assets/favicon.png differ
diff --git a/Sprint-3/alarmclock/assets/stopAlarm.mp3 b/Sprint-3/alarmclock/assets/stopAlarm.mp3
new file mode 100644
index 000000000..f476db37d
Binary files /dev/null and b/Sprint-3/alarmclock/assets/stopAlarm.mp3 differ
diff --git a/Sprint-3/alarmclock/assets/trebolClan.mp3 b/Sprint-3/alarmclock/assets/trebolClan.mp3
new file mode 100644
index 000000000..c15e9d3df
Binary files /dev/null and b/Sprint-3/alarmclock/assets/trebolClan.mp3 differ
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
index 48e2e80d9..af7703edf 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -4,13 +4,19 @@
- Title here
+
+
+ Alarm clock app
Time Remaining: 00:00
-
+
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..809e7d795 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -1,15 +1,65 @@
+
+
+body{
+ background-color: #f7f3f2;
+ color: #333;
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+
.centre {
- position: fixed;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
+ padding: 2rem 2rem;
+ border-radius: 12px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
+ text-align: center;
}
+/* Input Field */
#alarmSet {
- margin: 20px;
+ margin: 1rem ;
+ padding: 1rem;
+ border: 1px solid #ccc;
+ border-radius: 6px;
+ font-size: 1rem;
+ max-width: 300px;
+ box-sizing: border-box;
+}
+
+#alarmSet::placeholder {
+ color: #888;
+ font-style: italic;
+ font-family: 'Arial', sans-serif;
+ font-size: 0.8rem;
}
h1 {
text-align: center;
}
+
+/* Button */
+button {
+ background-color: #6c63ff;
+ color: white;
+ border: none;
+ border-radius: 6px;
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+button:hover {
+ background-color: #dedee8;
+ color: #6c63ff;
+ transform: translateY(-2px);
+}
+
+button:active {
+ background-color: #4b47b0;
+ transform: translateY(0);
+}
\ No newline at end of file