Olá pessoal,

Alguém consegue me ajudar a identificar o que está errado com meu código?

Obs: antes de eu rodar o servidor e separar o código em arquivos diferentes, apenas o botão deletar funcionava. O botão concluir nunca funcionou.

main:

import BotaoConclui from "./componentes/concluirTarefa" import BotaoDeleta from "./componentes/deletaTarefa"

const criaTarefa = (evento) => { evento.preventDefault() const input = document.querySelector('[data-form-input]') const valor = input.value;

const lista = document.querySelector('[data-list]')

const tarefa = document.createElement('li')
tarefa.classList.add('task')
const conteudo = `<p class="content">${valor}</p>`
tarefa.innerHTML = conteudo
tarefa.appendChild(BotaoConclui())
lista.appendChild(tarefa)
tarefa.appendChild(BotaoDeleta())

input.value = " "

}

const novaTarefa = document.querySelector('[data-form-button]') novaTarefa.addEventListener('click', criaTarefa)

concluirTarefas:

const BotaoConclui = () => { const botaoConclui = document.createElement('button') botaoConclui.classList.add('check-button') botaoConclui.innerText = 'concluir' botaoConclui.addEventListener('click', concluirTarefa)

return botaoConclui

}

const concluirTarefa = (evento) => { const botaoConclui = evento.target

const tarefaCompleta = botaoConclui.parentElement

tarefaCompleta.classList.toggle('done')

}

export default BotaoConclui

deletaTarefa

const BotaoDeleta = () => { const botaoDeleta = document.createElement('button')

botaoDeleta.innerText = 'deletar'
botaoDeleta.addEventListener('click' , deletarTarefa)
return botaoDeleta

}

const deletarTarefa = (evento) => { const botaoDeleta = evento.target

const tarefaCompleta = botaoDeleta.parentElement

tarefaCompleta.remove()

return botaoDeleta

}

export default BotaoDeleta