Skip to content

Instantly share code, notes, and snippets.

@parzibyte
Created Jul 18, 2021
Embed
What would you like to do?
// Definir función que refresca la lista de tareas a partir del arreglo global
const refrescarListaDeTareas = () => {
$contenedorTareas.innerHTML = "";
for (const [indice, tarea] of tareas.entries()) {
// Crear el enlace para eliminar la tarea
const $enlaceParaEliminar = document.createElement("a");
$enlaceParaEliminar.classList.add("enlace-eliminar");
$enlaceParaEliminar.innerHTML = "×";
$enlaceParaEliminar.href = "";
$enlaceParaEliminar.onclick = (evento) => {
evento.preventDefault();
if (!confirm("¿Eliminar tarea?")) {
return;
}
tareas.splice(indice, 1);
// Guardar los cambios
guardarTareasEnAlmacenamiento(tareas);
refrescarListaDeTareas();
};
// El input para marcar la tarea como terminada
const $checkbox = document.createElement("input");
$checkbox.type = "checkbox";
$checkbox.onchange = function () { // No es una función flecha porque quiero acceder al elemento a través de this
if (this.checked) {
tareas[indice].terminada = true;
} else {
tareas[indice].terminada = false;
}
guardarTareasEnAlmacenamiento(tareas);
refrescarListaDeTareas();
}
// El span que llevará el contenido de la tarea
const $span = document.createElement("span");
$span.textContent = tarea.tarea;
// Y finalmente el elemento de la lista
const $li = document.createElement("li");
// Verificamos si la tarea está marcada para marcar los elementos
if (tarea.terminada) {
$checkbox.checked = true;
$span.classList.add("tachado");
}
$li.appendChild($checkbox);
$li.appendChild($span);
$li.appendChild($enlaceParaEliminar);
$contenedorTareas.appendChild($li);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment