-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
116 lines (99 loc) · 3.58 KB
/
script.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
const html = document.querySelector('html');
const btnFoco = document.querySelector('.app__card-button--foco');
const btnCurto = document.querySelector('.app__card-button--curto');
const btnLongo = document.querySelector('.app__card-button--longo');
const banner = document.querySelector('.app__image');
const titulo = document.querySelector('.app__title');
const botoes = document.querySelectorAll('.app__card-button');
const btnStartPause = document.querySelector('#start-pause');
const musicaFocoInput = document.querySelector('#alternar-musica');
const btnIniciarOuPausar = document.querySelector('#start-pause span');
const trocaImagemIniciarOuPausarBt = document.querySelector('.app__card-primary-butto-icon');
const tempoNaTela = document.querySelector('#timer');
const musica = new Audio('/sons/luna-rise-part-one.mp3');
const playMusica = new Audio('/sons/play.wav');
const pauseMusica = new Audio('/sons/pause.mp3');
const toqueFinal = new Audio('/sons/beep.mp3');
let tempoDecorridoEmSegundos = 1500;
let intervaloId = null;
musica.loop = true;
musicaFocoInput.addEventListener('change', () => {
if (musica.paused) {
musica.play()
} else {
musica.pause()
}
});
btnFoco.addEventListener('click', () => {
tempoDecorridoEmSegundos = 1500;
alterarContexto('foco');
btnFoco.classList.add('active');
});
btnCurto.addEventListener('click', () => {
tempoDecorridoEmSegundos = 300;
alterarContexto('descanso-curto');
btnCurto.classList.add('active');
});
btnLongo.addEventListener('click', () => {
tempoDecorridoEmSegundos = 900;
alterarContexto('descanso-longo')
btnLongo.classList.add('active');
});
function alterarContexto(contexto) {
mostrarTempo();
botoes.forEach(function (contexto){
contexto.classList.remove('active');
});
html.setAttribute('data-contexto', contexto);
banner.setAttribute('src', `/imagens/${contexto}.png`);
switch (contexto) {
case 'foco':
titulo.innerHTML = `
Otimize sua produtividade,<br>
<strong class="app__title-strong">mergulhe no que importa.</strong>`;
break;
case 'descanso-curto':
titulo.innerHTML = `
Que tal dar uma respirada? <strong class="app__title-strong">Faça uma parada.</strong>`;
break;
case 'descanso-longo':
titulo.innerHTML = `
Hora de voltar à superfície.<strong class="app__title-strong"><br>Faça uma pausa longa.</strong>`;
default:
break;
}
}
const contagemRegressiva = () => {
if (tempoDecorridoEmSegundos <= 0) {
toqueFinal.play();
alert('Tempo finalizado');
zerar();
return;
}
tempoDecorridoEmSegundos-= 1;
mostrarTempo();
}
btnStartPause.addEventListener('click', iniciarOuPausar);
function iniciarOuPausar() {
if (intervaloId) {
pauseMusica.play();
zerar();
return;
}
playMusica.play();
intervaloId = setInterval(contagemRegressiva, 1000);
btnIniciarOuPausar.textContent = 'Pausar';
trocaImagemIniciarOuPausarBt.setAttribute('src', '/imagens/pause.png');
}
function zerar() {
clearInterval(intervaloId);
btnIniciarOuPausar.textContent = 'Começar';
trocaImagemIniciarOuPausarBt.setAttribute('src', '/imagens/play_arrow.png');
intervaloId = null;
}
function mostrarTempo() {
const tempo = new Date(tempoDecorridoEmSegundos * 1000);
const tempoFormatado = tempo.toLocaleTimeString('pt-Br', {minute: '2-digit', second: '2-digit'});
tempoNaTela.innerHTML = `${tempoFormatado}`;
}
mostrarTempo();