Curso de JavaScript

Dale vida a la web.

Aprende a programar, crea interacciones y construye proyectos reales.

Construye la lógica

Con el estado y render() ya listos, agregas la lógica que faltaba: un formulario para agregar tareas y delegación de eventos en la lista para marcarlas completadas o eliminarlas.

Cargando editor...

Resultado

Preparando resultado...

Agrega 2 o 3 tareas nuevas escribiendo en el campo de texto, márcalas completadas haciendo clic sobre ellas, y elimina alguna con el botón "x".

Explicación

Cada acción (agregar, completar, eliminar) modifica el array tareas y vuelve a llamar a render():

elemento.dataset.indice

Lee el atributo data-indice del HTML como texto. Junto con Number(), te dice a qué posición del array corresponde ese elemento.

array.push(valor)

Agrega un nuevo elemento al final del array (ya visto en Arreglos); aquí lo usas para agregar una tarea nueva al escribir y hacer clic en Agregar.

array.splice(indice, 1)

Elimina 1 elemento del array a partir de la posición indice, modificando el array original.

render() después de cada cambio

Cada vez que tareas cambia (agregar, eliminar, marcar completada), se vuelve a llamar a render() para que la pantalla refleje el nuevo estado.

Reto rápido

Agrega 2 o 3 tareas nuevas, márcalas como completadas haciendo clic, y elimina alguna con el botón "x", todo sin tocar el JavaScript.

En esta lección

Ejemplo interactivo
Explicación de cada etiqueta
Cuándo usarlo
Errores comunes

Consejo

Fíjate que solo hay un addEventListener en lista (delegación de eventos): no importa cuántas tareas agregues, todos los <li> y botones "x" nuevos reaccionan al clic sin código adicional.

Dato extra

Guardar el índice de cada tarea en un atributo data-* (como data-indice) es una técnica muy común para conectar un elemento del DOM con su dato correspondiente en un array.

Error común

Usar evento.target.dataset.indice sin convertirlo con Number(): los atributos data-* siempre se leen como texto, así que comparar o usar ese valor como si fuera un número directamente puede no funcionar como esperas.

Siguiente paso

Ya tienes una lista de tareas completamente funcional: agregar, completar y eliminar. En el siguiente módulo vas a pulirla e integrarla con persistencia, para que recuerde tus tareas.

Ir a la siguiente lección