A princípio fiquei incomodado com o beep de alerta que toca até o final, mesmo quando a gente clica no alert. Vi aqui no fórum uma solução de outra pessoa e achei massa a ideia de adicionar um trecho para interromper o beep após clicar no alert:
const contagemRegressiva = () => {
if (timer === 0) {
zerar();
audioBeep.play();
alert("Tempo finalizado.");
audioBeep.pause();
return;
}
Contudo, mesmo encerrando o som do beep, o app fica travado, o pomodoro não retorna ao funcionamento nem mesmo mudando o contexto. Acredito que isso será implementado nas próximas aulas, mas procurei uma solução e adicionei um trecho para recarregar todo o app após clicar no alert:
const contagemRegressiva = () => {
if (timer === 0) {
zerar();
audioBeep.play();
alert("Tempo finalizado.");
window.location.reload(true);
}
timer --;
textoBt.innerHTML = "pausar";
console.log("Temporizador: " + timer);
};
O método Location.reload() do JavaScript fornece os meios para recarregar a página do URL atual.
A sintaxe é a seguinte:
objeto.reload(forcedReload);
onde forceReload é um parâmetro opcional.
Para recarregar a página, simplesmente, você pode inserir window.location como o objeto.
O parâmetro opcional forceReload é um valor booleano que, se for definido como true, recarrega a página a partir do servidor (ou seja, não armazena dados em cache no navegador):
window.location.reload(true);
Se o parâmetro for definido como false, a página é recarregada usando a versão que está em cache no navegador.
window.location.reload(false);
false é o parâmetro padrão. Assim, se o conteúdo do parênteses for deixado em branco, object.reload() recarrega a página usando o que estiver em cache no navegador, do mesmo modo que se usássemos objeto.reload(false).
Optei por recarregar excluindo o cache, pois dessa forma a página não atualiza com o botão da música ativado.
Já o trecho:
textoBt.innerHTML = "pausar";
... este faz com que o texto dentro do botão mude de começar para pausar. Da mesma maneira, determinei que uma vez pausado o mesmo mude para retomar. Sacrifiquei a utilização do ícone na implementação desse código, estou certo de que há uma maneira de inserir o ícone de pause no texto pausar após iniciar, bem como inserir o ícone de play quando estiver pausado e com o texto retomar, mas uma mistura de preguiça e do pensamento de que não tem tanta relevância eu deixei sem os ícones mesmo... maaaas se alguém aqui tiver uma sugestão dessa implementação, vou ficar agradecido.