Implementei duas melhorias para o projeto:
- Ao trocar de contexto (foco para descanso curto, por exemplo), o timer é resetado.
function alterarContexto(contexto) {
zerar(); // Implementação adicionada
mostrarTempo();
buttons.forEach(function (contexto) {
contexto.classList.remove("active");
});
html.setAttribute("data-contexto", contexto);
img.setAttribute("src", `img/${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;
}
}
- Ao pausar o timer, a música também é pausada; caso o usuário pressione play novamente, a música volta a tocar.
function iniciarOuPausar() {
if (intervaloID) {
musicaPause.play();
musica.pause();
zerar();
return;
} else {
if (musicaFocoInput.checked) {
musica.play();
}
musicaPlay.play();
intervaloID = setInterval(contagemRegressiva, 1000);
iniciarOuPausarButton.textContent = "Pausar";
imgPlayOuPause.setAttribute("src", "img/pause.png");
}
}
Página do GitHub com todos os arquivos do projeto: https://github.com/diegofc2002/projeto-fokus.
Página no Vercel com a aplicação: https://projeto-fokus-omega-five.vercel.app/.
Fique à vontade para sugerir melhorias e/ou dicas de implementação para o código.
