Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kuro-98/administrador-de-presupuesto
💰 Administrador de Presupuesto - Una herramienta interactiva desarrollada en JavaScript puro para gestionar tus gastos y controlar tu presupuesto de manera efectiva.
https://github.com/kuro-98/administrador-de-presupuesto
ecmascript ecmascript6 javascript juanpablodelatorrevaldez udemy udemy-course udemy-course-project vanilla-javascript
Last synced: 9 days ago
JSON representation
💰 Administrador de Presupuesto - Una herramienta interactiva desarrollada en JavaScript puro para gestionar tus gastos y controlar tu presupuesto de manera efectiva.
- Host: GitHub
- URL: https://github.com/kuro-98/administrador-de-presupuesto
- Owner: Kuro-98
- Created: 2024-05-22T23:21:35.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-29T17:47:00.000Z (8 months ago)
- Last Synced: 2024-11-12T14:19:42.567Z (2 months ago)
- Topics: ecmascript, ecmascript6, javascript, juanpablodelatorrevaldez, udemy, udemy-course, udemy-course-project, vanilla-javascript
- Language: JavaScript
- Homepage: https://kuro-98.github.io/administrador-de-presupuesto/
- Size: 30.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Administrador de Presupuesto 💰
Una herramienta interactiva desarrollada en JavaScript puro para gestionar tus gastos y controlar tu presupuesto de manera efectiva. Inspirado en el curso de JavaScript del profesor Juan Pablo De la Torre Valdez.
## Características Principales
- **Añadir Gastos:** Permite añadir gastos y ver el monto restante del presupuesto.
- **Eliminar Gastos:** Posibilidad de eliminar gastos específicos del listado.
- **Cálculo del Presupuesto Restante:** Actualización automática del presupuesto restante al añadir o eliminar gastos.
- **Alertas Dinámicas:** Mensajes de alerta para informar sobre la adición de gastos, errores en la entrada de datos y agotamiento del presupuesto.
- **Cambio de Colores:** Indicadores visuales que cambian de color según el estado del presupuesto (suficiente, advertencia, crítico).
## Tecnologías Utilizadas
- **JavaScript:** Desarrollo de toda la lógica del proyecto para manejar el presupuesto y los gastos.
- **HTML y CSS:** Proporcionados por el curso del profesor Juan Pablo De la Torre Valdez, con algunos ajustes menores para adaptarse a la lógica de JavaScript.
- **Manipulación del DOM:** Uso de JavaScript para actualizar dinámicamente el DOM con la información de los gastos y el presupuesto restante.
- **Clases en JavaScript:** Uso de clases para organizar el código, incluyendo clases para manejar el presupuesto y la interfaz de usuario.
## Lecciones Aprendidas
- **Manipulación del DOM:** Aprendí a seleccionar y modificar elementos del DOM, crear elementos dinámicamente y actualizar la interfaz de usuario en respuesta a las interacciones del usuario.
- **Uso de Clases en JavaScript:** Implementé clases para estructurar mi código de manera más organizada y mantener la lógica del negocio (manejo del presupuesto) separada de la lógica de la interfaz de usuario.
- **Gestión de Eventos:** Manejo de eventos del DOM para responder a las acciones del usuario, como la adición y eliminación de gastos.
- **Validación de Entradas:** Implementé validaciones para asegurar que los datos ingresados por el usuario sean correctos y significativos.
- **Manejo de Estado:** Aprendí a mantener y actualizar el estado de la aplicación (presupuesto y gastos) y reflejar estos cambios en la interfaz de usuario.
## Instrucciones de Despliegue
1. Clona este repositorio: `git clone [email protected]:Kuro-98/administrador-de-presupuesto.git`
2. Abre el archivo `index.html` en tu navegador favorito.
3. Introduce tu presupuesto inicial y comienza a gestionar tus gastos.
## Créditos
Este proyecto fue desarrollado basado en los conocimientos adquiridos del curso de JavaScript del profesor Juan Pablo De la Torre Valdez.
---