
I had promised myself that I would create a ready to use EMI calculator combining HTML, CSS & JavaScript.
Here it is! If you are a home-buyer – I really hope that you find it useful! I wrote a detailed blog on how I put together the JavaScript. You may find that useful if you would want to replicate the below app.
In this case, I reused the JavaScript that I wrote earlier & wrapped in under some HTML & CSS. The HTML & CSS bit was easy but extremely tedious. I wouldn’t get into the details just now.
For now, enjoy the calculator. I am also pasting the codes below the calculator! Feel free to use them & play around. Though there is no compulsion – I would be really pleased if you would backlink your experiment to this site !
EMI Calculator for Homeloans
The code had 3 parts to it :
- HTML ( That provided the structure of the app)
- CSS (that managed the styling)
- JS (that brought in the functionality)
Here are the code-bits:
The HTML for building a EMI Calculator:
The html block below will build the calculator without any styling or functionality. You need to link the CSS & JS file to get the calculator ready in it’s final form.
<div class="outerShell">
<H1>EMI Calculator for Homeloans</H1>
<form name="loan-form" onsubmit="return calculator()">
<div class='loanBlock'>
Loan Amount<br>
<input type=number id="amount" style="border-radius:5px"><br>
</div>
<div class='aprBlock'>
Annual Percent Rate<br>
<input type="number" name="apr" id="apr" style="border-radius:5px"><br>
</div>
<div class='tenureBlock'>
Tenure<br>
<input type=number name="tenure" id="tenure" style="border-radius:5px"><br>
<br>
</div>
<div id=buttonBlock>
<button style="border-radius:2px">Find Out</button>
</div>
</form>
<P id="EMICapt"></P>
<script src='script.js'> </script>
</div>
The JavaScript for EMI calculation:
function calculator() {
const loanstruct = {
loanAmount:document.getElementById("amount").value,
annualInterestrate:document.getElementById("apr").value,
loanDuration:document.getElementById("tenure").value
};
// Passing the object as the arguement. The function also returns an object that includes both EMI & Total
console.log(loanstruct)
function EMIVal2(loan){
interest = loan.annualInterestrate/1200;
let term = loan.loanDuration*12;
let top = Math.pow((1+interest),term);
let bottom = top - 1;
let ratio = top/bottom;
EMI = loan.loanAmount * interest * ratio;
Total = EMI*term;
const EMIObj = {
EMI:EMI.toFixed(0),
Total:Total.toFixed(0)
};
return EMIObj
}
console.log(EMIVal2(loanstruct));
document.getElementById("EMICapt").innerHTML='<P><b>EMI: Rs. </b>' + EMIVal2(loanstruct).EMI + '<br>' + '<b> Total: Rs. </b>' + EMIVal2(loanstruct).Total +'</P>';
return false
}
The CSS for styling the Home-loan EMI calculator:
.divShell{
background-color: antiquewhite
}
H1{
text-align: center
}
form{
border-radius: 25px;
background-color: thistle;
align-self: center;
color: brown
margin: 6px;
padding-top: 20px;
padding-bottom:20px;
padding-left: 50px;
padding-right: 50px;
font-family: "Times New Roman", Times, serif;
}
.loanBlock{
text-align: center;
font-weight: bold;
padding: 20px;
}
.aprBlock{
text-align: center;
font-weight: bold;
padding: 20px;
}
.tenureBlock{
text-align: center;
font-weight: bold;
padding: 20px;
}
.buttonBlock{
text-align: center;
padding-bottom: 5px;
padding-top: 10px;
padding-left: 20px;
padding-right:20px
}
button{
position: relative;
left: 42.5%;
bottom: 25%;
background-color: navy;
color: white;
padding: 10px;
border-radius: 30px
}
#EMICapt{
border-radius: 10px;
background-color:antiquewhite;
color: rgb(236, 17, 17);
padding: 20px;
text-align: center
}
FAQS : EMI Calculator Code
The mathematical formula for calculating EMI is:
EMI = [P x R x (1+R)^N]/[(1+R)^N-1],
where P stands for the loan amount or principal, R is the interest rate per month [if the interest rate per year is 11%, then the rate of interest will be 11/(12 x 100)], and N is the number of monthly installments.
The best way to calculate EMI in JavaScripts would be by using the Math.pow() method.