Estou fazendo o projeto em paralelo com as listas de exercicios, até realizar os exercicios desse segmento, o codigo parecia funcionar bem, mas agora meu timer não aparece e não consigo mudar de foco e descanso. Até tentei comparar com o do professor, mas não consigo identificar o erro
const btnAddTarefa = document.querySelector('.app__button--add-task')
const formAddTarefa = document.querySelector('.app__form-add-task')
const textArea = document.querySelector('.app__form-textarea')
const ulTarefas = document.querySelector('.app__section-task-list')
const cancelar = document.querySelector('.app__form-footer__button--cancel')
const paragrafoDescricaoTarefa = document.querySelector('.app__section-active-task-description')
const tarefas = JSON.parse(localStorage.getItem('tarefas')) || []
let tarefaSelecionada = null
let liTarefaSelecionada = null
function attTarefas() {
localStorage.setItem('tarefas', JSON.stringify(tarefas))
}
function criarElementoTarefa(tarefa) {
const li = document.createElement('li')
li.classList.add("app__section-task-list-item")
const svg = document.createElement('svg')
svg.innerHTML = `
<svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#FFF"></circle>
<path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z"
fill="#01080E"></path>
</svg>
`
const paragrafo = document.createElement('p')
paragrafo.textContent = tarefa.descrição
paragrafo.classList.add("app__section-task-list-item-description")
const btnNovaTarefa = document.createElement('button')
btnNovaTarefa.classList.add("app_button-edit")
btnNovaTarefa.onclick = () => {
const novaDescricao = prompt('Qual o nome da nova tarefa? ')
if (novaDescricao) {
paragrafo.textContent = novaDescricao
tarefa.descrição = novaDescricao
attTarefas()
}
}
const imgBotao = document.createElement('img')
imgBotao.setAttribute('src', './imagens/edit.png')
btnNovaTarefa.append(imgBotao)
li.append(svg)
li.append(paragrafo)
li.append(btnNovaTarefa)
li.onclick = () => {
document.querySelectorAll('.app__section-task-list-item-active')
.forEach(elemento => {
elemento.classList.remove('app__section-task-list-item-active')
})
if (tarefaSelecionada == tarefa) {
paragrafoDescricaoTarefa.textContent = ''
tarefaSelecionada = null
liTarefaSelecionada = null
return
}
tarefaSelecionada = tarefa
liTarefaSelecionada = li
paragrafoDescricaoTarefa.textContent = tarefa.descrição
li.classList.add('app__section-task-list-item-active')
}
return li
}
btnAddTarefa.addEventListener('click', () => {
formAddTarefa.classList.toggle('hidden')
})
formAddTarefa.addEventListener('submit', (evento) => {
evento.preventDefault();
const tarefa = {
descrição: textArea.value
}
tarefas.push(tarefa)
const elementoTarefa = criarElementoTarefa(tarefa)
ulTarefas.append(elementoTarefa)
attTarefas()
textArea.value = ''
formAddTarefa.classList.add('hidden')
})
tarefas.forEach(tarefa => {
const elementoTarefa = criarElementoTarefa(tarefa)
ulTarefas.append(elementoTarefa)
});
cancelar.onclick = () => {
textArea.value = ''
formAddTarefa.classList.toggle('hidden')
}
document.addEventListener('FocoFinalizado', () => {
if (tarefaSelecionada && liTarefaSelecionada) {
liTarefaSelecionada.classList.remove('app__section-task-list-item-active')
liTarefaSelecionada.classList.add('app__section-task-list-item-complete')
liTarefaSelecionada.querySelector('button').setAttribute('disabled', 'disabled')
}
})
segue tambem o codigo alterado do 'primeiro' js
const contagemRegressiva = () => {
if (tempoDecorridoEmSeg <= 0) {
somOver.play()
alert('Tempo finalizado!')
const focoAtivo = html.getAttribute('data-contexto') == 'foco'
if (focoAtivo) {
const evento = new CustomEvent('FocoFinalizado')
document.dispatchEvent(evento)
}
zerar()
return
}
tempoDecorridoEmSeg -= 1
mostrarTempo()
}
