1
respuesta

[Duda] completeTask

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

por Nailea Azenet Trujillo
| 81.6k xp | 19 posts

Saludos. Tengo el inconveniente que cuando selecciono el icono de completado se pone extraño.

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
    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)
}


console.log(btn);

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

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


const coompleteTask = (event) => {
  const element = event.target
  element.classList.toggle(`fast`);
  element.classList.toggle(`completeIcon`);
  element.classList.toggle(`far`);
}

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

1 respuesta
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Nailea!

Por lo que puedo ver en tu código, el problema que estás experimentando es que cuando seleccionas el icono de completado, se pone extraño. Esto puede ser causado por las clases que estás agregando y quitando en la función completeTask.

Una posible solución sería cambiar las clases que estás utilizando en completeTask. En lugar de usar fast, completeIcon y far, podrías usar clases más descriptivas y que no entren en conflicto con otras clases existentes en tu código. Por ejemplo, podrías usar completed, checked y unchecked.

Aquí te muestro cómo podrías modificar tu función completeTask:

const completeTask = (event) => {
  const element = event.target;
  element.classList.toggle('checked');
  element.classList.toggle('unchecked');
  element.classList.toggle('completed');
}

Recuerda también actualizar el nombre de la función en el evento addEventListener para que coincida con el cambio que hiciste:

i.addEventListener('click', completeTask);

Espero que esto solucione el problema que estás experimentando. Si tienes alguna otra pregunta, no dudes en hacerla.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)