Quando olhamos a lógica de iniciar e pausar,
temos um pequeno problema, que é no momento que o temporizador chegar a zero, para recaregar, o usuário deverá recarregar a pagina....
como podemos fazer isso ficar automático????
depende do contexto também onde estamos. seria viavel puxar em qual contexto estamos na hora que finalizar o temporizador?
Olá, João Paulo, tudo bem?
Ótima observação! Sua intuição está certa: o ponto-chave aqui é verificar o contexto atual antes de reiniciar o contador.
Se baseando no código final , quando o tempo chega a 0, a função apenas para o intervalo, mas a variável tempoDecorridoEmSegundos continua valendo 0. Por isso, o relógio não reinicia sozinho.
Como é salvo o contexto no atributo data-contexto da tag html, dá para usar essa informação para decidir qual tempo deve ser definido novamente (foco ou descanso).
Ajustando a lógica dentro da função contagemRegressiva, o comportamento fica automático:
const contagemRegressiva = () => {
if (tempoDecorridoEmSegundos <= 0) {
audioTempoFinalizado.play()
alert('Tempo finalizado!')
const contextoAtual = html.getAttribute('data-contexto')
if (contextoAtual === 'foco') {
tempoDecorridoEmSegundos = 1500
} else if (contextoAtual === 'descanso-curto') {
tempoDecorridoEmSegundos = 300
} else if (contextoAtual === 'descanso-longo') {
tempoDecorridoEmSegundos = 900
}
zerar()
mostrarTempo()
return
}
tempoDecorridoEmSegundos -= 1
mostrarTempo()
}
O que muda, na prática, é simples: você identifica o contexto atual, redefine o tempo correto e já atualiza a tela. Assim, o contador reinicia automaticamente sem precisar recarregar a página.
Aqui ficou assim:
Testa assim e vê se o fluxo fica como você imaginou.
Bons estudos!
Sucesso ✨