Fiz como o professor fez mais ao clicar no ok não some a mensagem fica repetindo, alguém sabe me dizer onde estou errando?
const html = document.querySelector('html'); //seleciona o html
const focoBt = document.querySelector('.app__card-button--foco');//seleciona o botão foco
const curtoBt = document.querySelector('.app__card-button--curto');//seleciona o botrão curto
const longoBt = document.querySelector('.app__card-button--longo');//seleciona o botão descanso longo
const banner = document.querySelector('.app__image'); //seleciona as imagnes que tenho que trocar ao clicar nos botões
const titulo = document.querySelector('.app__title'); //selecionando os títulos do html
const botoes =document.querySelectorAll('.app__card-button'); //selecionando os botões no html
const startPauseBt = document.querySelector('#start-pause');//selecionando o botão começar no html através do id
const musicaFocoInput = document.querySelector('#alternar-musica');
const musica = new Audio('/sons/luna-rise-part-one.mp3');
musica.loop = true;
let tempoDecorridoEmSegundos = 5;
let intervaloId = null;
musicaFocoInput.addEventListener('change', () => {
if(musica.paused) {
musica.play()
} else {
musica.pause()
}
})
focoBt.addEventListener('click', () =>{
/*html.setAttribute('data-contexto', 'foco');
banner.setAttribute('src', '/imagens/foco.png'); // muda o atributo da imagem ao clicar*/
alterarContexto('foco');
focoBt.classList.add('active');
})//mudando atributo das páginas ao clicar no botão
curtoBt.addEventListener('click', () =>{
alterarContexto('descanso-curto');
curtoBt.classList.add('active');
})
longoBt.addEventListener('click', () =>{
alterarContexto('descanso-longo');
longoBt.classList.add('active');
})
function alterarContexto(contexto) {
botoes.forEach(function (contexto){
contexto.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?<br>
<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;
}
}
const contagemRegressiva = () => { //parando o temporizador quando chegar no 0.
if(tempoDecorridoEmSegundos<=0){
zerar();//chamando a função para zerar e retornar o intervalo em zero.
alert('Tempo finalizado!');
return; // para o temporizador
}
//decrementar o temporizador
iniciar();//chamando a função para executar automatizado a contagem regressiva.
tempoDecorridoEmSegundos -=1; //menor ou igual a 1 decrementando
console.log('Temporizador: ' +tempoDecorridoEmSegundos);//concatenação = relacionamento, ligação de idéias.
}
startPauseBt.addEventListener('click', contagemRegressiva);
function iniciar(){//função para decrementar
intervaloId = setInterval (contagemRegressiva, 1000); /* chamando a variável e utilizando o método setinterval para executar
uma função ou código em determinado periodod e tempo. o setInterval recebe sempre dois parâmentros, o prrimeiro ser executado
a função contagem regressiva e o segundo com quanto tempo que quer que seja executado 1000 quer dizer 1 segundo, milesegundos.*/
}
function zerar() {//zerando a contagem regressiva
clearInterval(intervaloId); // limpando o intervaloid
intervaloId = null; //atribuindo null
}