Construir un gestor de tareas desde cero con JavaScript es una de las formas más efectivas de practicar manipulación del DOM, manejo de eventos y persistencia de datos. A lo largo de este recorrido se explica paso a paso cómo capturar información de un formulario, crear elementos dinámicamente y mantener los datos entre sesiones gracias a una web API muy útil.
¿Qué funcionalidades tiene el task manager?
El proyecto final es una aplicación visualmente sencilla pero con características clave que demuestran conceptos fundamentales del desarrollo frontend [0:03]:
- Cambiar el tema de la interfaz con un botón toggle.
- Agregar tareas a una lista mediante un formulario.
- Modificar y borrar tareas existentes.
- Persistencia de datos: al refrescar el navegador, las tareas y el tema seleccionado se mantienen.
Esa persistencia se logra utilizando Local Storage [1:07], una web API que permite almacenar datos en el navegador del usuario. Esto significa que la información sobrevive incluso cuando se cierra o se recarga la página, sin necesidad de un servidor o base de datos.
Un detalle importante es que en el HTML existe una tarea hardcodeada como ejemplo [0:44]. Cada vez que se refresca la página, esa tarea aparece por defecto. Si se elimina del código HTML, deja de mostrarse, lo que confirma que el resto de tareas provienen exclusivamente de Local Storage.
¿Cómo se estructura el HTML y el JavaScript inicial?
La estructura HTML es sencilla: un formulario con un input para escribir la tarea, un botón de Add Task y un contenedor tipo lista donde se agregan los elementos [1:24]. El CSS se maneja en un archivo independiente para mantener el código organizado.
Desde JavaScript, lo primero es obtener referencias a los elementos del DOM que se van a manipular. Se utilizan dos constantes principales [2:15]:
taskForm: referencia al formulario, obtenida con document.getElementById usando el ID específico del formulario.taskList: referencia al contenedor donde se renderizan las tareas.
javascript
const taskForm = document.getElementById('task-form');
const taskList = document.getElementById('task-list');
Usar getElementById es la forma más directa de seleccionar un elemento cuando se cuenta con un ID único en el HTML [2:30].
¿Cómo se captura el valor del formulario con el evento submit?
Con el elemento del formulario ya disponible, se le agrega un event listener de tipo submit [3:02]. Este evento se dispara cuando el usuario presiona Enter o hace clic en el botón de envío.
javascript
taskForm.addEventListener('submit', function(event) {
event.preventDefault();
const taskInput = document.getElementById('task-input');
const task = taskInput.value;
console.log(task);
});
¿Por qué se usa preventDefault?
El método event.preventDefault() evita el comportamiento por defecto del formulario [3:30], que normalmente recarga la página al hacer submit. Sin esta línea, los datos se perderían con cada envío porque el navegador refrescaría todo el contenido.
¿Cómo se obtiene el valor del input?
Dentro del callback del evento, se selecciona el input por su ID y se accede a su propiedad .value [4:05]. Esa propiedad contiene el texto que el usuario escribió. El valor se almacena en una constante llamada task.
Existe otra forma de acceder a los campos de un formulario: utilizar la propiedad elements del formulario para buscar por atributos como type o name [4:40]. Sin embargo, seleccionar directamente por ID resulta más sencillo y legible.
Al probar en la consola del navegador, al escribir "hola" y presionar Enter, el valor aparece correctamente en la línea del console.log [5:10]. Esto confirma que la captura del dato funciona.
Un error común durante este proceso es olvidar una coma en la sintaxis [4:58], lo que genera un problema que el navegador reporta inmediatamente. Revisar la consola ante cualquier fallo es una práctica esencial.
Esta primera parte sienta las bases: capturar el valor del input dentro del formulario al disparar el evento submit. A partir de aquí, el siguiente paso es construir funciones que creen los elementos HTML dinámicamente y generen los botones de edición y eliminación, dividiendo la lógica para que el código sea más escalable y fácil de mantener.
¿Has trabajado con Local Storage en algún proyecto? Comparte tu experiencia y las dificultades que encontraste.
