Ao alterar o contexto, o timer não era atualizado, e só alterava após eu clicar pela segunda vez no botão de alterar o contexto (ele exibia o último timer do contexto que estava selecionado)
O que acontecia é que quando eu trocava entre os contextos (foco, descanso curto e descanso longo), o tempo era alterado (como em tempoEmSegundos = 1500 para foco, tempoEmSegundos = 300 para descanso curto e assim por diante), mas o display não era atualizado automaticamente.
A solução foi garantir que sempre que o tempo fosse alterado (por exemplo, ao clicar em um botão de contexto), a função mostrarTimer() fosse chamada imediatamente para refletir a mudança na interface.
O ajuste foi:
- Chamar mostrarTimer() imediatamente após a alteração do contexto, para atualizar a tela com o tempo correto logo após mudar o contexto.
- Não depender de outro evento para atualizar o timer; cada alteração de contexto deve imediatamente refletir o tempo atual.
Quando fiz essa alteração o código funcionou, mas fica a minha dúvida, deixei passar algo que o instrutor disse?
O código disponibilizado por vocês no github não há essa invocação dentro de cada contexto, ela foi apenas invocada dentro da função alterarContexto(), como o código funcionou dessa maneira?
Código no GitHub:
focoBt.addEventListener('click', () => {
tempoDecorridoEmSegundos = 1500
alterarContexto('foco')
focoBt.classList.add('active')
})
curtoBt.addEventListener('click', () => {
tempoDecorridoEmSegundos = 300
alterarContexto('descanso-curto')
curtoBt.classList.add('active')
})
longoBt.addEventListener('click', () => {
tempoDecorridoEmSegundos = 900
alterarContexto('descanso-longo')
longoBt.classList.add('active')
})
function alterarContexto(contexto) {
mostrarTempo()
...
Código que funcionou para mim:
botaoFoco.addEventListener('click', () => {
alterarContexto('foco');
botaoFoco.classList.add('active');
tempoEmSegundos = 1500;
mostrarTimer(); //invocando durante a mudança de contexto
});
botaoCurto.addEventListener('click', () => {
alterarContexto('descanso-curto');
botaoCurto.classList.add('active');
tempoEmSegundos = 300;
mostrarTimer(); //invocando durante a mudança de contexto
});
botaoLongo.addEventListener('click', () => {
alterarContexto('descanso-longo')
botaoLongo.classList.add('active');
tempoEmSegundos = 900;
mostrarTimer(); //invocando durante a mudança de contexto
});
function alterarContexto(contexto) {
// mostrarTimer(); //invocando no função, como feito pelo instrutor
