From 5a8cce76da226c533592dac8a88ef27ddebf2ad0 Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Wed, 9 Jul 2025 13:05:10 +0100 Subject: [PATCH 1/5] alarmclock app with countdown-alarm sound and colour --- Sprint-3/alarmclock/alarmclock.js | 71 ++++++++++++++++++++++++++++++- Sprint-3/alarmclock/index.html | 4 +- Sprint-3/alarmclock/jest.setup.js | 13 +++++- Sprint-3/alarmclock/package.json | 5 ++- 4 files changed, 87 insertions(+), 6 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..f829f713f 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,73 @@ -function setAlarm() {} +// Given an input area of Time counter and 2 buttons: 'Set Alarm' and 'Stop Alarm'. +// When user clicks the `Set Alarm` button the counter at the +// top of the screen should change to the entered number in the `input` field. +// For example, +// if the `input` field says `10` then the title should say `Time Remaining: 00:10`. +// Every one second the title should count down by one. + +// When the `Time Remaining` reaches `00:00` the alarm should play a sound. You can +// make the sound happen by using `playAlarm()`. +// You can stop the alarm sound by pressing the `Stop Alarm` button. + +const alarmInputArea = document.querySelector("#alarmSet"); +console.log(alarmInputArea, "<---- InputArea"); + +const setAlarmButton = document.querySelector("#set"); +console.log(setAlarmButton, "<---- Alarm Button"); + +const setStopButton = document.querySelector("#stop"); +console.log(setStopButton, "< ---- Stop Button"); + +const timeRemainInfo = document.querySelector("#timeRemaining"); +console.log(timeRemainInfo, "<------Remain Time"); + +const backgroundColor = document.querySelector("html"); +console.log(backgroundColor, "<------Background Color"); + +let intervalId; + +function setAlarm() { + let inputInfo = Number(alarmInputArea.value); + if (inputInfo < 1) { + console.log("You need to input a value"); + window.alert("You need to input a value!"); + return; + } + alarmInputArea.value = ""; + const mins = String(Math.floor(inputInfo / 60)).padStart(2, "0"); + const seconds = String(inputInfo % 60).padStart(2, "0"); + timeRemainInfo.textContent = `Time Remaining: ${mins}:${seconds}`; + + intervalId = setInterval(function () { + if (inputInfo <= 0) { + clearInterval(intervalId); + playAlarm(); + changeBackgroundColor(); + return; + } else { + inputInfo--; + const mins = String(Math.floor(inputInfo / 60)).padStart(2, "0"); + const seconds = String(inputInfo % 60).padStart(2, "0"); + timeRemainInfo.textContent = `Time Remaining: ${mins}:${seconds}`; + } + }, 1000); +} + +//setAlarmButton.addEventListener("click", function setAlarm() { +//console.log("click event is firing..."); +//}); + +//setStopButton.addEventListener("click", function stopAlarm() { +//console.log("click event is firing..."); +//clearInterval(intervalId); +//pauseAlarm(); +//}); + +//alarm sound stop}) + +function changeBackgroundColor() { + backgroundColor.style.backgroundColor = "lightblue"; +} // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..d353f6f51 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,8 @@ - Title here + + Alarm clock app
@@ -15,6 +16,5 @@

Time Remaining: 00:00

- diff --git a/Sprint-3/alarmclock/jest.setup.js b/Sprint-3/alarmclock/jest.setup.js index 9e785813a..18d84d1a6 100644 --- a/Sprint-3/alarmclock/jest.setup.js +++ b/Sprint-3/alarmclock/jest.setup.js @@ -1 +1,12 @@ -require("@testing-library/jest-dom"); +require("@testing-library/jest-dom/extend-expect"); + +//import { expect, jest, test } from "@jest/globals"; + +//import "@testing-library/jest-dom"; + +//import "@testing-library/jest-dom/extend-expect"; + +const { TextEncoder, TextDecoder } = require("util"); + +global.TextEncoder = TextEncoder; +global.TextDecoder = TextDecoder; diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json index b532c6908..793bf667a 100644 --- a/Sprint-3/alarmclock/package.json +++ b/Sprint-3/alarmclock/package.json @@ -16,7 +16,7 @@ "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", "devDependencies": { "@testing-library/dom": "^8.19.0", - "@testing-library/jest-dom": "^5.16.5", + "@testing-library/jest-dom": "^5.17.0", "@testing-library/user-event": "^13.5.0", "jest": "^29.2.2", "jest-environment-jsdom": "^29.2.2" @@ -24,6 +24,7 @@ "jest": { "setupFilesAfterEnv": [ "./jest.setup.js" - ] + ], + "testEnvironment": "jsdom" } } From 35748baac63dbe26bfc95e61c447b21295551936 Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Wed, 9 Jul 2025 14:06:25 +0100 Subject: [PATCH 2/5] alarmclock with extras --- Sprint-3/alarmclock/alarmclock.js | 33 ++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index f829f713f..68b5d2e0f 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -42,7 +42,7 @@ function setAlarm() { if (inputInfo <= 0) { clearInterval(intervalId); playAlarm(); - changeBackgroundColor(); + changeBackgroundColorFlashing(); return; } else { inputInfo--; @@ -57,16 +57,27 @@ function setAlarm() { //console.log("click event is firing..."); //}); -//setStopButton.addEventListener("click", function stopAlarm() { -//console.log("click event is firing..."); -//clearInterval(intervalId); -//pauseAlarm(); -//}); - -//alarm sound stop}) - -function changeBackgroundColor() { - backgroundColor.style.backgroundColor = "lightblue"; +setStopButton.addEventListener("click", function stopFlashing() { + console.log("click event is firing..."); + clearInterval(flashIntervalId); + backgroundColor.style.backgroundColor = ""; + pauseAlarm(); +}); + +//function changeBackgroundColor() { +//backgroundColor.style.backgroundColor = "lightblue"; +//} + +let flashColor = ["yellow", "pink", "lightgrey", "green"]; +let flashIntervalId; +let colorIndex = 0; + +function changeBackgroundColorFlashing() { + if (flashIntervalId) clearInterval(flashIntervalId); + flashIntervalId = setInterval(function () { + backgroundColor.style.backgroundColor = flashColor[colorIndex]; + colorIndex = (colorIndex + 1) % flashColor.length; + }, 1000); } // DO NOT EDIT BELOW HERE From 51b98047cf805ab9645cc49882209cc1cc55baa7 Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Sat, 12 Jul 2025 15:06:01 +0100 Subject: [PATCH 3/5] added flashing --- Sprint-3/alarmclock/alarmclock.js | 43 +++++++++++++++++-------------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 68b5d2e0f..2bc706b08 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -25,30 +25,33 @@ const backgroundColor = document.querySelector("html"); console.log(backgroundColor, "<------Background Color"); let intervalId; +let inputInfo = 0; + +function timeFormat(time) { + const mins = String(Math.floor(time / 60)).padStart(2, "0"); + const seconds = String(time % 60).padStart(2, "0"); + timeRemainInfo.textContent = `Time Remaining: ${mins}:${seconds}`; +} function setAlarm() { - let inputInfo = Number(alarmInputArea.value); - if (inputInfo < 1) { - console.log("You need to input a value"); - window.alert("You need to input a value!"); + inputInfo = Number(alarmInputArea.value); + if (inputInfo < 1 || isNaN(inputInfo)) { + console.log("You need to input a value in seconds!"); + window.alert("You need to input a value in seconds!"); return; } alarmInputArea.value = ""; - const mins = String(Math.floor(inputInfo / 60)).padStart(2, "0"); - const seconds = String(inputInfo % 60).padStart(2, "0"); - timeRemainInfo.textContent = `Time Remaining: ${mins}:${seconds}`; + timeFormat(inputInfo); intervalId = setInterval(function () { - if (inputInfo <= 0) { + inputInfo--; + if (inputInfo === 0) { clearInterval(intervalId); - playAlarm(); + timeFormat(0); + window.playAlarm(); changeBackgroundColorFlashing(); - return; } else { - inputInfo--; - const mins = String(Math.floor(inputInfo / 60)).padStart(2, "0"); - const seconds = String(inputInfo % 60).padStart(2, "0"); - timeRemainInfo.textContent = `Time Remaining: ${mins}:${seconds}`; + timeFormat(inputInfo); } }, 1000); } @@ -56,29 +59,31 @@ function setAlarm() { //setAlarmButton.addEventListener("click", function setAlarm() { //console.log("click event is firing..."); //}); +let flashColor = ["yellow", "pink", "lightgrey", "green"]; +let flashIntervalId; +let colorIndex = 0; setStopButton.addEventListener("click", function stopFlashing() { console.log("click event is firing..."); clearInterval(flashIntervalId); backgroundColor.style.backgroundColor = ""; - pauseAlarm(); + window.pauseAlarm(); }); //function changeBackgroundColor() { //backgroundColor.style.backgroundColor = "lightblue"; //} -let flashColor = ["yellow", "pink", "lightgrey", "green"]; -let flashIntervalId; -let colorIndex = 0; - function changeBackgroundColorFlashing() { if (flashIntervalId) clearInterval(flashIntervalId); flashIntervalId = setInterval(function () { backgroundColor.style.backgroundColor = flashColor[colorIndex]; colorIndex = (colorIndex + 1) % flashColor.length; }, 1000); + //stopFlashing(); } +window.playAlarm = playAlarm; +window.pauseAlarm = pauseAlarm; // DO NOT EDIT BELOW HERE From 5a5f3b0bd48463d4b017af86801969873bb08619 Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Sat, 12 Jul 2025 16:26:06 +0100 Subject: [PATCH 4/5] some comments --- Sprint-3/alarmclock/alarmclock.js | 43 ++++++++++++++++--------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 2bc706b08..a9bf9392c 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -9,7 +9,7 @@ // make the sound happen by using `playAlarm()`. // You can stop the alarm sound by pressing the `Stop Alarm` button. -const alarmInputArea = document.querySelector("#alarmSet"); +const alarmInputArea = document.querySelector("#alarmSet"); // get access to InputArea console.log(alarmInputArea, "<---- InputArea"); const setAlarmButton = document.querySelector("#set"); @@ -24,64 +24,65 @@ console.log(timeRemainInfo, "<------Remain Time"); const backgroundColor = document.querySelector("html"); console.log(backgroundColor, "<------Background Color"); -let intervalId; -let inputInfo = 0; +let intervalId; // declare variable +let inputInfo = 0; // declare 'inputInfo' as an 'intervalId' global function timeFormat(time) { + // revert number into min and sec format function const mins = String(Math.floor(time / 60)).padStart(2, "0"); const seconds = String(time % 60).padStart(2, "0"); timeRemainInfo.textContent = `Time Remaining: ${mins}:${seconds}`; } function setAlarm() { - inputInfo = Number(alarmInputArea.value); + inputInfo = Number(alarmInputArea.value); // convert input into number if (inputInfo < 1 || isNaN(inputInfo)) { + // to sift invalid input console.log("You need to input a value in seconds!"); window.alert("You need to input a value in seconds!"); return; } - alarmInputArea.value = ""; - timeFormat(inputInfo); + alarmInputArea.value = ""; // clean input area when data assigned to 'inputInfo' + timeFormat(inputInfo); // set format input to min and sec intervalId = setInterval(function () { - inputInfo--; + //function to set interval for + inputInfo--; // countdown the input by 1 sec by iterat. if (inputInfo === 0) { + // if input equal 0, set alarm signal and flashing clearInterval(intervalId); timeFormat(0); window.playAlarm(); changeBackgroundColorFlashing(); } else { + // if input not equal 0, just continue count down timeFormat(inputInfo); } }, 1000); } -//setAlarmButton.addEventListener("click", function setAlarm() { -//console.log("click event is firing..."); -//}); -let flashColor = ["yellow", "pink", "lightgrey", "green"]; -let flashIntervalId; +let flashColor = ["yellow", "pink", "lightgrey", "green"]; // array for flashing +let flashIntervalId; // declaring globally variable let colorIndex = 0; setStopButton.addEventListener("click", function stopFlashing() { console.log("click event is firing..."); - clearInterval(flashIntervalId); - backgroundColor.style.backgroundColor = ""; + clearInterval(flashIntervalId); // cleaning any previous possible intervals + backgroundColor.style.backgroundColor = ""; // cleaning background to default + // option after clicking stop button window.pauseAlarm(); }); -//function changeBackgroundColor() { -//backgroundColor.style.backgroundColor = "lightblue"; -//} - function changeBackgroundColorFlashing() { - if (flashIntervalId) clearInterval(flashIntervalId); + //function flashing colors + if (flashIntervalId) clearInterval(flashIntervalId); // every 1 sec flashIntervalId = setInterval(function () { backgroundColor.style.backgroundColor = flashColor[colorIndex]; - colorIndex = (colorIndex + 1) % flashColor.length; + colorIndex = (colorIndex + 1) % flashColor.length; // loop over flashColor array }, 1000); - //stopFlashing(); + //stopFlashing(); //setTimeout(() => clearInterval(flashIntervalId), 1000); } + window.playAlarm = playAlarm; window.pauseAlarm = pauseAlarm; From 25441fd71afbb00df332e24569bd15c58c38a129 Mon Sep 17 00:00:00 2001 From: Nataliia74 Date: Mon, 14 Jul 2025 14:49:31 +0100 Subject: [PATCH 5/5] check the dowbl-input edge case --- Sprint-3/alarmclock/alarmclock.js | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index a9bf9392c..c7974c25a 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -36,6 +36,22 @@ function timeFormat(time) { function setAlarm() { inputInfo = Number(alarmInputArea.value); // convert input into number + if (intervalId || flashIntervalId) { + // edge case if during already set + // timer user input new one value + console.log("Timer already started!"); + window.alert("Timer already started!"); + clearInterval(intervalId); + clearInterval(flashIntervalId); + intervalId = null; // we should assign null to variables intervalId and + flashIntervalId = null; // flashIntervalId because resetting interval doesn't + alarmInputArea.value = ""; // assign new values to variables it just stop ticking + // timer + backgroundColor.style.backgroundColor = ""; + timeFormat(0); + return; + } + if (inputInfo < 1 || isNaN(inputInfo)) { // to sift invalid input console.log("You need to input a value in seconds!"); @@ -67,16 +83,24 @@ let colorIndex = 0; setStopButton.addEventListener("click", function stopFlashing() { console.log("click event is firing..."); - clearInterval(flashIntervalId); // cleaning any previous possible intervals - backgroundColor.style.backgroundColor = ""; // cleaning background to default + clearInterval(flashIntervalId); + clearInterval(intervalId); // cleaning any previous possible intervals + intervalId = null; + flashIntervalId = null; + inputInfo = 0; + alarmInputArea.value = ""; + backgroundColor.style.backgroundColor = ""; + // cleaning background to default + timeFormat(0); // option after clicking stop button window.pauseAlarm(); }); function changeBackgroundColorFlashing() { //function flashing colors - if (flashIntervalId) clearInterval(flashIntervalId); // every 1 sec + if (flashIntervalId) clearInterval(flashIntervalId); flashIntervalId = setInterval(function () { + // every 1 sec backgroundColor.style.backgroundColor = flashColor[colorIndex]; colorIndex = (colorIndex + 1) % flashColor.length; // loop over flashColor array }, 1000);