In this tutorial, we are going to learn how to create a loan calculator using Javascript libraries and CSS only. We will design the calculator page in two-column panes. The left pane will have the loan details information. While the right pane will display a graph or chart of the loan information entered. Let's get started with the loan information details first. We need our users to input or enter the following four questions.
- 1. How much loan a user want to borrow?
- 2. What is the loan interest rate?
- 3. How many years they want to take for the loan?
- 4. How often they want to make the payment whether it is monthly, fortnightly or weekly?
We will use the following libraries to build our loan calculator page.
1. Google Chart Library
We will use Google Chart library to build our loan chart. Below is the reference script path to Google Chart.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
2. noUiSlider Script Library
We will use this script to create an interactive slider for our loan term years. Below are the the reference script and css path to noUiSlider script.
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.1.0/nouislider.css" rel="stylesheet"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.1.0/nouislider.js"></script>
3. JQuery Script Library
We will use jquery script library for faster development. Feel free to exclude this if you prefer to use the native javascript. Just replace any code with JQuery reference $ symbol.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
4. Google Font
For better style of the loan calculator, I am going to use a Google Font named Roboto.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Let's get started with the HTML front end code.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.1.0/nouislider.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.1.0/nouislider.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="loan-container"> <div id="info-pane" class="box-pane"> <div class="heading-title bold">Calculate Your Loan.</div> <div class="row-input"> <label>How much would you like to borrow?</label> <div class="input-wrap"> <div class="currency-code">$</div> <input type="text" type="number" id="txtLoan" value="1000000"/> </div> </div> <div class="row-input"> <label>Loan interest rate?</label> <div class="input-wrap"> <div class="percentage-code">%</div> <input type="text" type="number" id="txtInterest" value="8.99" maxlength="5" class="short-input"/> </div> </div> <div class="row-input"> <label>How many years would you like the loan for?</label> <div id="yearRange" class="range-slider"></div> </div> <div class="row-input"> <label>How often would you like to make payments?</label> <ul class="ul-buttons"> <li class="selected" data-value="1">Monthly</li> <li data-value="2">Fortnightly</li> <li data-value="3">Weekly</li> </ul> </div> </div> <div id="graph-pane" class="box-pane"> <div id="repayment-total"> <div class="heading-title bold">Total interest</div> <div id="repayment-total-value" class="loan-value"> $<span id="interest-total">0</span> over <span class="orange-text"><span id="year-value">5</span> years</span> </div> </div> <div id="repayment-cycle"> <div class="heading-title bold">Payment would be</div> <div id="repayment-cycle-value" class="loan-value"> $<span id="repayment-value">0</span> per <span class="orange-text">fortnight</span> </div> </div> <div class="clear"></div> <div id="graph-chart"></div> </div> </div>
Here is the full css code for styling the loan calculator.
<style>
#loan-container{
text-align:left;
max-width: 1200px;
margin:20px auto;
box-sizing: border-box;
font-family: Roboto,Arial,sans-serif;
}
.box-pane{
border: 1px solid #ddd;
border-radius: 3px;
padding:25px;
box-sizing: border-box;
min-height:570px;
}
#info-pane{
float:left;
width:35%;
}
#graph-pane{
float:right;
width:63%;
}
.heading-title{
font-size:1.35em;
margin-bottom:15px;
}
#repayment-total{
float:left;
width:48%;
}
#repayment-cycle{
width:48%;
float:right;
text-align:right;
}
.row-input{
margin-bottom:20px;
}
.row-input label{
padding:5px 0;
display:block;
}
.row-input input, .row-input select{
background-color: #fff;
border: 1px solid #ddd;
padding: 9px 15px 10px;
outline: none;
border-radius:5px;
font-size:1em;
}
.input-wrap{
position:relative;
}
.currency-code{
position:absolute;
left:3px;
top:9px;
}
.percentage-code{
position:absolute;
left:75px;
top:9px;
}
.ul-buttons, .ul-buttons li{
margin:0;
padding:0;
list-style:none;
}
.ul-buttons li{
float:left;
background-color: #f1f1f1;
color: #6e6e6e;
padding: 8px 25px;
box-shadow: 0 2px 0 #ddd;
cursor: pointer;
font-size: 1rem;
line-height: 1.5;
width:33%;
float:left;
box-sizing: border-box;
text-align:center;
border-left:solid 1px #ffffff;
border-right:solid 1px #ffffff;
}
.ul-buttons li:hover, .ul-buttons li.selected{
background-color: #008094;
box-shadow: 0 2px 0 #006575;
color:#ffffff;
}
.note-text{
font-size:0.8em;
font-style:italic;
padding-top:5px;
}
.range-slider{
margin:15px 0 65px 0;
}
.noUi-value{
margin-top:4px;
font-size:1em;
}
.short-input{
width:80px;
}
.bold{
font-weight:normal;
}
.loan-value{
font-size:1.3em;
font-weight:bold;
}
.orange-text{
color: #f56a00;
}
#graph-chart{
width:100%;
height:450px;
}
.clear{
clear:both;
}
@media screen and (max-width: 992px) {
#info-pane, #graph-pane{
float:none;
width:100%;
margin-bottom:20px;
}
.box-pane{
min-height:500px;
}
}
</style>
I will do a quick explanation on how the above CSS style works. Basically, the loan calculator screen will have two columns. To position the column data input to the left position, we need to use the CSS float property. We set the value to the left while for the right column which is going to be the chart information will be set in the right position. Things to remember is when using a float property always set the after the tag to the clear position. This will make sure any followed up HTML elements do not follow the sibling float position. The rest of the styles are for prettying the loan calculator input, label and heading title only. There is also a media screen option has been added for friendly mobile view.
Here is the full javascript code for the loan calculator.
<script type="text/javascript">
//initial variables
var loanYear = 20;
var stepYear = 5;
var maxLoanYear = 30;
var paymentCycle = 1;
var monthlyRepayment = 0;
var monthlyInterest = 0;
var amortData = [];
//start up method
$(function(){
$(".ul-buttons li").click(function(){
$(".ul-buttons li").removeClass("selected");
$(this).addClass("selected");
paymentCycle = parseInt($(this).attr("data-value"));
calculateLoan();
});
//Add on blur event
$("#txtLoan, #txtInterest").on("blur", function(){
//Perform a check if loan or interest value has been entered invalid value, if it is, set the default value
if(isNaN($("#txtLoan").val())) {
$("#txtLoan").val(1000000);
}
if(isNaN($("#txtInterest").val())) {
$("#txtInterest").val(8.99);
}
calculateLoan();
});
});
//create the noUiSlider
var range = document.getElementById('yearRange');
noUiSlider.create(range, {
range: {
'min': 5,
'max': maxLoanYear
},
step: stepYear,
start: [loanYear],
margin: 300,
connect: true,
direction: 'ltr',
orientation: 'horizontal',
pips: {
mode: 'steps',
stepped: false,
density: 2
}
});
//Add the change event to redraw the graph and calculate loan
range.noUiSlider.on("change", function(value){
loanYear = parseInt(value[0]);
calculateLoan();
});
//Chart
google.charts.load('current', {'packages':['corechart']});
function drawChart() {
//Hold the loan data array
var loanData = [];
var dt = new Date();
var yearCounter = 1;
//Add the graph header
var headerData = ['Year', 'Interest', 'Interest & Principal', 'Balance'];
loanData.push(headerData);
for(var i = dt.getFullYear(); i < dt.getFullYear() + loanYear; i++){
loanData.push([i.toString(), getAmortData("interest", 12 * yearCounter), monthlyRepayment * 12 * yearCounter, getAmortData("balance", 12 * yearCounter)]);
yearCounter++;
}
var data = google.visualization.arrayToDataTable(loanData);
var options = {
title: 'Loan Chart',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
pointsVisible: true
};
var chart = new google.visualization.AreaChart(document.getElementById('graph-chart'));
chart.draw(data, options);
}
//Get amortization data based on type and terms
function getAmortData(dataType, terms){
var dataValue = 0;
switch(dataType){
case "interest":
for(var i = 0; i < terms; i++){
dataValue += parseFloat(amortData[i].Interest);
}
break;
case "balance":
dataValue = parseFloat(amortData[terms-1].Balance);
break;
}
return Math.round(dataValue);
}
//calculate function
function calculateLoan(){
$("#year-value").html(loanYear);
var loanBorrow = parseFloat($("#txtLoan").val());
var interestRate = parseFloat($("#txtInterest").val()) / 1200;
var totalTerms = 12 * loanYear;
//Monthly
var schedulePayment = Math.round(loanBorrow * interestRate / (1 - (Math.pow(1/(1 + interestRate), totalTerms))));
monthlyRepayment = schedulePayment;
var totalInterestPay = totalTerms * schedulePayment;
amort(loanBorrow, parseFloat($("#txtInterest").val())/100, totalTerms);
switch(paymentCycle){
case 2:
//Fortnightly
//we multiple by 12 then divided by 52 then multiple by 2
schedulePayment = Math.round(((schedulePayment * 12) / 52) * 2);
break;
case 3:
//Weekly
//we multiple by 12 then divided by 52
schedulePayment = Math.round((schedulePayment * 12) / 52);
break;
}
$("#repayment-value").html(schedulePayment);
$("#interest-total").html(getAmortData("interest", totalTerms));
monthlyInterest = (totalInterestPay - loanBorrow) / totalTerms;
google.charts.setOnLoadCallback(drawChart);
}
calculateLoan();
//function to calculate the amortization data
function amort(balance, interestRate, terms)
{
amortData = [];
//Calculate the per month interest rate
var monthlyRate = interestRate/12;
//Calculate the payment
var payment = balance * (monthlyRate/(1-Math.pow(1+monthlyRate, -terms)));
for (var count = 0; count < terms; ++count)
{
var interest = balance * monthlyRate;
var monthlyPrincipal = payment - interest;
var amortInfo = {
Balance: balance.toFixed(2),
Interest: balance * monthlyRate,
MonthlyPrincipal: monthlyPrincipal
}
amortData.push(amortInfo);
balance = balance - monthlyPrincipal;
}
}
</script>
For the javascript code, I have added some comments directly in the code. The function that you need to look carefully on how the loan calculator built is two main function which is the amort and calculateLoan function. The amort function is responsible to return an amortization array data. While the calculateLoan is the main function to show the Google graph. It grabs the initial values such as the value of the loan, interest rates, and payment cycles. Once that 3 information has been collected, it will call the amort function to get a return array of amortization data. Then it will perform a calculation of the scheduled payment and interest based on the payment cycle selected. Once the calculation is completed, it will execute a function to draw the Google Area Chart. You can easily change the default values in the initial variables such as the minimum and maximum loan terms.
Demo of Loan Calculator
You can see the demo of our loan calculator below.
Download Loan Calculator File
You can download the loan calculator file on the following link.
Hopefully this calculator useful. Feel free to use it and if you can share a credit back to this page that would be wonderful. If you have a question or do not understand how it works, please post your message below.
