 En este artículo, aprenderá a crear una   , 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. calculadora de préstamos usando JavaScript  Muchas de estas calculadoras que ya he hecho son notables entre ellas   ,   de javascript. Si conoce JavaScript, puede crearlo fácilmente. calculadora de IMC usando javascript calculadora de edad  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).    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. Mire su demostración en vivo  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,   y el color de fondo es completamente blanco. height: 420px   <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.   y se utiliza el color azul para aumentar el tamaño del encabezado. Font-size: 30px   <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í   y color blue se usan para colocar el texto en el medio. text-align: center   <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   , seguramente los diseños anteriores no son un problema para que lo entienda. Ahora es el momento de hacerlo completamente operativo. HTML CSS básico  Si conoce   , puede comprender fácilmente el siguiente código JavaScript. He puesto la información necesaria en cada línea aquí. JavaScript básico     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   para hacer esta calculadora de préstamos, puede obtener la ayuda del enlace de descarga a continuación. descargar el código   Publicado por primera vez  aquí

2022 - HackerNoon Contributor of the Year - Css3

2022 - HackerNoon Contributor of the Year - Html

2022 - HackerNoon Contributor of the Year - Website Development

Nominated for 2022 - HackerNoon Contributor of the Year - Html

Nominated for 2022 - HackerNoon Contributor of the Year - Css3

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps