Design a Loan Calculator using JavaScript
The Loan Calculator can be used to calculate the monthly EMI of the loan by taking the total amount, months to repay, and the rate of interest.
Formula Used:
interest = (amount * (rate * 0.01))/months;
total = ((amount/months) + interest);
Approach
- Extract values from HTML input elements (
#amount
, #rate
, #months
).
- Calculate monthly interest using the formula
(amount * (rate * 0.01)) / months
.
- Calculate the total payment per month using the formula
((amount / months) + interest).toFixed(2)
.
- Update the HTML content of an element with id
total
to display the calculated EMI (Equated Monthly Installment).
- The calculations are likely triggered by a function call, such as when a button is clicked or a form is submitted. Ensure proper event binding or call this function as needed.
Example: We have have above-explained approach in this example.
Javascript
function Calculate() {
const amount = document.querySelector( "#amount" ).value;
const rate = document.querySelector( "#rate" ).value;
const months = document.querySelector( "#months" ).value;
const interest = (amount * (rate * 0.01)) / months;
const total = ((amount / months) + interest).toFixed(2);
document.querySelector( "#total" )
.innerHTML = "EMI : (₹)" + total;
}
|
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 >
< 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 >
|
CSS
body {
background-color : yellow;
font-family : 'Trebuchet MS' ;
}
h 1 {
font-size : 35px ;
}
h 1 {
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 ;
}
|
Output: Click here to see live code output
Design a Loan Calculator using JavaScript
Last Updated :
17 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...