-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
125 lines (99 loc) · 3.58 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import bellFile from "./assets/bell.mp3";
const interval = 1_000; // 1s
const inhaleInput = document.getElementById('inhale');
const inhaleValue = document.getElementById('inhaleValue');
const hold1Input = document.getElementById('hold1');
const hold1Value = document.getElementById('hold1Value');
const exhaleInput = document.getElementById('exhale');
const exhaleValue = document.getElementById('exhaleValue');
const hold2Input = document.getElementById('hold2');
const hold2Value = document.getElementById('hold2Value');
const cyclesInput = document.getElementById('cycles');
const infoSession = document.getElementById('info');
const currentStep = document.getElementById('step');
const startButton = document.getElementById('start');
let inhaleDuration = inhaleInput.value;
let hold1Duration = hold1Input.value;
let exhaleDuration = exhaleInput.value;
let hold2Duration = hold2Input.value;
let numberOfCycles = cyclesInput.value;
let totalDuration = 0;
let currentCycle = 0;
const bell = new Audio(bellFile);
const getFormattedDuration = () => {
const minutes = Math.floor(totalDuration / 60);
const seconds = totalDuration % 60;
return `${minutes}m ${seconds}s`;
}
const updateVariables = () => {
inhaleDuration = inhaleInput.value * 1;
hold1Duration = hold1Input.value * 1;
exhaleDuration = exhaleInput.value * 1;
hold2Duration = hold2Input.value * 1;
numberOfCycles = cyclesInput.value * 1;
totalDuration = (inhaleDuration + hold1Duration + exhaleDuration + hold2Duration) * numberOfCycles
inhaleValue.innerHTML = `${inhaleDuration}s`
hold1Value.innerHTML = `${hold1Duration}s`
exhaleValue.innerHTML = `${exhaleDuration}s`
hold2Value.innerHTML = `${hold2Duration}s`
infoSession.innerHTML = `
<span>${numberOfCycles} breathing cycles</span>
<span class="font-bold">${getFormattedDuration()}</span>
`
};
const updateValue = (variable, value) => {
variable = value * 1;
}
const disableControls = (disable) => {
inhaleInput.disabled = disable;
hold1Input.disabled = disable;
exhaleInput.disabled = disable;
hold2Input.disabled = disable;
cyclesInput.disabled = disable;
startButton.disabled = disable;
}
const start = () => {
const timer = setInterval(() => {
if (currentCycle < numberOfCycles) {
if (inhaleDuration > 0) {
currentStep.textContent = 'Inhale';
inhaleDuration--;
if (inhaleDuration === 0) bell.play();
} else if (hold1Duration > 0) {
currentStep.textContent = 'Hold';
hold1Duration--;
if (hold1Duration === 0) bell.play();
} else if (exhaleDuration > 0) {
currentStep.textContent = 'Exhale';
exhaleDuration--;
if (exhaleDuration === 0) bell.play();
} else if (hold2Duration > 0) {
currentStep.textContent = 'Hold';
hold2Duration--;
if (hold2Duration === 0) bell.play();
} else {
currentCycle++;
inhaleDuration = inhaleInput.value;
hold1Duration = hold1Input.value;
exhaleDuration = exhaleInput.value;
hold2Duration = hold2Input.value;
}
} else {
clearInterval(timer);
currentCycle = 0;
currentStep.textContent = 'Finished!';
bell.play();
disableControls(false);
}
}, interval)
}
inhaleInput.addEventListener('input', updateVariables);
hold1Input.addEventListener('input', updateVariables);
exhaleInput.addEventListener('input', updateVariables);
hold2Input.addEventListener('input', updateVariables);
cyclesInput.addEventListener('input', updateVariables);
startButton.addEventListener('click', () => {
disableControls(true);
bell.play();
start();
});