quando escrevo algum item não aparece na li embaixo. não aparece nada. antes estava aparecendo. na hora de implementar o botão de deletar, parou de aparecer.

mesmo fazendo o live server no vs code,... no momento de digitar o item, nada aparece na hora de incluir.

segue

index:

  <form class="form" action="">
    <input class="form-input" type="text" data-form-input>
    <button class="form-button" data-form-button> Novo Item </button>
  </form>

  <ul class="list" data-list>

  </ul>
</div>
<script type="module" src="main.js"></script>

main:

import BotaoConclui from './componentes/concluiTarefa.js'

import BotaoDeleta from './componentes/deletaTarefa.js'

const criarTarefa = (evento) => { 

evento.preventDefault()

const lista = document.querySelector('[data-list]')
const input = document.querySelector('[data-form-input]')
const valor = input.value

const tarefa = document.createElement('li')
    tarefa.classList.add('task')

const conteudo = `<p class="content">${valor}</p>`

    tarefa.innerHTML = conteudo

    tarefa.appendChild(BotaoConclui())
    tarefa.appendChild(BotaoDeleta())
    lista.appendChild(tarefa)
    input.value = " "

}

const novaTarefa = document.querySelector('[data-form-button]')

    novaTarefa.addEventListener('click', criarTarefa)

conclui Tarefa

function 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

deleta Tarefa

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