Aplicación web moderna para gestionar tareas con alto contraste (WCAG AAA), edición inline, filtros y modo oscuro. Todo en JavaScript puro sin dependencias.
- ✅ Agregar, editar y eliminar tareas con texto, fecha y prioridad
- 🔍 Filtro por tareas completadas, pendientes o todas
- 🎨 Prioridad visual con tarjetas de borde coloreado (verde/amarillo/rojo)
- ✏️ Edición inline: clic en el icono de editar carga la tarea en el formulario
- 🌓 Modo oscuro con persistencia en localStorage
- ♿ Accesibilidad:
aria-pressed,aria-labels,sr-only,role="status", navegación por teclado - 📱 Responsive: diseño adaptable a móviles
- 💾 Persistencia local: las tareas se guardan en localStorage
- HTML5
- CSS3 (gradientes, backdrop-filter, custom properties)
- JavaScript ES6+ (módulos, delegación de eventos)
- Tipografía: Space Grotesk (títulos), Inter (texto)
- Iconos: SVG inline (Heroicons/Lucide style)
- Fondo: gradiente oscuro
linear-gradient(135deg, #1e3a8a, #312e81)con contraste AAA - Tarjetas de tareas: fondo blanco semitransparente, sombra suave, borde de prioridad
- Header: vidrio (
backdrop-filter: blur) con título grande y subtítulo
📁 todolist/
├── index.html
├── style.css
├── src/
│ ├── main.js # Inicialización y modo oscuro
│ ├── store.js # Estado (CRUD, localStorage)
│ ├── events.js # Eventos de UI (delegación, edición)
│ └── ui.js # Render puro de tarjetas (sin efectos)
├── images/
│ └── car.jpeg
├── README.md
└── screenshot.png
-
Clona el repositorio:
git clone https://github.com/tuusuario/todolist-js.git
Abre
index.htmlen tu navegador.
¡Listo! No necesitas servidor ni dependencias externas.
- Ratio de contraste WCAG AAA (≥ 7:1) en título y elementos principales
- Navegación por teclado con soporte de Enter para añadir tareas
- Atributos
aria-label,aria-pressed,aria-live="polite"para lectores de pantalla - Mensajes de error no intrusivos (notificación toast)
🌟 Autor Creado por Oswaldo Castaneda
📝 Licencia MIT © 2025