CodeYourFuture · HatefEidi · Mar 14, 2025 · Mar 18, 2025 · Mar 18, 2025 · Mar 25, 2025
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 .DS_Store
 .vscode
-**/.DS_Store
+**/.DS_Store
+.qodo
diff --git a/Sprint-3/.gitignore b/Sprint-3/.gitignore
@@ -0,0 +1 @@
+.qodo
diff --git a/Sprint-3/Prep/index.html b/Sprint-3/Prep/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <script defer src="./script.js"></script>
+    <section>
+      <h3>Example character limit comment component</h3>
+      <label for="comment-input">
+        Please enter your comment in the text area below
+      </label>
+      <textarea
+        id="comment-input"
+        name="comment-input"
+        rows="5"
+        maxlength="200"
+      ></textarea>
+      <p id="character-limit-info">You have 200 characters remaining</p>
+    </section>
+  </body>
+</html>
diff --git a/Sprint-3/Prep/script.js b/Sprint-3/Prep/script.js
@@ -0,0 +1,39 @@
+// Given an textarea and a character limit of 200
+// When a user types characters into the textarea
+// // Then the interface should update with how many characters they’ve got left.
+
+//Steps
+// 1. Set a character limit ot the text area
+// 2. Access the textarea in the DOM
+// 3. When an event occurs, we compare characterLimit with the current length of the text area, 
+//4. We must calculate the characters left
+//.5 Update the text with the actual characters left
+
+
+const characterLimit =200;
+const textArea = document.querySelector('#comment-input');
+
+
+
+//Keyup event is fired when a key is released 
+//React to this event!
+
+//Run some code, whenever the keyup event takes place?
+textArea.addEventListener('keyup', function updateCharacterLimit(event) {
+    const characterLeft = characterLimit - textArea.value.length;
+    const characterLimitInfo = document.querySelector('#character-limit-info');
+
+    characterLimitInfo.innerText = ` You have ${characterLeft} characters remaining `;
+});
+
+//We could also create the event function outside of the event listener
+// function updateCharacterLimit(event) {
+//     const characterLeft = characterLimit - textArea.value.length;
+//     const charLimitInfo = document.querySelector('#character-limit-info');
+
+//     characterLimitInfo.innerText = ` You have ${characterLeft} characters remaining `;
+// }
+
+// textArea.addEventListener('keyup',updateCharacterLimit);
+
+// Notice if we build the function outside of the event listener, we can call it directly from the event listener and we don't use parenthesis anymore
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,7 +1,67 @@
-function setAlarm() {}
+function setAlarm() {
+  //Converting the time of now value to seconds from milliseconds
+  //Getting the time value from the input field, converting it into number, this will be in seconds
+  const alarmTime = Number(document.getElementById("alarmSet").value);
+
+   document.getElementById('timeRemaining').innerText="Time Remaining: "+timeFormatter(alarmTime);
+   let currentTime=0;
 
-// DO NOT EDIT BELOW HERE
+  const checkAlarm=setInterval(() => {
+
+    //Calculating current time inside the interval
+     currentTime++;
+
+    //Calculating the difference between the alarm time and the current time
+    const diff = alarmTime - currentTime;
+
+    //Updating the time remaining text in the HTML element
+    document.getElementById('timeRemaining').innerText="Time Remaining: "+timeFormatter(diff);
+
+
+
+    //If the difference is less than or equal to zero, stop the interval and play the alarm sound
+    if(diff <= 0){
+      clearInterval(checkAlarm);
+      playAlarm();
+
+
+    }
+  }, 1000);
+}
+
+//formatting remaining seconds in the format of MM:SS
+function timeFormatter(seconds) {
+  const remainingSeconds = seconds % 60;
+  const remainingMinutes = Math.floor(seconds / 60);
+  return timePadder(remainingMinutes, remainingSeconds);
+}
+//Formatting the time in MM:SS format
+function timePadder(min , sec){
+  const minPadded = min.toString().padStart(2, '0');
+  const secPadded = sec.toString().padStart(2, '0');
+  return `${minPadded}:${secPadded}`;
+
+}
+
+let flashInterval;  // To store the interval ID for flashing
+
+function flashBackground() {
+  let isRed = false;
+
+  flashInterval = setInterval(() => {
+    // Toggle the background color between red and white
+    document.body.style.backgroundColor = isRed ? '#FDF7FA' : '#D67AB1';
+    isRed = !isRed;
+  }, 1000); // Flash every second
+}
 
+
+function stopFlashing() {
+  clearInterval(flashInterval);  // Stop the flashing by clearing the interval
+  document.body.style.backgroundColor = 'white';  // Reset the background color
+}
+
+// DO NOT EDIT BELOW HERE
 var audio = new Audio("alarmsound.mp3");
 
 function setup() {
@@ -16,10 +76,14 @@ function setup() {
 
 function playAlarm() {
   audio.play();
+  //to flash background
+  flashBackground();
 }
 
 function pauseAlarm() {
   audio.pause();
+  //to stop flashing background
+  stopFlashing();
 }
 
 window.onload = setup;
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -4,7 +4,7 @@
     <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>
+    <title>Alarm Clock App</title>
   </head>
   <body>
     <div class="centre">