Build Loan EMI Calculator DIY Finance Tool using JavaScript

Hi friends today in this group you will learn how to create Loan EMI Calculator using JavaScript.

Video tutorial of Build Loan EMI Calculator DIY Finance Tool using JavaScript

This tutorial video can help you to Build Loan EMI Calculator DIY Finance Tool using JavaScript.

Build Loan EMI Calculator DIY Finance Tool using JavaScript[Source Codes]

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div class="container">
    <h1>Calculate your Loan EMIs</h1>
    <div class="row">
      <div class="col">
        <div class="row">
          <div class="col">
            <label for="">Loan Amount($)</label>
            <input type="text" placeholder="" id="amount" >
          </div>
          <div class="col">
            <label for="">Interest Rate(%)</label>
            <input type="text" placeholder="" id="ir">
          </div>
          <div class="col">
            <label for="">Loan Duration(Years)</label>
            <input type="text" placeholder="" id="years" >
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card">
          <div class="row">
            <div class="col"><label>EMI Amount</label><strong id="emi">$00.00</strong></div>
            <div class="col"><label>Total Interest</label><strong id="totalinterest">$00.00</strong></div>
          </div>
          <button onclick="calculate();">Calculate</button>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/script.js"></script>
</body>

</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 22px;
	margin: 0;
	background: #0f4dff;
	background: #003ce9;
	background: #0276ad;
	background: #7107ff;
	background: #003046;
	background: #120546;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}
.container{
	width: 1100px;
	margin: 0 auto;
	padding: 30px;
	border-radius: 30px;
	background:linear-gradient(to bottom right, #e84393, #6c5ce7);
}
h1{
	text-align: center;
	margin: 0 0 30px;
	text-transform: uppercase;
}
.row{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.col{
	width: 50%;
	max-width: 50%;
	padding: 0 15px;

}
.col label{
	display: block;
	margin-bottom: 4px;
}
.col strong{
	font-size: 40px;
}
input{
	width: 100%;
	padding: 10px 15px;
	margin-bottom: 15px;
	font-size: 16px;
	outline: 0;
	border: 0;
}
.card{
	padding: 25px;
	border-radius: 15px;
	background:#120546;
}
button{
	width: 80%;
  margin: 20px auto 0;
  display: block;
  background: #e44495;
  border: 0;
  border-radius: 15px;
  padding: 8px 15px;
  font-size: 24px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}

JavaScript Code

Copy

function calculate() {
    //Look up the input and output elements in the document
    var amount = document.getElementById("amount");
    var ir = document.getElementById("ir");
    var years = document.getElementById("years");
    var emi = document.getElementById("emi");
    var totalinterest = document.getElementById("totalinterest");
    
  var principal = parseFloat(amount.value);
  var interest = parseFloat(ir.value) / 100 / 12;
  var payments = parseFloat(years.value) * 12;
    
  var x = Math.pow(1 + interest, payments); //Math.pow computes powers
  var monthly = (principal*x*interest)/(x-1);
  
  if (isFinite(monthly)){
    emi.innerHTML = monthly.toFixed(2);
    totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);
   
   }
   else {
   payment.innerHTML = ""; // Erase the content of these elements
   totalinterest.innerHTML = "";
   }
}

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Video tutorial of Build Loan EMI Calculator DIY Finance Tool using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript[Source Codes]

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Best way to create animated loaders using CSS