El simulador de créditos es una herramienta está diseñada para simular los aspectos financieros de un préstamo, permitiendo a los usuarios ingresar parámetros específicos como el monto del préstamo, la tasa de interés, el periodo de pago, el número de cuotas y el periodo de gracia. Basándose en estos datos, el simulador proporciona resultados detallados que incluyen el interés total a pagar, el monto total del préstamo, el monto de cada cuota, y las fechas de inicio y finalización de los pagos.
A continuación te muestro los código de manera organizada. Recomendamos a que revises el blog entero, actualmente tenemos sistemas de código libre que te podrían servir ya sean de maneral personal y empresarial, sistemas en todo los lenguajes, así como tutoriales de que te podrían servir.
Introducción
El simulador de créditos es una herramienta interactiva diseñada para facilitar la simulación del préstamos financieros. Utilizando HTML5 para estructurar la interfaz y Bootstrap 5 junto con CSS personalizado para asegurar una apariencia atractiva y responsiva, se proporcionará una experiencia de usuario óptima. JavaScript se encargará de la lógica de cálculo, validando los datos ingresados por el usuario y realizando las operaciones matemáticas necesarias para calcular el interés total, el monto total a pagar, las cuotas individuales y las fechas de pago. La integración y validación de datos asegurarán la coherencia y precisión de los resultados. Finalmente, se realizarán pruebas exhaustivas y optimización del código para garantizar el rendimiento y la facilidad de uso, haciendo del simulador una herramienta esencial para gestionar compromisos financieros de manera efectiva.
Video Demostrativo
En el siguiente video se explica todo el funcionamiento del sistema de ventas multialmacén de manera exhaustiva, módulo por módulo con todas sus características.
Pasos y Herramientas para el Desarrollo
Para iniciar con el desarrollo del proyecto considere lo recomendado así no tenga problemas, los cuales son los siguientes:
- Xampp, es un paquete de software gratuito y de código abierto que facilita la creación de un entorno de desarrollo local (no importa la versión).
- Editor de código, hay montón de programas. Puede ser Visual Studio Code, Sublime Text, Atom, etc.
Los pasos a seguir con la instalación del servidor local de manera correcta:
- Descargar e instalar XAMPP.
- Abrir el programa XAMPP.
- Iniciar los servicios Apache y MySQL.
los pasos para crear el proyecto:
- Dirigirse a la ruta del gestor de archivo C:/xampp/htdocs/crear carpeta con nombre simulador.
- Dentro de la carpeta simulador cree un archivo de nombre index.php.
- Abrir el archivo index.php con cualquier editor que tenga instalado, en ello tendrá que pegar los código que se le ha proporcionado.
- Para ejecutar y hacer las pruebas es necesario usar el navegador y usar colocar el url http://localhost/simulador
Nota: Si tiene complicaciones con el código, te brindaremos la ayuda necesaria.
Código Fuente
Estructura HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simulador de Créditos</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="title-container">
<h1 class="title">Simulador de Créditos - Financieras</h1>
</div>
<div class="row gy-4">
<div class="col-md-4">
<div>
<label for="monto" class="form-label">Monto</label>
<input type="text" name="monto" id="monto" class="form-control">
</div>
</div>
<div class="col-md-2">
<div>
<label for="periodo" class="form-label">Periodo de pago</label>
<select class="form-select" name="periodo" id="periodo">
<option value="Diario">Diario</option>
<option value="Semanal">Semanal</option>
<option value="Quincenal">Quincenal</option>
<option value="Mensual">Mensual</option>
<option value="Bimestral">Bimestral</option>
<option value="Trimestral">Trimestral</option>
<option value="Medio_ano">Medio año</option>
<option value="Anual">Anual</option>
</select>
</div>
</div>
<div class="col-md-2">
<div>
<label for="plazo" class="form-label">Cuotas</label>
<input type="text" name="plazo" id="plazo" class="form-control">
</div>
</div>
<div class="col-md-2">
<div>
<label for="interes" class="form-label">Tasa de interés</label>
<input type="text" name="interes" id="interes" class="form-control">
</div>
</div>
<div class="col-md-2">
<div>
<label for="gracia" class="form-label">Tiempo de gracias</label>
<input type="text" name="gracia" id="gracia" class="form-control">
</div>
</div>
<div class="col-md-4">
<div>
<label for="interestotal" class="form-label">Interés</label>
<input type="text" name="interestotal" id="interestotal" class="form-control" readonly>
</div>
</div>
<div class="col-md-4">
<div>
<label for="cuotaindividual" class="form-label">Monto a pagar por Cuota</label>
<input type="text" name="cuotaindividual" id="cuotaindividual" class="form-control" readonly>
</div>
</div>
<div class="col-md-4">
<div>
<label for="totalpagar" class="form-label">Total a pagar</label>
<input type="text" name="totalpagar" id="totalpagar" class="form-control" readonly>
</div>
</div>
<div class="col-md-4">
<div>
<label for="fechainicio" class="form-label">Fecha inicio de pago</label>
<input type="text" name="fechainicio" id="fechainicio" class="form-control" readonly>
</div>
</div>
<div class="col-md-4">
<div>
<label for="ultimafecha" class="form-label">Última fecha de pago</label>
<input type="text" name="ultimafecha" id="ultimafecha" class="form-control" readonly>
</div>
</div>
<div class="col-md-12 d-flex justify-content-center">
<button type="button" id="calcularButton" class="btn btn-primary">Calcular</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Estilo CSS
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
}
.container {
background-color: #ffffff;
border-radius: 15px;
padding: 30px;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
}
.form-control {
border-radius: 10px;
border-color: #ced4da;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
border-radius: 10px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
.form-label {
font-weight: bold;
color: #007bff;
}
.title {
font-size: 2.5rem;
font-weight: bold;
color: #007bff;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
padding: 10px;
border-radius: 10px;
background: linear-gradient(45deg, #e3f2fd, #bbdefb);
display: inline-block;
}
.title-container {
text-align: center;
margin-bottom: 30px;
}
</style>
JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
let calcularButton = document.getElementById('calcularButton');
let feriados = ["01/06/2024", "05/10/2024", "21/10/2024", "25/12/2024"].map(fecha => new Date(fecha));
calcularButton.addEventListener('click', function(e) {
e.preventDefault();
let monto = parseFloat(document.getElementById('monto').value);
let plazo = parseInt(document.getElementById('plazo').value);
let interes = parseFloat(document.getElementById('interes').value) / 100;
let periodo = document.getElementById('periodo').value;
let gracia = parseInt(document.getElementById('gracia').value) || 0;
if (!validarDatos(monto, plazo, interes)) return;
let dias_del_periodo;
switch (periodo) {
case 'Diario': dias_del_periodo = 1; break;
case 'Semanal': dias_del_periodo = 7; break;
case 'Quincenal': dias_del_periodo = 15; break;
case 'Mensual': dias_del_periodo = 30; break;
case 'Bimestral': dias_del_periodo = 60; break;
case 'Trimestral': dias_del_periodo = 90; break;
case 'Medio_ano': dias_del_periodo = 180; break;
case 'Anual': dias_del_periodo = 365; break;
default: dias_del_periodo = 1;
}
let tiempoEnMeses = Math.ceil((plazo * dias_del_periodo) / 30);
let interesTotal = monto * interes * tiempoEnMeses;
let totalAPagar = monto + interesTotal;
let cuotaIndividual = totalAPagar / plazo;
document.getElementById('totalpagar').value = "S/." + totalAPagar.toFixed(2);
document.getElementById('cuotaindividual').value = "S/." + cuotaIndividual.toFixed(2);
document.getElementById('interestotal').value = "S/." + interesTotal.toFixed(2);
let fechaActual = new Date();
let fechaInicioPago = calcularFechaInicioPago(fechaActual, dias_del_periodo, periodo, gracia);
let fechaUltimoPago = calcularFechaFinalPago(fechaInicioPago, plazo, dias_del_periodo, periodo);
document.getElementById('fechainicio').value = fechaInicioPago.toLocaleDateString();
document.getElementById('ultimafecha').value = fechaUltimoPago.toLocaleDateString();
});
function calcularFechaInicioPago(fecha, dias_del_periodo, periodo, gracia) {
let nuevaFecha = new Date(fecha);
if (periodo === 'Diario') {
nuevaFecha.setDate(nuevaFecha.getDate() + 1 + gracia);
} else if (periodo === 'Semanal') {
nuevaFecha.setDate(nuevaFecha.getDate() + 7 + gracia);
} else if (periodo === 'Quincenal') {
nuevaFecha.setDate(nuevaFecha.getDate() + 15 + gracia);
} else if (periodo === 'Mensual') {
nuevaFecha.setMonth(nuevaFecha.getMonth() + 1);
} else if (periodo === 'Bimestral') {
nuevaFecha.setMonth(nuevaFecha.getMonth() + 2);
} else if (periodo === 'Trimestral') {
nuevaFecha.setMonth(nuevaFecha.getMonth() + 3);
} else if (periodo === 'Medio_ano') {
nuevaFecha.setMonth(nuevaFecha.getMonth() + 6);
} else if (periodo === 'Anual') {
nuevaFecha.setFullYear(nuevaFecha.getFullYear() + 1);
} else {
nuevaFecha.setDate(nuevaFecha.getDate() + dias_del_periodo);
}
return fechaHabil(nuevaFecha);
}
function calcularFechaFinalPago(fechaInicio, plazo, dias_del_periodo, periodo) {
let fechaFinal = new Date(fechaInicio);
for (let i = 0; i < plazo - 1; i++) {
if (periodo === 'Diario') {
fechaFinal.setDate(fechaFinal.getDate() + 1);
} else if (periodo === 'Semanal') {
fechaFinal.setDate(fechaFinal.getDate() + 7);
} else if (periodo === 'Quincenal') {
fechaFinal.setDate(fechaFinal.getDate() + 15);
} else if (periodo === 'Mensual') {
fechaFinal.setMonth(fechaFinal.getMonth() + 1);
} else if (periodo === 'Bimestral') {
fechaFinal.setMonth(fechaFinal.getMonth() + 2);
} else if (periodo === 'Trimestral') {
fechaFinal.setMonth(fechaFinal.getMonth() + 3);
} else if (periodo === 'Medio_ano') {
fechaFinal.setMonth(fechaFinal.getMonth() + 6);
} else if (periodo === 'Anual') {
fechaFinal.setFullYear(fechaFinal.getFullYear() + 1);
} else {
fechaFinal.setDate(fechaFinal.getDate() + dias_del_periodo);
}
fechaFinal = fechaHabil(fechaFinal);
}
return fechaFinal;
}
function fechaHabil(fecha) {
while (esDomingoOferiado(fecha)) {
fecha.setDate(fecha.getDate() + 1);
}
return fecha;
}
function esDomingoOferiado(fecha) {
if (fecha.getDay() === 0) return true; // Domingo
let dateString = fecha.toLocaleDateString();
for (let feriado of feriados) {
if (feriado.toLocaleDateString() === dateString) {
return true;
}
}
return false;
}
function validarDatos(monto, plazo, interes) {
if (isNaN(monto) || monto <= 0) {
alert("Por favor, ingrese un monto válido.");
return false;
}
if (isNaN(plazo) || plazo <= 0) {
alert("Por favor, ingrese un plazo válido.");
return false;
}
if (isNaN(interes) || interes <= 0) {
alert("Por favor, ingrese una tasa de interés válida.");
return false;
}
return true;
}
});
</script>