Design a Loan Calculator using JavaScript

23 Feb, 2021
The Loan Calculator can be used to calculate monthly EMI of the loan by taking the total amount, months to repay and the rate of interest.
Approach: The approach is very simple, we will take 3 inputs from user i.e. amount (total loan amount), rate (the rate of interest) and months (number o months to repay). Using these three, we can calculate the total amount. At last we will display the total amount.
Formula:
interest = (amount * (rate * 0.01))/months;
total = ((amount/months) + interest);
Using HTML we are designing the simple structure and giving style using CSS(internal CSS). At the time of input we are calling calculate() function and displaying the result. The calculate() function takes input using HTML attribute named – onchange (the onchange attribute fires the moment when the value of the element is changed).
Prerequisite: Basics concepts of HTML, CSS and JavaScript.
Implementation: We will make two separate files i.e. HTML and JavaScript and link the JavaScript file within HTML file.
HTML – (index.html)
JavaScript – (app.js)
HTML File:
index.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>
JavaScript File:
app.js
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;}  
Outputs:
CSS-Questions
HTML-Questions
JavaScript-Questions
Technical Scripter 2020
CSS
HTML
JavaScript
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS