From d0fa6f9159fd0c1b8ab2cd45045037f8f071346d Mon Sep 17 00:00:00 2001 From: Sarah Almadi Date: Sun, 19 Apr 2026 07:55:28 +0200 Subject: [PATCH 1/7] Add prep folder for Sprint-3 --- Sprint-3/Prep/Week9/index.html | 0 Sprint-3/Prep/script.js | 0 Sprint-3/Prep/style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 Sprint-3/Prep/Week9/index.html create mode 100644 Sprint-3/Prep/script.js create mode 100644 Sprint-3/Prep/style.css diff --git a/Sprint-3/Prep/Week9/index.html b/Sprint-3/Prep/Week9/index.html new file mode 100644 index 000000000..e69de29bb diff --git a/Sprint-3/Prep/script.js b/Sprint-3/Prep/script.js new file mode 100644 index 000000000..e69de29bb diff --git a/Sprint-3/Prep/style.css b/Sprint-3/Prep/style.css new file mode 100644 index 000000000..e69de29bb From 75988867bd080a3d9d1e58cac3f7c74b4442a38a Mon Sep 17 00:00:00 2001 From: Sarah Almadi Date: Sun, 19 Apr 2026 20:20:33 +0200 Subject: [PATCH 2/7] Do the prep for week 9 --- Sprint-3/Prep/Week9/index.html | 0 Sprint-3/Prep/index.html | 24 +++++++++++++++++++++ Sprint-3/Prep/script.js | 38 ++++++++++++++++++++++++++++++++++ 3 files changed, 62 insertions(+) delete mode 100644 Sprint-3/Prep/Week9/index.html create mode 100644 Sprint-3/Prep/index.html diff --git a/Sprint-3/Prep/Week9/index.html b/Sprint-3/Prep/Week9/index.html deleted file mode 100644 index e69de29bb..000000000 diff --git a/Sprint-3/Prep/index.html b/Sprint-3/Prep/index.html new file mode 100644 index 000000000..fed6e5a18 --- /dev/null +++ b/Sprint-3/Prep/index.html @@ -0,0 +1,24 @@ + + + + + + Document + + + +
+

Example character limit comment component!!

+ + +

You have 200 characters remaining

+
+ + diff --git a/Sprint-3/Prep/script.js b/Sprint-3/Prep/script.js index e69de29bb..5ea0f6518 100644 --- 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); From 03df76586ea7f88e55952cf214bd3ca93535425d Mon Sep 17 00:00:00 2001 From: Sarah Almadi Date: Sat, 25 Apr 2026 08:59:15 +0200 Subject: [PATCH 3/7] Update The Title In mm:ss Format To Decrement it by 1 second. --- Sprint-3/alarmclock/alarmclock.js | 64 ++++++++++++++++++++++++++++++- Sprint-3/alarmclock/index.html | 4 +- package.json | 24 ++++++++++++ 3 files changed, 89 insertions(+), 3 deletions(-) create mode 100644 package.json 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..61c94a0d5 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -1,10 +1,10 @@ - + - Title here +
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" + } +} From 9b9a0006b64467abcb2817413e7c9a91687983bd Mon Sep 17 00:00:00 2001 From: Sarah Almadi Date: Sat, 25 Apr 2026 09:21:32 +0200 Subject: [PATCH 4/7] Add Title To The App --- Sprint-3/alarmclock/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 61c94a0d5..92ee9fc1b 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - + Vampires Alarm Clock App
From a14984fe8a7489fb3b802086f99be26479d58df1 Mon Sep 17 00:00:00 2001 From: Sarah Almadi Date: Tue, 28 Apr 2026 17:52:58 +0200 Subject: [PATCH 5/7] Add Function And Parameters --- Sprint-3/quote-generator/quotes.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..334a298e4 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. From fcd29505805c43b267ed61f1e41ad857bac6e0a7 Mon Sep 17 00:00:00 2001 From: Sarah Almadi Date: Tue, 28 Apr 2026 18:02:55 +0200 Subject: [PATCH 6/7] Change The Title --- Sprint-3/quote-generator/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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

From e3eb1419250ee654a8f6a91bdf4fa3c1bb514af4 Mon Sep 17 00:00:00 2001 From: Sarah Almadi Date: Thu, 30 Apr 2026 00:00:44 +0200 Subject: [PATCH 7/7] Add quote generator implementation --- Sprint-3/quote-generator/quotes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 334a298e4..0c188ee60 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -13,7 +13,7 @@ function displayRandomQuote() { authorP.innerText = randomQuote.author; } -// Once the page loaded run this +// Once the page loaded run this. window.addEventListener("load", () => { displayRandomQuote();