05 Faça como eu fiz

main.js

//Importando o botão conclui do arquivo concluir tarefa
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

    if( input.value != " " )
        {
            const tarefa = document.createElement('li')
            tarefa.classList.add('task')

            const conteudo = `<p class="content">${valor}</p>`
            tarefa.innerHTML = conteudo
            //Coloca o botão dentro da tarefa(tag pai) que é o li
            tarefa.appendChild(BotaoConclui())
            tarefa.appendChild(BotaoDeleta())
            lista.appendChild(tarefa)   
            input.value = " "
        }
    else 
    {
        alert("Favor inserir uma tarefa")
    }
}

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

novaTarefa.addEventListener('click', criarTarefa)

deletaTarefa.js

//Criando um componente (botão deletar tarefa - componete começa com maiúsculo)
const BotaoConclui = ()=>{
    //Criando um elemento
    const botaoConclui = document.createElement('button')
    //Adicionando uma classe ao botão
    botaoConclui.classList.add('check-button')
    //Adiciona um texto no botão
    botaoConclui.innerText = 'concluir'
    //Criando um evento
    botaoConclui.addEventListener('click', concluirTarefa)

    //Retornar o botão
    return botaoConclui
}

//Criando a função concluir tarefa (Arrow function - função de seta)
const concluirTarefa = (evento) => {
    //Retorna em qual elemento eu cliquei(target - alvo clicado)
    const botaoConclui = evento.target
    //Sobe um nó na árvore do DOM (parentElement - pega o pai do elemento clicado, pai do botão é li)
    const tarefaCompleta = botaoConclui.parentElement
    //Insere envento de rabisco na li
    tarefaCompleta.classList.toggle('done')
}

//exporta o botão concluir com a mesma sintaxe IIFE de protejer o código - Encapsular o código
export default BotaoConclui

concluiTarefa.js

//Criando um componente (botão deletar tarefa - componete começa com maiúsculo)
const BotaoDeleta = () => {
    const botaoDeleta = document.createElement('button')
    botaoDeleta.innerText = 'deletar'
    botaoDeleta.addEventListener('click', deletarTarefa)

    return botaoDeleta
}

const deletarTarefa = (evento) => {
    const botaoDeleta = evento.target
    //Pega o elemento pai do botãoDeleta que é a li
    const tarefaCompleta = botaoDeleta.parentElement
    //Removendo a li
    tarefaCompleta.remove()

    return botaoDeleta
}
//exporta o botão deleta com a mesma sintaxe IIFE de protejer o código - Encapsular o código
export default BotaoDeleta

Uma dúvida, Gostaria de exibir o alerta e não criar a lista, logo na primeira vez que clicar em novo item. Do modo que fiz, ele só faz isso a partir do segundo clique.