1
resposta

temporizador nao funciona no console log

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('#star-pause')
const musicaFocoInput = document.querySelector('#alternar-musica')
const musica = new Audio('/sons/luna-rise-part-one.mp3') 

let tempoDecorridoEmSegundos = 5
let intervaloId = null

musica.loop = true

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(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? <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>
    `

        default:
            break;
    }
}
const contagemRegressiva = () =>{
    if(tempoDecorridoEmSegundos <= 0){
        zerar()
        alert('Tempo finalizado!')
        return 
    }
    tempoDecorridoEmSegundos -= 1
    console.log('temporizador: ' + tempoDecorridoEmSegundos)

}

startPauseBt.addEventListener('click', iniciar)

function iniciar (){
    intervaloId = setInterval(contagemRegressiva, 1000)
}
function zerar (){
    clearInterval(intervaloId)
    intervaloId= null
}

ele apresenta no console log um erro na linha 79

1 resposta

Oi, Kevin, tudo bem?

O erro TypeError: Cannot read properties of null está ocorrendo porque na linha 8, ao capturar o valor do botão de Start (const startPauseBt), você esqueceu da letra T no final da palavra Start.

Como está no seu código:

document.querySelector('#star-pause')

Como deve ser:

document.querySelector('#start-pause')

Faça essa pequena modificação e tente novamente a execução do código.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!