Hey guys in this post, we will create a Javascript mortgage loan calculator Follow this tutorial till the end to understand the javascript concepts. we will create this project step by step. The final version of the app is live on the internet.
Table of Contents
Complete source code
The below image shows you the project structure –
Add styles to the application
Create a style.css file and add the following content –
#loancal {
width: 375px;
height: 295px;
background-color:#000;
color: #fff;
margin-left: 275px;
margin-top: 95px;
padding-left: 90px;
padding-top: 20px;
}
#months, #amount, #interest_rate{
width: 175px;
height: 20px;
}
#interest_rate {
margin-left: 2px;
}
h1 {
font-size:40px;
}
Add scripts to the application
Create an app.js file and add the following content –
function computeLoan(){
const amount = document.querySelector('#amount').value;
const interest_rate = document.querySelector('#interest_rate').value;
const months = document.querySelector('#months').value;
const interest = (amount * (interest_rate * 0.01)) / months;
let payment = ((amount / months) + interest).toFixed(2); //calculate monthly payment
//regedit to add a comma after every three digits
payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //\B looks for a word boundary, ? says what to look for, \d looks for 3 digits in a row
document.querySelector('#payment').innerHTML = `Monthly Payment = ${payment}`
}
Add HTML to the application
Create an index.html file and add the following content –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="loancalculator.css">
<title>Mortgage Loan Calculator</title>
</head>
<body>
<div id="loancal">
<h1>Loan Calculator</h1>
<p>Loan Amount: $<input id="amount" type="number" min="1" max="5000000" onchange="computeLoan()"></p>
<p>Interest Rate: %<input id="interest_rate" min="0" max="100" value="10" step=".1" onchange="computeLoan()"></p>
<p>Months to Pay: <input id="months" type="number" min="1" max="300" value="1" step="1" onchange="computeLoan()"></p>
<h2 id="payment"></h2>
</div>
<script src="loancalculator.js"></script>
</body>
</html>
Screenshots
Download the complete source code from github repository
Original source https://jsbeginners.com/mortgage-loan-javascript-calculator/
That’s it for this post. Hope you liked it, if you did then please share this with your friends and colleagues. Also, share this post in your social media profiles. Thanks, I will see you in the next post.
Sir how to add Amortization Details month year with js.
sir what degine is good for the tool