App Finanzas Personales

Aplicación web desarrollada con fines educativos para calcular el ahorro mensual según los ingresos y gastos personales. Este proyecto fue creado como ejercicio dentro de un módulo de bootcamp Javascript.

Funcionalidades

• Ingreso personalizado de ingresos, renta, comida y transporte
• Cálculo automático de gastos totales y ahorro mensual
• Visualización gráfica en formato doughnut usando Chart.js
• Interfaz responsiva y moderna utilizando Bootstrap
• Validación de datos de entrada
• Opción de reiniciar el cálculo con un solo clic

Estructura del Proyecto

El proyecto sigue una estructura clara y organizada, ubicada en una carpeta raíz:

/assets

├── /css

│ └── styles.css # Estilos personalizados

├── /js

│ └── script.js # Lógica principal en JavaScript

index.html # Página principal de la aplicación README.md # Documentación del proyecto

Instrucciones de Instalación y Ejecución

1. Descarga o clona este repositorio en tu computador.

2. Abre la carpeta del proyecto con tu editor de código preferido (por ejemplo, VSCode o WebStorm).

3. No es necesario instalar ninguna dependencia adicional, ya que es una aplicación frontend simple basada en HTML, CSS, JavaScript y Bootstrap.

4. Para ejecutar la app, simplemente abre el archivo index.html en tu navegador.

No se requiere servidor ni conexión a base de datos.

Funcionalidades Principales

• Permite ingresar ingresos mensuales y gastos en renta, comida y transporte.
• Calcula automáticamente el total de gastos y el ahorro mensual.
• Muestra un resumen visual de los datos ingresados mediante tarjetas (cards) y un gráfico tipo doughnut con Chart.js.
• Formatea los valores en pesos chilenos (CLP) para facilitar la lectura.
• Indica si existe ahorro o déficit financiero.
• Ofrece la opción de realizar un nuevo cálculo con un solo clic.
• Interfaz moderna, intuitiva y completamente responsiva.

Tecnologías Utilizadas

• HTML5: Para estructurar el contenido de la aplicación.
• CSS3 y Bootstrap 5: Para el diseño visual, responsividad y estilos predefinidos.
• JavaScript (ES6): Para la lógica de negocio, validaciones y manipulación del DOM.
• Chart.js: Para la visualización de datos mediante un gráfico de tipo doughnut.
• Git & GitHub: Para control de versiones y despliegue del repositorio.

Cómo usar esta aplicación

1. Abre el archivo index.html en un navegador moderno (como Chrome, Firefox o Edge).
2. Ingresa tus datos financieros:

• Ingresos mensuales
• Gasto en renta
• Gasto en comida
• Gasto en transporte

3. Haz clic en el botón "Calcular".
4. Visualiza el resumen de tu situación financiera:

• Detalle de gastos
• Ahorro o déficit
• Gráfico interactivo

5. Si deseas hacer otro cálculo, haz clic en "Nuevo cálculo" para volver al formulario.

Créditos

Esta aplicación fue creada por Magdalena Inalaf G. para fines académicos, como ejercicio individual del módulo de JavaScript.

Contacto:

• GitHub: https://github.com/MagdaIG
• Portafolio: https://inalaf.ca/
• LinkedIn: https://www.linkedin.com/in/minalaf/