Hoy te mostraré cómo hacer una lista de tareas pendientes con JavaScript puro, sin frameworks. A esto también se le conoce como To Do list.
Este proyecto de lista de pendientes es un proyecto básico para comenzar en este mundo de la programación web.
Solo usaremos JavaScript, arreglos, acceso a los elementos del DOM, eventos y almacenamiento con localstorage.
Lo que tendremos al final será una lista de tareas. A cada tarea podremos marcarla como completada o eliminarla, y también agregar una nueva tarea. Todo será guardado en LocalStorage dentro del navegador web.
Explicación general
Vamos a tener toda la lista de tareas en un arreglo. El arreglo estará lleno de objetos que van a tener la propiedad tarea y completada.
Ese arreglo será codificado como JSON y guardado en localstorage. Cada que el usuario modifique una tarea se modificará el arreglo en sí y después se guardará. Al inicio de la aplicación el arreglo se va a recuperar de localStorage.
Por cierto, usaremos las funciones push y splice para trabajar con el arreglo.
Diseñando página con HTML
Primero veamos la página. Contamos con un input que será para agregar una nueva tarea a nuestra To-Do list con JavaScript, además de una lista que será la contenedora de todos los elementos.
Todos los elementos tienen un id para que más tarde los recuperemos desde JavaScript usando querySelector.
Por el momento fíjate en inputNuevaTarea, btnAgregarTarea y contenedorTareas que vamos a recuperar más tarde desde JS:
Estilo CSS
Esta lista debe tener ciertos estilos. Lo único que he agregado es la separación así como el texto tachado para agregar esa clase a los elementos completados:
Lo del texto tachado se consigue colocando text-decoration en line-throug.
Guardar y recuperar lista de localstorage
Toda la lista va a vivir en un arreglo pero ese arreglo debe ser guardado de manera permanente para que las tareas pendientes sigan ahí incluso si se navega a otra página o se refresca la pestaña actual.
Lo único que hacemos es codificar y decodificar como JSON para después guardar en el almacenamiento del navegador.
En este caso la variable tareas será la lista, y como es una variable global no necesitamos que nos la pasen como argumento.
Agregar tarea
Vamos a escuchar el clic del botón. Cuando pase eso, recuperamos el valor del input y agregamos una nueva tarea en caso de que no sea una cadena vacía. Por defecto la tarea no está terminada.
Estoy invocando a guardarTareasEnAlmacenamiento (que ya expliqué anteriormente) y después a refrescarListaDeTareas, que vamos a ver a continuación.
Obtener lista de tareas pendientes con JavaScript
Lo que falta es la función más importante: la de recorrer el arreglo de tareas y dibujar toda la lista en el DOM. Es en esta función en donde escuchamos el evento change del input checkbox y marcamos a la tarea como terminada o como no terminada.
También es aquí donde escuchamos el clic del botón para eliminar una tarea, en donde simplemente modificamos el arreglo y guardamos las tareas en el almacenamiento. Es un poco larga pero queda así:
En este caso estoy haciendo un for of para recorrer el arreglo por índice y valor. Me gusta más esta versión que la de usar un forEach.
Ya para terminar obtenemos todas las tareas y refrescamos la lista al inicio de la aplicación:
Poniendo todo junto
El código completo de JavaScript queda así:
Si quieres puedes acceder al código completo aquí. Por otro lado, te dejo una demostración en este enlace y más contenido sobre JavaScript en este link.
