Manejo de Elementos en DOM

Muy entrenido hasta ahora, y aplicando lo aprendido anteriormente con el proyecto TODO App

Comparto como quedo mi JS (Le agregue algunas funcionalidades extras, de la pura emocion jajaja)

    // IIFE (Immediately invoked function expression )
( () => {
    const createTask = (evento) => {
        evento.preventDefault();

        const input = document.querySelector("[data-form-input]");
        const value = input.value;

        if (value != "") {
            const list = document.querySelector("[data-list]");
            const task = document.createElement("li");
            task.classList.add("card");
            input.value = "";

            addListTask(list, task, value);
        } else {
            alert("Debe ingresar una tarea");
        }
    }

    const addListTask = (list, task, value) => {
        const taskContent = document.createElement("div");

        const titleTask = document.createElement("span");
        titleTask.classList.add("task");
        titleTask.innerText = value;
        taskContent.appendChild(checkComplete());
        taskContent.appendChild(titleTask);


        task.appendChild(taskContent);
        task.appendChild(deleteTask());
        list.appendChild(task);
    }

    const checkComplete = () => {
        const i = document.createElement("i");
        i.classList.add("far", "fa-check-square", "icon");
        i.addEventListener("click", completeTask);

        return i;
    }

    const completeTask = (event) => {
        const element = event.target;
        element.classList.toggle("fas");
        element.classList.toggle("completeIcon");
        element.classList.toggle("far");
    }

    const deleteTask = () => {
        const i = document.createElement("i");
        i.classList.add("fas", "fa-trash-alt", "trashIcon", "icon");

        return i;
    }

    // Utilizamos concepto data attributes HTML5
    const btn = document.querySelector("[data-form-btn]");

    btn.addEventListener("click", createTask);
})();