( ()=> {
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')
        task.classList.add('task')
        task.innerHTML = content

        list.appendChild(task)
        task.appendChild(doneButton())
        input.value = " "
    }

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

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

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

        return button
    }

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