CodeYourFuture · Grajales-K · Jan 17, 2025 · Jan 17, 2025 · Jan 18, 2025 · Jan 18, 2025
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,8 +1,62 @@
-function setAlarm() {}
+let countdown; // Declare countdown globally to make it accessible
 
-// DO NOT EDIT BELOW HERE
+function setAlarm() {
+  // Clear any previous timer to prevent multiple timers running simultaneously
+  clearInterval(countdown);
+
+  // Get the value entered by the user in the input field and convert it to an integer
+  let inputTime = parseInt(document.getElementById("alarmSet").value);
+
+  // If the input is not a valid number or is less than or equal to 0, show an alert and stop execution
+  if (isNaN(inputTime) || inputTime <= 0) {
+    alert("Please type or select your time 👇⏰");
+    return;
+  }
+
+  // Store the remaining time for the countdown
+  let timeRemaining = inputTime;
+
+  /**
+   * Function to format the time into "MM:SS" format
+   * @param {number} seconds - The number of seconds to be formatted
+   * @returns {string} - The formatted time in the form "Time Remaining: MM:SS"
+   */
+  function formatTime(seconds) {
+    // Calculate minutes and remaining seconds
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+
+    // Return the formatted time as a string
+    return `Time Remaining: ${minutes
+      .toString()
+      .padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
+  }
 
-var audio = new Audio("alarmsound.mp3");
+  // Update the time display on the page with the initial time
+  document.getElementById("timeRemaining").textContent =
+    formatTime(timeRemaining);
+
+  // Start the countdown timer to update the time every second
+  countdown = setInterval(function () {
+    // Otherwise, decrease the remaining time by 1 second
+    timeRemaining--;
+
+    // If the time reaches 0, stop the countdown and play the alarm
+    if (timeRemaining <= 0) {
+      clearInterval(countdown); // Stop the countdown timer
+      document.getElementById("timeRemaining").textContent = formatTime(0); // Ensure "00:00" is displayed
+      playAlarm(); // Play the alarm sound
+    } else {
+      // Update the time display on the page with the updated time
+      document.getElementById("timeRemaining").textContent =
+        formatTime(timeRemaining);
+    }
+  }, 1000); // The timer runs every 1000 milliseconds (1 second)
+}
+
+// DO NOT EDIT BELOW HERE
+let soundAlarm = new Audio("trebolClan.mp3");
+let SoundStop = new Audio("stopAlarm.mp3");
 
 function setup() {
   document.getElementById("set").addEventListener("click", () => {
@@ -15,11 +69,14 @@ function setup() {
 }
 
 function playAlarm() {
-  audio.play();
+  soundAlarm.play();
 }
 
 function pauseAlarm() {
-  audio.pause();
+  clearInterval(countdown);
+  soundAlarm.pause();
+  soundAlarm.currentTime = 0;
+  SoundStop.play();
 }
 
 window.onload = setup;
diff --git a/Sprint-3/alarmclock/clock.jpg b/Sprint-3/alarmclock/clock.jpg
diff --git a/Sprint-3/alarmclock/favicon.png b/Sprint-3/alarmclock/favicon.png
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -3,15 +3,17 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <link rel="Clock icon" href="/Sprint-3/alarmclock/clock.jpg" />
+    <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"  />
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
     </div>

diff --git a/Sprint-3/alarmclock/stopAlarm.mp3 b/Sprint-3/alarmclock/stopAlarm.mp3
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
@@ -1,15 +1,71 @@
+/* General Styles */
+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;
+}
+
+/* Centered Container */
 .centre {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
+  background: #ffffff;
+  padding: 20px 40px;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+
 }
 
+/* Input Field */
 #alarmSet {
-  margin: 20px;
+  margin: 15px 0;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 16px;
+  width: 80%;
+  max-width: 300px;
+  box-sizing: border-box;
 }
 
-h1 {
-  text-align: center;
+#alarmSet::placeholder {
+  color: #888;
+  font-style: italic;
+  font-family: 'Arial', sans-serif;
+  font-size: 16px;
+}
+
+/* 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: #5753d3;
+  transform: translateY(-2px);
 }
+
+button:active {
+  background-color: #4b47b0;
+  transform: translateY(0);
+}
+
+/* Headings */
+h1 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: #6c63ff;
+}
diff --git a/Sprint-3/alarmclock/trebolClan.mp3 b/Sprint-3/alarmclock/trebolClan.mp3