Na conclusão da tarefa, ocorrem erros tanto no target quando no parentElement, assim, a tarefa não é marcada como concluida. Não consegui encontrar solução...
const formButton = document.querySelector('[data-form-button]')
const criarTarefa = (evento) => {
//previse o refresh padrão do formulário
evento.preventDefault()
//busca input e captura o valor
const formInput = document.querySelector('[data-form-input]')
const valorInput = formInput.value
//busca lista
const listaTarefa = document.querySelector('[data-list]')
//cria um novo li, adiciona uma classe, um conteúdo
const novoLi = document.createElement('li')
novoLi.classList.add('task')
const conteudoLi = `<p>${valorInput}</p>`
novoLi.innerHTML = conteudoLi
//adicionando o botão criado(função()) à li
novoLi.append(botaoConclui())
//anexando o novo Li à lista(ul)
listaTarefa.appendChild(novoLi)
//limpa input
formInput.value = ''
}
//criar tarefa
formButton.addEventListener('click', criarTarefa)
//criando o botão concluir
const botaoConclui = () => {
const btnConclui = document.createElement('button')
btnConclui.classList.add('check-button') //incluindo classe
btnConclui.innerHTML = "Concluir" //adicionando texto ao botão
btnConclui.addEventListener('click', concluirTarefa)
return btnConclui
}
//concluindo a tarefa
const concluirTarefa = (evento) => {
const btnConclui = evento.target
const tarefaCompleta = btnConclui.parentElement //pegando o pai do elemento (li)
tarefaCompleta.classList.toggle('done')
}