const html = document.querySelector('html');
const focoBt = document.querySelector('.app__card-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longoBt = document.querySelector('.app__card-button--longo');
const banner = document.querySelector('.app__image');
const titulo = document.querySelector('.app__title');
const botoes = document.querySelectorAll('.app__card-button');
const startPauseBt = document.querySelector('#start-pause');
const musicaFocoInput = document.querySelector('#alternar-musica');
const iniciarouPausarBt = document.querySelector('#start-pause')
const alterarIconePlay = document.querySelector('.app__card-primary-butto-icon');
const musica = new Audio('/sons/luna-rise-part-one.mp3');
const musicaPause = new Audio('/sons/pause.mp3');
const musicaPlay = new Audio('/sons/play.wav');
const musicaFim = new Audio('/sons/beep.mp3');
musica.loop = true;
let tempoDecorridoEmSegundos = 10;
let intervaloID = null;
musicaFocoInput.addEventListener('change', () => {
if(musica.paused){
musica.play();
} else {
musica.pause();
}
})
focoBt.addEventListener('click', () => {
alterarContexto('foco')
focoBt.classList.add('active')
});
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((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.<br>
<strong class="app__title-strong">Faça uma pausa longa.</strong>
`
default:
break;
}
}
const contagemRegressiva = () => {
if (tempoDecorridoEmSegundos <= 5) {
//musicaFim.play()
zerar()
return
}
tempoDecorridoEmSegundos -= 1;
console.log("temporizador", + tempoDecorridoEmSegundos)
}
startPauseBt.addEventListener('click', iniciarouPausar)
function iniciarouPausar() {
if (intervaloID) {
musicaPause.play()
zerar()
return
}
musicaPlay.play();
intervaloID = setInterval(contagemRegressiva, 1000)
iniciarouPausarBt.textContent = "Pausar";
alterarIconePlay.setAttribute('src', '/imagens/pause.png')
}
function zerar(){
clearInterval(intervaloID)
iniciarouPausarBt.textContent = "Começar"
alterarIconePlay.setAttribute('src', '/imagens/play_arrow.png')
intervaloID = null;
}
# Alguém consegue me dizer pq não estou conseguindo mudar os ícones ? Quando eu aperto começar o sinal de 'play' some, e não aparece mais, e não consigo nem inserir o ícone de pause e nem inserir o de play novamente.