Listorti

Tu gestor de tareas inteligente — organizá, priorizá y cumplí.

Listorti es una aplicación web progresiva (PWA) de gestión de tareas construida desde cero con HTML, CSS y JavaScript vanilla. Diseñada con un enfoque en la experiencia de usuario, permite organizar tareas por prioridad, fecha y hora, con vistas de lista, día y mes.

---

Funcionalidades

• Agregar, completar y eliminar tareas
• Prioridades por color — alta, media y baja
• Fechas y horarios exactos por tarea
• Vista lista con filtros — todas, pendientes, completadas y vencidas
• Vista día con franjas horarias de 00:00 a 23:00hs
• Vista mes tipo Google Calendar con tareas por día
• Calendario mensual con navegación
• Sección de próximas tareas
• Notificaciones del navegador a los 30 minutos, 5 minutos y al vencer
• Modal para agregar tareas directamente desde la vista día
• Persistencia de datos con localStorage
• Funciona sin conexión a internet
• Instalable como app en iPhone, Android y PC (PWA)
• Diseño responsive adaptado para móvil y desktop
• Footer fijo con copyright

---

Tecnologías utilizadas

• HTML5 semántico
• CSS3 — Flexbox, Grid, Media Queries, animaciones, variables CSS
• JavaScript ES6+ — módulos con import/export, arrow functions, destructuring, spread operator, template literals
• Web APIs — Notification API, localStorage, Service Worker API
• PWA — manifest.json y Service Worker para instalación offline
• Google Fonts — Inter y Space Grotesk
• Git y GitHub para control de versiones

---

Arquitectura del proyecto

El proyecto está organizado siguiendo el principio de responsabilidad única — cada archivo tiene una sola función:

listorti/
  ├── index.html
  ├── manifest.json
  ├── sw.js
  ├── LICENSE
  ├── README.md
  ├── icons/
  │     ├── icon-192.png
  │     └── icon-512.png
  ├── css/
  │     ├── base.css
  │     ├── layout.css
  │     ├── tabs.css
  │     ├── components.css
  │     ├── tareas.css
  │     ├── calendario.css
  │     ├── vistaDia.css
  │     ├── vistaMes.css
  │     └── responsive.css
  └── js/
        ├── main.js
        ├── storage.js
        ├── tareas.js
        ├── render.js
        ├── calendario.js
        ├── vistaDia.js
        └── vistaMes.js

Descripción de módulos JS

• main.js — punto de entrada, une todos los módulos y maneja los eventos