Skip to content

Commit 5a8cce7

Browse files
Nataliia74Nataliia74
committed
alarmclock app with countdown-alarm sound and colour
1 parent f36fd7f commit 5a8cce7

File tree

4 files changed

+87
-6
lines changed

4 files changed

+87
-6
lines changed

‎Sprint-3/alarmclock/alarmclock.js

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,73 @@
1-
function setAlarm() {}
1+
// Given an input area of Time counter and 2 buttons: 'Set Alarm' and 'Stop Alarm'.
2+
// When user clicks the `Set Alarm` button the counter at the
3+
// top of the screen should change to the entered number in the `input` field.
4+
// For example,
5+
// if the `input` field says `10` then the title should say `Time Remaining: 00:10`.
6+
// Every one second the title should count down by one.
7+
8+
// When the `Time Remaining` reaches `00:00` the alarm should play a sound. You can
9+
// make the sound happen by using `playAlarm()`.
10+
// You can stop the alarm sound by pressing the `Stop Alarm` button.
11+
12+
const alarmInputArea = document.querySelector("#alarmSet");
13+
console.log(alarmInputArea, "<---- InputArea");
14+
15+
const setAlarmButton = document.querySelector("#set");
16+
console.log(setAlarmButton, "<---- Alarm Button");
17+
18+
const setStopButton = document.querySelector("#stop");
19+
console.log(setStopButton, "< ---- Stop Button");
20+
21+
const timeRemainInfo = document.querySelector("#timeRemaining");
22+
console.log(timeRemainInfo, "<------Remain Time");
23+
24+
const backgroundColor = document.querySelector("html");
25+
console.log(backgroundColor, "<------Background Color");
26+
27+
let intervalId;
28+
29+
function setAlarm() {
30+
let inputInfo = Number(alarmInputArea.value);
31+
if (inputInfo < 1) {
32+
console.log("You need to input a value");
33+
window.alert("You need to input a value!");
34+
return;
35+
}
36+
alarmInputArea.value = "";
37+
const mins = String(Math.floor(inputInfo / 60)).padStart(2, "0");
38+
const seconds = String(inputInfo % 60).padStart(2, "0");
39+
timeRemainInfo.textContent = `Time Remaining: ${mins}:${seconds}`;
40+
41+
intervalId = setInterval(function () {
42+
if (inputInfo <= 0) {
43+
clearInterval(intervalId);
44+
playAlarm();
45+
changeBackgroundColor();
46+
return;
47+
} else {
48+
inputInfo--;
49+
const mins = String(Math.floor(inputInfo / 60)).padStart(2, "0");
50+
const seconds = String(inputInfo % 60).padStart(2, "0");
51+
timeRemainInfo.textContent = `Time Remaining: ${mins}:${seconds}`;
52+
}
53+
}, 1000);
54+
}
55+
56+
//setAlarmButton.addEventListener("click", function setAlarm() {
57+
//console.log("click event is firing...");
58+
//});
59+
60+
//setStopButton.addEventListener("click", function stopAlarm() {
61+
//console.log("click event is firing...");
62+
//clearInterval(intervalId);
63+
//pauseAlarm();
64+
//});
65+
66+
//alarm sound stop})
67+
68+
function changeBackgroundColor() {
69+
backgroundColor.style.backgroundColor = "lightblue";
70+
}
271

372
// DO NOT EDIT BELOW HERE
473

‎Sprint-3/alarmclock/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="stylesheet" href="style.css" />
7-
<title>Title here</title>
7+
<script defer src="alarmclock.js"></script>
8+
<title>Alarm clock app</title>
89
</head>
910
<body>
1011
<div class="centre">
@@ -15,6 +16,5 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
1516
<button id="set" type="button">Set Alarm</button>
1617
<button id="stop" type="button">Stop Alarm</button>
1718
</div>
18-
<script src="alarmclock.js"></script>
1919
</body>
2020
</html>

‎Sprint-3/alarmclock/jest.setup.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,12 @@
1-
require("@testing-library/jest-dom");
1+
require("@testing-library/jest-dom/extend-expect");
2+
3+
//import { expect, jest, test } from "@jest/globals";
4+
5+
//import "@testing-library/jest-dom";
6+
7+
//import "@testing-library/jest-dom/extend-expect";
8+
9+
const { TextEncoder, TextDecoder } = require("util");
10+
11+
global.TextEncoder = TextEncoder;
12+
global.TextDecoder = TextDecoder;

‎Sprint-3/alarmclock/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,15 @@
1616
"homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
1717
"devDependencies": {
1818
"@testing-library/dom": "^8.19.0",
19-
"@testing-library/jest-dom": "^5.16.5",
19+
"@testing-library/jest-dom": "^5.17.0",
2020
"@testing-library/user-event": "^13.5.0",
2121
"jest": "^29.2.2",
2222
"jest-environment-jsdom": "^29.2.2"
2323
},
2424
"jest": {
2525
"setupFilesAfterEnv": [
2626
"./jest.setup.js"
27-
]
27+
],
28+
"testEnvironment": "jsdom"
2829
}
2930
}

0 commit comments

Comments
 (0)