📝 To-Do App Frontend

Aplicación web sencilla para crear, completar y eliminar tareas con filtros.
Desarrollada con HTML5, CSS3 y JavaScript, con persistencia en el navegador usando localStorage.

---

🚀 Características principales

💡 Funcionalidad	🧩 Descripción
✏️ Agregar tareas	Permite ingresar nuevas tareas desde el input o presionando Enter.
✅ Completar/Desmarcar tareas	Marcar tareas como completadas con botón verde y cambiar estado visual.
🗑️ Eliminar tareas	Eliminar cualquier tarea con botón rojo de forma inmediata.
🔎 Filtros dinámicos	Filtrar tareas: Todas, Completadas o Pendientes con colores diferenciados.
💾 Persistencia	Las tareas se guardan en el navegador usando localStorage, incluso al recargar.
🎨 Diseño moderno	Botones con colores suaves diferenciados, fondo crema y contenedor blanco.

---

💻 Tecnologías utilizadas

🧩 Tecnología	💡 Descripción	🌐 Uso principal
🌐 HTML5	Estructura de la app	Input, botones, lista
🎨 CSS3	Estilos visuales	Colores, layout, filtros, hover
📜 JavaScript	Lógica frontend	Agregar, completar, eliminar y filtrar tareas
💾 localStorage	Persistencia en navegador	Guardar tareas entre sesiones

---

🗂️ Estructura del proyecto

todo_frontend/
│
├── index.html          # Página principal
├── style.css           # Estilos visuales
├── script.js           # Lógica de la app (agregar, completar, eliminar, filtrar)
├── static/
│   └── todo_demo.png   # Captura de pantalla de la app
└── README.md           # Documentación profesional

---

⚙️ Cómo ejecutar la aplicación

Sigue estos pasos para probar la To-Do App en tu navegador local:

1️⃣ Abrir la carpeta del proyecto

Navega a la carpeta donde descargaste o clonaste el proyecto:

cd "ruta/a/tu/proyecto/todo_frontend"

2️⃣ Abrir el archivo index.html

• Haz doble clic en index.html
• O abre tu navegador y arrastra el archivo dentro de él

3️⃣ ¡Listo!

Ahora puedes:

• Agregar nuevas tareas
• Marcar tareas como completadas
• Eliminar tareas
• Filtrar tareas por Todas / Completadas / Pendientes

Nota: La app guarda tus tareas en el navegador usando localStorage, por lo que no se pierden al recargar la página.

---

🖼️ Vista previa de la To-Do App

💡 A continuación puedes ver cómo se visualiza la aplicación en funcionamiento:
El diseño utiliza colores suaves diferenciados, filtros dinámicos y botones claros para cada acción.

---

💡 Próximas Mejoras

• 🧩 Agregar categorías o etiquetas para las tareas
• 🧪 Implementar pruebas automatizadas con JavaScript
• ☁️ Sincronización con backend para guardar tareas en base de datos
• ⚡ Optimización para dispositivos móviles
• 🎨 Añadir animaciones y efectos de transición suaves

---

👩‍💻 Autora

Iveth Parra Herrera
Desarrolladora en formación | Backend & Frontend Junior
📍 Colombia
🔗 LinkedIn
💻 GitHub

✨ Proyecto desarrollado como parte del Portafolio 2025 - Iveth Parra Herrera ✨

💡 “El código es una herramienta para construir soluciones reales y dejar huella.”