+
+
+
diff --git a/Sprint-3/Prep/script.js b/Sprint-3/Prep/script.js
new file mode 100644
index 000000000..5ea0f6518
--- /dev/null
+++ 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
new file mode 100644
index 000000000..e69de29bb
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..e61c108c5 100644
--- 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
+ //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
index 48e2e80d9..92ee9fc1b 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -1,10 +1,10 @@
-
+
- Title here
+ Vampires Alarm Clock App
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..cea3d8e10 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,13 +1,13 @@
-
+
- Title here
+ Quote Generator App
-
hello there
+
Quote Keeper
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..0c188ee60 100644
--- 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
new file mode 100644
index 000000000..3a025c3f0
--- /dev/null
+++ 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"
+ }
+}