CodeYourFuture · sarahalmadi · Apr 19, 2026 · Apr 19, 2026 · Apr 25, 2026 · Apr 25, 2026
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>
+    <script defer src="script.js"></script>
+  </head>
+  <body>
+    <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,38 @@
+//Given an textarea and a character limit of 200
+//When a user has already typed 200 characters into the textarea
+//Then the interface should update with how many characters they've got left
+
+//steps?
+
+//1. Define the character limit of 200
+//2. Access the textarea in the DOM
+//3. When an event occurs, we have to calculate the number of the characters left.
+//4. update the text with the actual characters left.
+
+const characterLimit = 200;
+const textArea = document.querySelector("#comment-input");
+//console.log(textArea, "<------- textArea");
+// keyup event is fired when a key is released
+// react to this event!
+//console.log(textArea.value);   //returned null, we need to addEventListener to the object textArea and two argument inside the brackets.
+
+//function updateCharacterLimit() {
+
+textArea.addEventListener("keyup", function updateCharacterLimit() {
+  //keyup is the type of event
+  // the second argument is the function we want to execute.
+  //when the keyup takes a place with the user's interaction, the function will be executed every single time.
+  //console.log("keyup event is firing...");
+  //});
+  // console.log(textArea.value.length, "textArea value");
+  //console.log(characterLimit, "characterLimit");
+  //});
+  const charactersLeft = characterLimit - textArea.value.length;
+  //console.log(charactersLeft, "<------ charactersLeft ");
+  //});
+  const charLimitInfo = document.querySelector("#character-limit-info");
+  //charLimitInfo.innerText = charactersLeft;
+  charLimitInfo.innerText = `You have ${charactersLeft} characters remaining`;
+});
+
+//textArea.addEventListener("keyup", function updateCharacterLimit);
diff --git a/Sprint-3/Prep/style.css b/Sprint-3/Prep/style.css
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,5 +1,67 @@
-function setAlarm() {}
+// Global Variables
+// timeLeft:  stores how many seconds remain in the countdown.
+// timerId: stores the ID returned by setInterval() so that we can stop the timer later.
+// We need to store these values outside the function, in order to: 1. update the time every second
+// Stop the timer when it hits 00:00
+// Stop the timer when the user clicks "Stop Alarm"
+let timeLeft = 0;
+let timerId = null;
 
+//This function runs when the user clicks "Set Alarm"
+function setAlarm() {
+  //Gets the value from the <input id="alarmSet">
+  //The value is a string like "90" or "10"
+  const input = document.getElementById("alarmSet").value;
+  //We use this to convert "90" --> 90 bcz we can’t subtract from a string, we need a real number to count down.
+  // Store it the Global Variable "timeLeft"
+  timeLeft = Number(input);
+  // this shows the initial time, and it must happen before the countdown starts.
+  //It shows immediately the formatted time(mm:ss) on the page.
+  updateTimeDisplay(timeLeft);
+
+  if (timerId) {
+    clearInterval(timerId);
+  }
+  //Starts the Countdown, this is the purpose of using "setInterval"
+  timerId = setInterval(() => {
+    //Each tick subtract 1 second from the remaining time.
+    timeLeft--;
+    // Update the time display every second.
+    updateTimeDisplay(timeLeft);
+
+    //When the time reaches 00:00 "Zero"
+    //stop the countdown
+    //Alarm sound plays continuously
+    //Change the background color
+
+    if (timeLeft <= 0) {
+      clearInterval(timerId);
+      playAlarm();
+      document.body.style.backgroundColor = "red";
+    }
+  }, 1000);
+}
+//This function will convert raw seconds mm:ss.
+function updateTimeDisplay(seconds) {
+  //Calculate the minutes by dividing seconds by 60.
+  //Use Math.floor to get rid of decimal number and keep whole minutes.
+  //Convert to a string and add a leading zero if needed.
+  const mm = String(Math.floor(seconds / 60)).padStart(2, "0");
+  //Calculate the seconds.
+  //Use % which gives the remainder.
+  //convert to string and pad with zero.
+  const ss = String(seconds % 60).padStart(2, "0");
+  //Update the DOM "Make the countdown" visible.
+  document.getElementById("timeRemaining").innerText = `${mm}:${ss}`;
+}
+//This function runs when the user clicks Stop Alarm
+function pauseAlarm() {
+  audio.pause();
+  //Resets the audio.
+  audio.currentTime = 0;
+  //Resets the background color.
+  document.body.style.backgroundColor = "";
+}
 // DO NOT EDIT BELOW HERE
 
 var audio = new Audio("alarmsound.mp3");

diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <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>Vampires Alarm Clock App</title>
   </head>
   <body>
     <div class="centre">

diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote Generator App</title>
     <script defer src="quotes.js"></script>
   </head>
   <body>
-    <h1>hello there</h1>
+    <h1>Quote Keeper</h1>
     <p id="quote"></p>
     <p id="author"></p>
     <button type="button" id="new-quote">New quote</button>

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -2,7 +2,24 @@
 
 // pickFromArray is a function which will return one item, at
 // random, from the given array.
-//
+//Update the quote by using this function
+function displayRandomQuote() {
+  const randomQuote = pickFromArray(quotes);
+
+  const quoteP = document.getElementById("quote");
+  const authorP = document.getElementById("author");
+
+  quoteP.innerText = randomQuote.quote;
+  authorP.innerText = randomQuote.author;
+}
+
+// Once the page loaded run this.
+window.addEventListener("load", () => {
+  displayRandomQuote();
+
+  const button = document.getElementById("new-quote");
+  button.addEventListener("click", displayRandomQuote);
+});
 // Parameters
 // ----------
 // choices: an array of items to pick from.

diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "module-data-groups",
+  "version": "1.0.0",
+  "description": "Like learning a musical instrument, programming requires daily practice.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sarahalmadi/Module-Data-Groups.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "bugs": {
+    "url": "https://github.com/sarahalmadi/Module-Data-Groups/issues"
+  },
+  "homepage": "https://github.com/sarahalmadi/Module-Data-Groups#readme",
+  "devDependencies": {
+    "jest": "^30.3.0"
+  }
+}