Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

[Bug] No me da lo mismo que en el vídeo

Referente al curso JS en la Web: Manipulación del DOM con JavaScript, en el capítulo Concluir una tarea y actividad Creando el botón concluir

por Freddy Jesus Contreras Santiago
| 96.4k xp | 10 posts

El profesor hace nuevas constantes para agregar el icono de la checklist, hago los mismo pasos y no me sale el mismo resultado que el profesor.

Mi codigo: 



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

const createTask = (evento) => {
    evento.preventDefault();
    const input = document.querySelector("[data-form-input]");
    const value = input.value;
    const list = document.querySelector ("[data-list]");
    const task = document.createElement("li");
    task.classList.add("card");
    input.value = " ";
    console.log(checkComplete());
    const taskContent = document.createElement("div");
    taskContent.appendChild(checkComplete());
    const content = `
        ${checkComplete()}
        <span class="task">${value}</span>
        <i class="fas fa-trash-alt trashIcon icon"></i>`;
    // task.innerHTML = content;
    task.appendChild(taskContent);
    list.appendChild(task); 

    console.log(content);

};
console.log(btn);

btn.addEventListener("click", createTask);

const checkComplete = () => {
    const i = document.createElement("i");
    i.classList.add("far");
    i.classList.add("a-check-square");
    i.classList.add("icon");

return i
};

Mi pantalla:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Pantalla del profesor:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadGracias :)

2 respuestas
solución!
por Facundo Aranda
| 124.2k xp | 26 posts

Freddy creo que te falto una parte del código agregar...

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

const createTask =  (evento) => {
    evento.preventDefault();
    const input = document.querySelector("[data-form-input]");
    const value = input.value;
    const list = document.querySelector("[data-list]");
    const task = document.createElement("li");
    task.classList.add('card');
    input.value = '';
    //Backticks = ``
    console.log(checkComplete());
    const taskContent = document.createElement("div");
    taskContent.appendChild(checkComplete());
    const titleTask = document.createElement("span");
    titleTask.classList.add("task");
    titleTask.innerText = value;
    taskContent.appendChild(titleTask);
    const content = `<i class="fas fa-trash-alt trashIcon icon"></i>`;
    //task.innerHTML = content;
    task.appendChild(taskContent);

    list.appendChild(task);

    console.log(content);
};

//Arrow functions o funciones anonimas...
btn.addEventListener("click", createTask);

const checkComplete = () => {
    const i = document.createElement("i");
    i.classList.add("far");
    i.classList.add("fa-check-square");
    i.classList.add("icon");
    return i;
}
por Freddy Jesus Contreras Santiago
| 96.4k xp | 10 posts

Había subido todo el código, el error era que me equivoque en una letra en el nombre del icono. Gracias igual por ayudar.