Open In App

Design a Loan Calculator using JavaScript

Last Updated : 18 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

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>

        <!-- Calling Calculate function defined in app.js -->
        <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';
}
 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;
}
JavaScript 
function Calculate() {

    // Extracting value in the amount 
    // section in the variable
    const amount = document.querySelector("#amount").value;

    // Extracting value in the interest
    // rate section in the variable
    const rate = document.querySelector("#rate").value;

    // Extracting value in the months 
    // section in the variable
    const months = document.querySelector("#months").value;

    // Calculating interest per month
    const interest = (amount * (rate * 0.01)) / months;
    
    // Calculating total payment
    const total = ((amount / months) + interest).toFixed(2);

    document.querySelector("#total")
            .innerHTML = "EMI : (₹)" + total;
}

Output

Design a Loan Calculator using JavaScript
Design a Loan Calculator using JavaScript

I

imsushant12
Improve
Article Tags :

Explore

Lightbox