CodeYourFuture · Grajales-K · Apr 1, 2026 · Apr 6, 2026 · Apr 6, 2026 · Apr 6, 2026
diff --git 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
diff --git a/Sprint-3/alarmclock/assets/stopAlarm.mp3 b/Sprint-3/alarmclock/assets/stopAlarm.mp3
diff --git a/Sprint-3/alarmclock/assets/trebolClan.mp3 b/Sprint-3/alarmclock/assets/trebolClan.mp3
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -4,13 +4,19 @@
     <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>
+    <meta
+      name="description"
+      content="This page is an alarm clock with an alert to aware the user type or 
+      select the time. This include two sound effects"
+    />
+    <link rel="icon" type="image/png" href="assets/favicon.png" />
+    <title>Alarm clock app</title>
   </head>
   <body>
     <div class="centre">
       <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <label for="alarmSet">Set time to:</label>
-      <input id="alarmSet" type="number" />
+      <input id="alarmSet" type="number" placeholder="Type or select the time -->" min="0" step="1"/>
 
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>

diff --git 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);
+}