Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

0
respostas

Projeto final DOM

Olá, bom dia, queria saber se meu codigo está correto ou se faltou algo, e se após o timer terminar e o alerta tocar é normal que fique zerado até reiniciar a pagina ou clicar no tipo de timer ?? Também queria saber se tem como parar a musica no momento que o timer terminar e o alert toca, e como poderia fazer isso.

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 stratBt = document.querySelector('#start-pause');
const banner = document.querySelector('.app__image');
const temporizador = document.querySelector('#timer');
const imagem = 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');//Selecionando o input da musica
const iniciarOuPausarBt = document.querySelector('#start-pause span') // Selecionando o botao (id) e a tag (span).
const iconeIniciarOuPausar = document.querySelector('.app__card-primary-butto-icon');
const tempoNaTela = document.querySelector('#timer');

const musica = new Audio('./sons/luna-rise-part-one.mp3'); //Pegando arquivo de audio, coloamos em new Audio e o caminho para o audio desejado.
const audioTemporizadorFinalizado = new Audio('./sons/beep.mp3');
const audioPlay = new Audio('./sons/play.wav');
const audioPause = new Audio('./sons/pause.mp3');


let tempoDecorridoEmSegundos = 1500
let intervaloId = null


musica.loop = true //Fazendo com que a musica toque em loop e não só por 6 minutos.

//Forma mais pratica e menor:
musicaFocoInput.addEventListener('change', () => { //Usamos change pois é o que usa nos casos que checkbox
    if (musica.paused) { //Se a musica estiver pausada o botão está em desligar sendo assim ao apertar o botão vai dar play.
        musica.play()
    } else {
        musica.pause() //Caso não estaja pausada e sim tocando a musica, então ao clicar no botão vai pausar a musica.
    }
})
focoBt.addEventListener('click', () => {
    tempoDecorridoEmSegundos = 1500 // 25 minutos
    alterarContexto('foco')
    focoBt.classList.add('active')
});
curtoBt.addEventListener('click', () => {
    tempoDecorridoEmSegundos = 300 // 5 minutos
    alterarContexto('descanso-curto')
    curtoBt.classList.add('active')
});
longoBt.addEventListener('click', () => {
    tempoDecorridoEmSegundos = 900 // 15 minutos
    alterarContexto('descanso-longo')
    longoBt.classList.add('active')
});

function alterarContexto(contexto) {
    mostrarTempo();
    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.<br>
            <strong class="app__title-strong">Faça uma pausa longa.</strong>`

        default:
            break;
    }
}

const contagemRegressiva = () => {
    if (tempoDecorridoEmSegundos <= 0) {
        audioTemporizadorFinalizado.play()
        alert('Tempo finalizado!')
        zerar()
        return
    }
    tempoDecorridoEmSegundos -= 1 //Diminui 1 do tempo
    mostrarTempo();
    //console.log('Temporizador: ' + tempoDecorridoEmSegundos) // mostra o tempo que falta.
    //console.log('Id: ' + intervaloId)
}
startPauseBt.addEventListener('click', (iniciarOuPausar))

function iniciarOuPausar() {
    if (intervaloId) {
        audioPause.play()
        zerar()
        return
    }
    audioPlay.play()
    intervaloId = setInterval(contagemRegressiva, 1000) // A cada 1 segundo chama a contagem regressiva.
    iniciarOuPausarBt.textContent = 'Pausar';
    iconeIniciarOuPausar.setAttribute('src', './imagens/pause.png');
}

function zerar() {
    clearInterval(intervaloId)
    iniciarOuPausarBt.textContent = 'Começar'
    iconeIniciarOuPausar.setAttribute('src', './imagens/play_arrow.png');
    intervaloId = null}
    
function mostrarTempo () {
    const tempo = new Date(tempoDecorridoEmSegundos * 1000);
    const tempoFormatado = tempo.toLocaleTimeString('pt-Br',{minute: '2-digit', second:'2-digit'})
    tempoNaTela.innerHTML = `${tempoFormatado}`;}
mostrarTempo()