https://github.com/juliorom/todo-list-react
Una aplicación de lista de tareas interactiva y minimalista desarrollada en React. Permite a los usuarios agregar, eliminar y gestionar tareas con un diseño limpio inspirado en el clásico formato de "todos". Demuestra habilidades en React, manejo de estado y estilización dinámica. 🚀
https://github.com/juliorom/todo-list-react
bootstrap5 prop-types react vite
Last synced: 3 months ago
JSON representation
Una aplicación de lista de tareas interactiva y minimalista desarrollada en React. Permite a los usuarios agregar, eliminar y gestionar tareas con un diseño limpio inspirado en el clásico formato de "todos". Demuestra habilidades en React, manejo de estado y estilización dinámica. 🚀
- Host: GitHub
- URL: https://github.com/juliorom/todo-list-react
- Owner: JulioRom
- Created: 2025-01-08T22:52:28.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-09T03:01:18.000Z (5 months ago)
- Last Synced: 2025-03-02T09:14:37.874Z (3 months ago)
- Topics: bootstrap5, prop-types, react, vite
- Language: JavaScript
- Homepage:
- Size: 49.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.es.md
Awesome Lists containing this project
README
# Aplicación de lista de tareas pendientes
Esta es una aplicación de lista de tareas pendientes sencilla e interactiva creada con React. La aplicación permite a los usuarios administrar sus tareas de manera eficiente con un diseño limpio y minimalista inspirado en el diseño clásico de "tareas pendientes". La aplicación incluye características clave como la adición y eliminación de tareas y contadores de tareas para mejorar la usabilidad.
## Características
- **Agregar tareas**: los usuarios pueden agregar fácilmente nuevas tareas escribiendo en el campo de entrada y presionando "Enter".
- **Eliminar tareas**: las tareas se pueden eliminar haciendo clic en el botón Eliminar, que solo aparece al pasar el cursor sobre la tarea.
- **Contador de tareas**: un pie de página muestra la cantidad de tareas restantes de manera dinámica.
- **Diseño interactivo**: estilo minimalista con efectos de desplazamiento para una mejor experiencia del usuario.
## Instalación
Para ejecutar el proyecto localmente, siga estos pasos:
1. Clone el repositorio:
```bash
git clone
```
2. Navegue hasta el directorio del proyecto:
```bash
cd todo-list-app
```
3. Instale las dependencias:
```bash
npm install
```
4. Inicie el servidor de desarrollo:
```bash
npm start
```
5. Abra su navegador y navegue hasta:
```
http://localhost:3000
```
## Descripción general del código
### Componente principal: `Todo`
- Administra el estado general de la aplicación.
- Almacena tareas en una variable de estado (`useState`).
- Maneja la adición y eliminación de tareas.
### Componentes
1. **`InputField`**:
- Un campo de entrada controlado para agregar tareas.
- Actualiza el estado del componente principal cuando el usuario presiona "Enter".
2. **`TaskList`**:
- Muestra la lista de tareas.
- Delega cada tarea al componente `TaskItem`.
3. **`TaskItem`**:
- Representa una tarea individual.
- Incluye un botón de eliminación que aparece solo al pasar el mouse sobre el elemento.
4. **Footer**:
- Muestra dinámicamente la cantidad de tareas restantes.
- Proporciona información cuando no quedan tareas.
## Estructura del archivo
```plaintext
.
├── src
│ ├── componentes
│ │ ├── InputField.js # Componente de campo de entrada
│ │ ├── TaskList.js # Lista de tareas
│ │ └── TaskItem.js # Componente de tarea individual
│ ├── App.js # Punto de entrada principal para la aplicación
│ ├── index.js # Punto de entrada de React
│ └── styles.css # Estilo de la aplicación
├── público
│ └── index.html # Plantilla HTML principal
├── package.json # Dependencias del proyecto y scripts
└── README.md # Documentación del proyecto
```
## Mejoras futuras
- **Edición de tareas**: permite a los usuarios editar tareas existentes directamente.
- **Filtrado de tareas**: agrega opciones para filtrar tareas (p. ej., completadas, activas).
- **Persistencia de tareas**: guarda las tareas en el almacenamiento local para conservarlas en las distintas sesiones.
## Licencia
Este proyecto tiene licencia MIT.
## Autor
- **Desarrollado por JulioRom**
- **Contacto:** [[email protected]](correo a:[email protected])
- **GitHub:** [https://github.com/JulioRom](https://github.com/JulioRom)