# Design a Loan Calculator using JavaScript

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.

Approach: The approach is very simple, we will take 3 inputs from the 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.

Example: We will make two separate files i.e. HTML and JavaScript and link the JavaScript file within HTML file.

• HTML – (index.html): It is used to Create a basic structure for the Loan Calculator
• CSS – It is used to design the Loan Calculator
• JavaScript – (app.js): It is used to implement the formula

## HTML

 ` ` `<``html` `lang``=``"en"``> ` ` `  `<``head``> ` `    ``<``title``>Loan Calculator ` ` `  `    ``<``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; ` `        ``} ` `    `` ` ` ` ` `  `<``body``> ` `    ``<``div` `class``=``"calculator"``> ` `        ``<``h1``>Loan Calculator ` ` `  `        ``` `        ``<``p``>Amount (â‚¹)     : ` `            ``<``input` `id``=``"amount"` `type``=``"number"` `            ``onchange``=``"Calculate()"``> ` `        `` ` ` `  `        ``<``p``>Interest Rate : ` `            ``<``input` `id``=``"rate"` `type``=``"number"` `            ``onchange``=``"Calculate()"``> ` `        `` ` ` `  `        ``<``p``>Months to Pay : ` `            ``<``input` `id``=``"months"` `type``=``"number"` `            ``onchange``=``"Calculate()"``> ` `        `` ` ` `  `        ``<``h2` `id``=``"total"``> ` `    `` ` ` `  `    ``<``script` `src``=``"app.js"``> ` ` ` ` `  ` `

## CSS

 `body { ` `     ``background-color``: yellow; ` `     ``font-family``: ``'Trebuchet MS'``; ` `} ` ` ``h``1` `{ ` `     ``font-size``: ``35px``; ` `} ` ` ``h``1` `{ ` `     ``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; ` `}`

Design a Loan Calculator using JavaScript

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Previous
Next