Meu projeto final

todolist.js

import DoneButton from "./components/doneButton.js"
import DeleteButton from "./components/deleteButton.js"

    function AddItem() {
        const list = document.querySelector('[data-list]')
        const input = document.querySelector('[data-form-input]')
        let valor = input.value

        const content = `<p class="content">${valor}</p>`
        const task = document.createElement('li')
        const div = document.createElement('div')
        task.classList.add('task')
        task.innerHTML = content

        task.appendChild(div)
        list.appendChild(task)
        div.appendChild(DoneButton())
        div.appendChild(DeleteButton())
        input.value = ""
    }

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

    newItem.addEventListener('click', (evento) => {
        evento.preventDefault();
        AddItem();
    })

deleteButton.js

    function DeleteButton() {
        const deleteButton = document.createElement('button')
        deleteButton.classList.add('delete-button')
        deleteButton.innerText = 'delete'
        deleteButton.addEventListener('click', deleteTask)

        return deleteButton
    }

    const deleteTask = (evento) => {
        const locateTarget = evento.target
        const deletedTask = locateTarget.parentElement.parentElement
        deletedTask.remove()
    }

    export default DeleteButton

doneButton.js

function DoneButton() {
    const doneButton = document.createElement('button')
    doneButton.classList.add('check-button')
    doneButton.innerText = 'done'
    doneButton.addEventListener('click', checkTask)

    return doneButton
}

const checkTask = (evento) => {
    const checkButton = evento.target
    const checkedTask = checkButton.parentElement.previousSibling
    checkedTask.classList.toggle('done')
}

export default DoneButton