Aplicación web de gestión de tareas desarrollada con HTML, CSS y JavaScript vanilla como proyecto del Módulo 4 de JS FullStack.
- Crear tareas con descripción, prioridad y fecha límite opcional
- Prioridades con tres niveles: Alta 🔴, Media 🟡 y Baja 🟢
- Contador regresivo en tiempo real para tareas con fecha límite
- Filtrado de tareas por estado: Todas, Pendientes y Completadas
- Marcar como completada o revertir el estado con un solo clic
- Eliminar tareas individualmente
- Estadísticas en tiempo real: total, completadas y pendientes
- Reloj en vivo integrado en la barra superior
- Carga desde API externa (JSONPlaceholder) con 5 tareas de ejemplo
- Persistencia con localStorage: guardar y cargar el estado de la sesión
- Contador de caracteres con límite de 120 en la descripción
- Notificaciones flotantes para feedback de acciones
- Limpiar todo: reseteo completo de la lista
proyecto/
├── index.html # Estructura principal de la aplicación
├── CSS/
│ └── styles.css # Estilos de la interfaz
└── JS/
└── Script.js # Lógica de la aplicación
El proyecto se organiza en dos clases principales:
Representa una tarea individual con los siguientes atributos:
| Atributo | Descripción |
|---|---|
id |
Identificador único |
description |
Texto descriptivo de la tarea |
prioridad |
"alta", "media" o "baja" |
state |
"pendiente" o "completada" |
dateLimit |
Fecha límite (opcional) |
dateBegin |
Fecha y hora de creación (auto-generada) |
Método: changeState() — alterna entre "pendiente" y "completada".
Controla toda la lógica de la aplicación:
| Método | Descripción |
|---|---|
updateList(filtro) |
Renderiza la lista de tareas aplicando el filtro activo |
completeTask(id) |
Alterna el estado de una tarea en el DOM y en el gestor |
deleteTask(id) |
Elimina una tarea del DOM y del array |
updateContadores() |
Actualiza los stats de la barra superior |
updateFiltro(filtro) |
Cambia el filtro activo y recarga la lista |
mostrarNotificacion() |
Muestra un toast flotante por 2 segundos |
iniciarCountdown(id) |
Inicia un setInterval de cuenta regresiva por tarea |
cargarDesdeAPI() |
Obtiene 5 tareas desde JSONPlaceholder (async/await) |
- Clonar o descargar el repositorio.
- Abrir
index.htmldirectamente en el navegador (no requiere servidor). - Crear tareas usando el formulario del panel izquierdo.
Los datos se guardan en localStorage del navegador bajo las claves:
| Clave | Contenido |
|---|---|
tareas |
Array de tareas en formato JSON |
contador |
Valor actual del contador de IDs |
filtro |
Filtro activo al momento de guardar |
⚠️ El estado se carga manualmente mediante el botón "Cargar desde Storage".
Se utiliza JSONPlaceholder como fuente de datos de prueba.
- Endpoint:
GET https://jsonplaceholder.typicode.com/todos?_limit=5 - Las tareas se importan con prioridad
"baja"y conservan su estado (completed) original.
- HTML5
- CSS3
- JavaScript ES6+ (Clases, async/await, localStorage, setInterval)
- Google Fonts — Fuzzy Bubbles
Daniel Quezada Agüero - Proyecto académico — Módulo 4 JS FullStack