Cree una calculadora de préstamos de JavaScript con HTML y CSS

En este artículo, aprenderá a crear una calculadora de préstamos usando JavaScript , HTML y CSS. Este tipo de calculadora de préstamos lo ayudará a calcular cuánto debe pagar por mes por el monto de su préstamo. Entonces la calculadora podrá calcularte muy fácilmente.

Muchas de estas calculadoras que ya he hecho son notables entre ellas calculadora de IMC usando javascript , calculadora de edad de javascript. Si conoce JavaScript, puede crearlo fácilmente.

Calculadora de préstamos usando JavaScript

Primero creé un cuadro en la página web. Usé un encabezado en ese cuadro usando las etiquetas h1. Luego están los tres cuadros de entrada. El primer cuadro de entrada para ingresar el monto del préstamo, el segundo cuadro de entrada para ingresar el porcentaje de la tasa de interés y el tercer cuadro de entrada para ingresar el mes de pago (cuántos meses tomará pagar el préstamo).

Mire su demostración en vivo para aprender cómo funciona. Aquí he tratado de dar una explicación completa de cómo hice esta calculadora de préstamos de JavaScript.

Al final de todo, hay una pantalla que ayudará a mostrar el resultado. Como decía, esta calculadora de préstamos podrá calcular cuánto tienes que pagar al mes con intereses. Tomé la ayuda de HTML CSS y JavaScript para hacerlo. HTML CSS lo diseñó y JavaScript lo implementó.

1. Cree un cuadro para Calculadora de préstamos

Primero lo diseñé usando HTML y CSS. Creé un cuadro usando el siguiente código HTML. El ancho de este cuadro: 345px, height: 420px y el color de fondo es completamente blanco.

 <div id="loancal"> </div>

 body{ background: rgb(8, 144, 110); font-family: sans-serif; } #loancal { width: 345px; height: 420px; background-color:white; color: #fff; padding: 10px; margin: 100px auto; } 

2. Crea un título

Ahora he usado un encabezado. Este encabezado no tiene un significado especial, pero se ha utilizado para realzar la belleza. Font-size: 30px y se utiliza el color azul para aumentar el tamaño del encabezado.

 <h1>Loan Calculator</h1

 h1 { font-size:30px; text-align: center; color: rgb(9, 95, 172); margin-bottom: 35px; } 

3. Haz 3 cuadros de entrada

Ahora he creado unos 3 cuadros de entrada para ingresar información relacionada con el préstamo. Los cuadros de entrada son principalmente para ingresar el monto del préstamo, la tasa de interés y el mes de pago total.

Los valores mínimos y máximos se establecen para cada cuadro de entrada. Puede ingresar su información entre ese valor mínimo y máximo.

 <div class="input"> <p>Loan Amount: $</p> <input id="amount" type="number" min="1" max="5000000" onchange="computeLoan()"> <p>Interest Rate: %</p> <input id="interest_rate" min="0" max="100" value="10" step=".1" onchange="computeLoan()"> <p>Months to Pay: </p> <input id="months" type="number" min="1" max="300" value="1" step="1" onchange="computeLoan()"> </div>

 .input{ margin-left: 40px; margin-right: 40px; } p{ color: rgb(17, 103, 170); font-size: 17px; } input{ width: 100%; height: 33px; } 

4. Crea una pantalla para ver los resultados

Ahora es el momento de crear un área pequeña. Los resultados se pueden encontrar en esta área. Aquí text-align: center y color blue se usan para colocar el texto en el medio.

 <h2 id="payment"></h2>

 h2{ text-align: center; color: rgb(6, 111, 139); margin-top: 35px; }

5. Código JavaScript para Calculadora de préstamos

Si conoce el HTML CSS básico , seguramente los diseños anteriores no son un problema para que lo entienda. Ahora es el momento de hacerlo completamente operativo.

Si conoce JavaScript básico , puede comprender fácilmente el siguiente código JavaScript. He puesto la información necesaria en cada línea aquí.

 function computeLoan(){ //The global constants of some class functions(value) are determined using the following three line codes const amount = document.querySelector('#amount').value; const interest_rate = document.querySelector('#interest_rate').value; const months = document.querySelector('#months').value; //The interest rate has been calculated. //The total amount of interest per month has been calculated by the following calculation. //That calculation is stored in a constant called "interest" const interest = (amount * (interest_rate * 0.01)) / months; //The bottom line calculates how much to pay each month. //Here the total amount is divided by the month (which you will input) and the monthly interest is added to it. //All these calculations are stored in a constant called "payment". let payment = ((amount / months) + interest).toFixed(2); //regedit to add a comma after every three digits //That is, a comma (,) will be added after every three numbers. //Example 50,000 payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //With the help of innerHTML, the information stored in the "payment" is displayed on the webpage. document.querySelector('#payment').innerHTML = `Monthly Payment = ${payment}` } 

Con suerte, el tutorial anterior le ha ayudado a saber cómo crear esta calculadora de préstamos de JavaScript. Ya he compartido cómo hacer una calculadora de IMC de JavaScript .

Si necesita descargar el código para hacer esta calculadora de préstamos, puede obtener la ayuda del enlace de descarga a continuación.

Publicado por primera vez aquí