const iniciarBt = document.querySelector('.app__card-primary-button');
const displayTempo = document.querySelector('#timer');
const titulo = document.querySelector('.app__title');
const html = document.querySelector('html');
const banner = document.querySelector('.app__image');
const focoBt = document.querySelector('.app__card-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longoBt = document.querySelector('.app__card-button--longo');
const musicaBtn = document.querySelector('#alternar-musica');
const musica = new Audio('sons/luna-rise-part-one.mp3');
const somBeep = new Audio('sons/beep.mp3');
const somPause = new Audio('sons/pause.mp3');
const somPlay = new Audio('sons/play.wav');
const botoes = document.querySelectorAll('.app__card-button');
const startPauseBt = document.querySelector('#start-pause');
const iniciarOuPausarBt = document.querySelector('#start-pause span');
const inconeIniciarPausar = document.querySelector('.app__card-primary-butto-icon');
const inconeComecar = 'imagens/play_arrow.png';
const inconePausar = 'imagens/pause.png';
const tempoNaTela = document.querySelector('#timer');
let tempoDecorridoEmSegundos = 1500;
let intervaloId = null;
musicaBtn.addEventListener('change', () => {
console.log('passei por aqui');
if (musica.paused){
musica.play();
} else {
musica.pause();
}
});
function alteraContexto(contexto){
botoes.forEach(function(lista){
lista.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 pausa curta!</strong>`
break;
case "descanso-longo":
titulo.innerHTML = `Hora de voltar à superfície.
<strong class="app__title-strong"> Faça uma pausa longa.</strong>`
break;
default:
break;
}
}
musica.loop = true;
function btn(btn_acao,contexto){
btn_acao.addEventListener('click', () => {
alteraContexto(contexto);
btn_acao.classList.add('active');
})
}
btn(focoBt,'foco');
btn(curtoBt,'descanso-curto');
btn(longoBt,'descanso-longo');
const contagemRegressiva = () => {
if (tempoDecorridoEmSegundos <= 0) {
alert('Tempo finalizado');
zerar();
somBeep.play();
return;
}
tempoDecorridoEmSegundos -= 1;
//console.log('Temporizador: ' + tempoDecorridoEmSegundos);
mostrarTempo();
}
function iniciarOuPausar() {
if (intervaloId) {
zerar();
somPause.play();
return;
}
somPlay.play();
intervaloId = setInterval(contagemRegressiva, 1000);
iniciarOuPausarBt.textContent = 'Pausar';
inconeIniciarPausar.setAttribute('src',inconePausar);
}
function zerar() {
clearInterval(intervaloId);
intervaloId = null;
iniciarOuPausarBt.textContent = 'Começar';
inconeIniciarPausar.setAttribute('src',inconeComecar);
}
function mostrarTempo(){
const tempo = tempoDecorridoEmSegundos;
tempoNaTela.innerHTML = `${tempo}`;
}
startPauseBt.addEventListener('click', iniciarOuPausar);
mostrarTempo();