[Projeto] Em andamento...

Segue a seguir a evolução do projeto Fokus;

const html = document.querySelector('html');
const timer = document.querySelector('#timer');
const image = document.querySelector('.app__image');
const title = document.querySelector('.app__title');
const botoes = document.querySelectorAll('.app__card-button')
const musicaFocoInput = document.querySelector('#alternar-musica')
const musica = new Audio('/sons/luna-rise-part-one.mp3')


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 botaoIniciar = document.querySelector('.app__card-primary-button');

const descansoFoco = 1500;
const duracaoDescansoCurto = 300;
const duracaoDescansoLongo = 900;

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)
   image.setAttribute('src', `./imagens/${contexto}.png`)
   switch (contexto) {
      case "foco":
         title.innerHTML = `Otimize sua produtividade,<br>
         <strong class="app__title-strong">mergulhe no que importa.</strong>`
         
         break;
   
      case "descanso-curto":
         title.innerHTML = `Que tal dar uma respirada? <strong class="app__title-strong">Faça uma pausa curta!</strong>`
         
         break;

      case "descanso-longo":
         title.innerHTML = `Hora de voltar à superfície.<strong class="app__title-strong"> Faça uma pausa longa.</strong>`

         break;

      default:
         break;
   }
}