tengo dos problemas que surgieron durante este curso.
adjunto el código e imagenes
1 - en icono de eliminar me aparece dos veces y para eliminar el elemnto debo presionar los dos
)
y presionado uno
)
y luego avanzando en el curso no me permite o no funciona el atributo type="module"
)
dejo el código como lo tengo, pero estoy seguro que esta como en la clase script.js
import checkComplete from "../../components/checkComplete.js";
import deleteIcon from "../../components/deleteIcon.js";
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 = "";
const taskContent = document.createElement("div");
taskContent.appendChild(checkComplete());
const titleTask = document.createElement("span")
titleTask.classList.add("task");
titleTask.innerText = value;
taskContent.appendChild(titleTask);
taskContent.appendChild(deleteIcon());
task.appendChild(taskContent);
task.appendChild(deleteIcon());
list.appendChild(task);
};
// arrow function
btn.addEventListener("click", createTask);checkComplete.js
const checkComplete = ()=> {
const i = document.createElement("i");
i.classList.add("far");
i.classList.add("fa-check-square");
i.classList.add("icon");
i.addEventListener("click", completeTask);
return i;
};
//? immediately invoed function expressoin IIFE
const completeTask = (event)=>{
const element = event.target;
element.classList.toggle("fas");
element.classList.toggle("completeIcon");
element.classList.toggle("far");
};
export default checkComplete;deleteIcon.js
const deleteIcon = ()=>{
const i = document.createElement("i");
i.classList.add("fas", "fa-trash-alt", "trashIcon", "icon");
i.addEventListener("click", deleteTask)
return i
}
const deleteTask = (event)=> {
const parent = event.target.parentElement;
parent.remove();
}
export default deleteIcon