La Calculadora de préstamos se puede usar para calcular el EMI mensual del préstamo tomando el monto total, los meses para pagar y la tasa de interés.
Enfoque: El enfoque es muy simple, tomaremos 3 entradas del usuario, es decir, monto (monto total del préstamo), tasa (la tasa de interés) y meses (número de meses para pagar). Usando estos tres, podemos calcular la cantidad total. Por último mostraremos la cantidad total.
Fórmula:
interest = (amount * (rate * 0.01))/months; total = ((amount/months) + interest);
Usando HTML, estamos diseñando la estructura simple y dando estilo usando CSS (CSS interno). En el momento de la entrada, estamos llamando a la función de cálculo() y mostrando el resultado. La función de cálculo() toma la entrada usando el atributo HTML llamado – onchange (el atributo onchange activa el momento en que se cambia el valor del elemento).
Prerrequisito: Conceptos básicos de HTML, CSS y JavaScript.
Implementación: crearemos dos archivos separados, es decir, HTML y JavaScript, y vincularemos el archivo JavaScript dentro del archivo HTML.
- HTML – (índice.html)
- JavaScript – (aplicación.js)
Archivo HTML:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Loan Calculator</title>
<style>
body {
background-color: yellow;
font-family: 'Trebuchet MS';
}
h1 {
font-size: 35px;
}
h1 {
font-size: 21px;
margin-top: 20px;
}
.calculator {
width: 400px;
height: 450px;
background-color: black;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
padding: 20px 0px 0px 100px;
border-radius: 50px;
color: white;
}
input {
padding: 7px;
width: 70%;
margin-top: 7px;
}
</style>
</head>
<body>
<div class="calculator">
<h1>Loan Calculator</h1>
<!-- Calling Calculate function defined in app.js -->
<p>Amount (₹) :
<input id="amount" type="number"
onchange="Calculate()">
</p>
<p>Interest Rate :
<input id="rate" type="number"
onchange="Calculate()">
</p>
<p>Months to Pay :
<input id="months" type="number"
onchange="Calculate()">
</p>
<h2 id="total"></h2>
</div>
<script src="app.js"></script>
</body>
</html>
Archivo JavaScript:
app.js
function Calculate() {
// Extracting value in the amount
// section in the variable
const amount = document.querySelector("#amount").value;
// Extracting value in the interest
// rate section in the variable
const rate = document.querySelector("#rate").value;
// Extracting value in the months
// section in the variable
const months = document.querySelector("#months").value;
// Calculating interest per month
const interest = (amount * (rate * 0.01)) / months;
// Calculating total payment
const total = ((amount / months) + interest).toFixed(2);
document.querySelector("#total")
.innerHTML = "EMI : (₹)" + total;
}
Salidas:
Publicación traducida automáticamente
Artículo escrito por imsushant12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA