Creating a Simple Loan Calculator in HTML and JavaScript Tutorial

Submitted by oretnom23 on Friday, February 18, 2022 - 16:55.

In this tutorial, I will share with you a simple web app written in HTML, CSS, and JavaScript. The main purpose of this tutorial will help new programmers, especially the IT/CS students to have an idea of how to handle computations in a web application using JavaScript. Here, I will be providing a simple personal loan calculator source code. The application uses different built-in objects or functions in JavaScript such as the click event listener and Math Object.

The Simple Loan Calculator allows the users to calculate their loan monthly payment amount, total payable amount, and total interest. The system requires the users to enter the loan principal amount, annual interest rate, and loan terms (year). The computation results will be presented to users below the form in a table.

I used the following formula for this application:

PMT = [ P x (APR/n) ] / [ 1 - ( 1 + ( APR / n ) ) ^ (-nY) ]

  • PMT = Regular/Monthly Payment Amount
  • P = Loan Principal Amount
  • APR = Annual Interest Percentage Rate
  • n = Number of Payment Periods per Year
  • Y = Loan Term in number of years

Reference: Loan Payment Formula

Creating the Application Interface

The script below is an HTML code that contains all the elements for the user interface. Open a text-editor such as notepad++, sublime, or vscode. Next, copy the script below and paste it into a new html file. Then, save the file as index.html.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Simple Loan Calculator App</title>
  9.     <link rel="stylesheet" href="style.css">
  10.     <script src="script.js"></script>
  11. </head>
  12. <style></style>
  13.  
  14. <body>
  15.     <main>
  16.         <div id="loader-holder">
  17.             <div class="loader-spinner"></div>
  18.             <div>
  19.                 <center><small>Please wait...</small></center>
  20.             </div>
  21.         </div>
  22.         <h1 id="app-title">Simple Loan Calculator in JavaScript</h1>
  23.         <div id="form-holder">
  24.             <div id="main-box">
  25.                 <form action="" id="calculate-loan-form">
  26.                     <div class="form-item">
  27.                         <label for="loan-amount"><b>Enter Loan Amount</b></label>
  28.                         <input type="number" step="any" min="0" name="loan-amount" id="loan-amount" placeholder="xxxxx" class="input-item text-right" required>
  29.                     </div>
  30.                     <div class="form-item">
  31.                         <label for="loan-interest"><b>Enter Loan Interest</b> <small>(%)</small></label>
  32.                         <input type="number" step="any" name="loan-interest" id="loan-interest" placeholder="x" class="input-item text-right" required>
  33.                     </div>
  34.                     <div class="form-item">
  35.                         <label for="loan-years"><b>Years to Pay</b></label>
  36.                         <input type="number" step="any" min="1" name="loan-years" id="loan-years" placeholder="x" class="input-item text-right" required>
  37.                     </div>
  38.                     <div class="form-item">
  39.                         <button class="btn-block" id="calculate-btn" type="submit">Calucate</button>
  40.                         <button class="btn-block" id="reset-btn" type="reset">Reset</button>
  41.                     </div>
  42.                 </form>
  43.                 <table id="result">
  44.                     <colgroup>
  45.                         <col width="50%">
  46.                         <col width="50%">
  47.                     </colgroup>
  48.                     <tbody>
  49.                         <tr>
  50.                             <td class=""><b>Principal</b></td>
  51.                             <td class="text-right" id="principal"></td>
  52.                         </tr>
  53.                         <tr>
  54.                             <td class=""><b>Annual Rate</b></td>
  55.                             <td class="text-right" id="annual-interest"></td>
  56.                         </tr>
  57.                         <tr>
  58.                             <td class=""><b>Loan Terms</b></td>
  59.                             <td class="text-right" id="loan-terms"></td>
  60.                         </tr>
  61.                         <tr>
  62.                             <td class=""><b>Monthly Payable</b></td>
  63.                             <td class="text-right" id="monthly-pay"></td>
  64.                         </tr>
  65.                         <tr>
  66.                             <td class=""><b>Total Cost</b></td>
  67.                             <td class="text-right" id="total-pay"></td>
  68.                         </tr>
  69.                         <tr>
  70.                             <td class=""><b>Total Interest</b></td>
  71.                             <td class="text-right" id="total-interest"></td>
  72.                         </tr>
  73.                     </tbody>
  74.                 </table>
  75.             </div>
  76.         </div>
  77.     </main>
  78. </body>
  79. </html>

Creating the StyleSheet

The script below is a CSS (Cascading Style Sheets) which containes the codes for the design of the elements such as the background colors and font sizes. Add new file in your text editor and paste the code below. Save the file as style.css. This is file is being loaded in the index file as you can see it at the line 9 of index.html file.

  1. html,
  2. body {
  3.     height: 100%;
  4.     width: 100%;
  5.     padding: 0!important;
  6.     margin: unset;
  7. }
  8.  
  9. body * {
  10.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, cursive;
  11. }
  12.  
  13. main {
  14.     margin: unset !important;
  15.     height: 100%;
  16.     width: 100%;
  17.     display: flex;
  18.     flex-direction: column;
  19.     align-items: center;
  20.     justify-content: center;
  21.     background: rgb(0, 0, 0);
  22.     background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(47, 47, 47, 1) 37%, rgba(47, 47, 47, 1) 61%, rgba(0, 0, 0, 1) 100%);
  23. }
  24.  
  25. #app-title {
  26.     margin: 5rem 12rem;
  27.     text-align: center;
  28.     font-family: cursive;
  29.     font-size: 5rem;
  30.     color: #fff;
  31.     text-shadow: 3px 3px 8px #4b889f;
  32. }
  33.  
  34. #form-holder {
  35.     min-height: 20vh;
  36.     width: 100%;
  37.     display: flex;
  38.     flex-direction: row;
  39.     align-items: center;
  40.     justify-content: center;
  41. }
  42.  
  43. #main-box {
  44.     padding: 0.5em 1em;
  45.     border-radius: 0.5em;
  46.     width: 40vw;
  47.     min-height: 20vh;
  48.     background-color: white;
  49.     box-shadow: 0px 5px 24px #d6ecff;
  50. }
  51.  
  52.  
  53. /* forms */
  54.  
  55. .form-item {
  56.     padding: 0.5em 2em;
  57. }
  58.  
  59. .form-item label {
  60.     margin-bottom: .5em;
  61. }
  62.  
  63. .form-item>* {
  64.     display: block;
  65.     width: 100%;
  66. }
  67.  
  68. input.input-item {
  69.     padding: 0.5em 0.3em;
  70.     border: 1px solid;
  71.     border-radius: 0.3rem;
  72.     border-color: #4444442e;
  73. }
  74.  
  75. .text-right {
  76.     text-align: right;
  77. }
  78.  
  79. .text-center {
  80.     text-align: center;
  81. }
  82.  
  83. form {
  84.     margin-bottom: 2rem;
  85. }
  86.  
  87. .btn-block {
  88.     width: 100%;
  89.     padding: .5rem;
  90.     border-radius: .3rem;
  91.     margin-bottom: .5rem;
  92. }
  93.  
  94. button#calculate-btn {
  95.     background-color: #57abfb;
  96.     font-weight: 700;
  97.     color: #fff;
  98. }
  99.  
  100. .btn-block {
  101.     cursor: pointer;
  102.     width: 100%;
  103.     padding: 0.5rem;
  104.     border-radius: 0.3rem;
  105.     margin-bottom: 0.5rem;
  106.     border: unset;
  107.     transition: all ease-in .1s;
  108. }
  109.  
  110. .btn-block:active {
  111.     transform: scale(.95)
  112. }
  113.  
  114. #reset-btn {
  115.     display: none;
  116.     ;
  117. }
  118.  
  119. #result {
  120.     border-collapse: collapse;
  121.     width: 100%;
  122.     display: none;
  123. }
  124.  
  125. #result th,
  126. #result tr,
  127. #result td {
  128.     border: 1px solid;
  129.     border-color: #4444442e;
  130.     padding: .3rem .5rem;
  131. }
  132.  
  133.  
  134. /* forms */
  135.  
  136.  
  137. /* Custom Spinner */
  138.  
  139. div#loader-holder {
  140.     position: absolute;
  141.     height: 100%;
  142.     width: 100%;
  143.     display: flex;
  144.     flex-direction: column;
  145.     align-items: center;
  146.     justify-content: center;
  147.     backdrop-filter: brightness(0.5);
  148.     z-index: 33;
  149. }
  150.  
  151. #loader-holder * {
  152.     color: #fff
  153. }
  154.  
  155. .loader-spinner {
  156.     display: inline-block;
  157.     width: 80px;
  158.     height: 80px;
  159. }
  160.  
  161. .loader-spinner:after {
  162.     content: " ";
  163.     display: block;
  164.     width: 64px;
  165.     height: 64px;
  166.     margin: 8px;
  167.     border-radius: 50%;
  168.     border: 6px solid #fff;
  169.     border-color: #fff transparent #fff transparent;
  170.     animation: loader-spinner 1.2s linear infinite;
  171. }
  172.  
  173. @keyframes loader-spinner {
  174.     0% {
  175.         transform: rotate(0deg);
  176.     }
  177.     100% {
  178.         transform: rotate(360deg);
  179.     }
  180. }
  181.  
  182.  
  183. /* Custom Spinner */

Creating the JavaScript

The following script is the main script of the application. It contains the scripts that add and deduct button function. Using the click event listener, it allows to trigger the script when the button are being clicked. Save the js file as script.js. This file is being loaded also in the index file at the line 10.

  1. window.start_loader = function() {
  2.     const loader = document.getElementById('loader-holder')
  3.     loader.style.display = 'flex';
  4. }
  5. window.end_loader = function() {
  6.     const loader = document.getElementById('loader-holder')
  7.     loader.style.display = 'none';
  8. }
  9.  
  10. window.onload = function() {
  11.     setTimeout(() => {
  12.         end_loader()
  13.     }, 500)
  14.  
  15.     const loanForm = document.getElementById('calculate-loan-form')
  16.     loanForm.addEventListener('submit', function(e) {
  17.         e.preventDefault()
  18.         start_loader();
  19.         const principalAmount = document.getElementById('loan-amount').value;
  20.         const interest = document.getElementById('loan-interest').value;
  21.         const PayableYears = document.getElementById('loan-years').value;
  22.         var monthly = 0,
  23.             pmt = 0,
  24.             total = 0,
  25.             totalInterest = 0,
  26.             monthlyInterest = 0;
  27.         monthlyInterest = (parseFloat(principalAmount) * (parseFloat(interest) / 100)) / 12;
  28.         pmt = parseFloat(monthlyInterest) / (1 - Math.pow(1 + ((parseFloat(interest) / 100) / 12), -12 * parseFloat(PayableYears)));
  29.         total = parseFloat(pmt) * Math.floor(parseFloat(PayableYears) * 12);
  30.         totalInterest = parseFloat(total) - parseFloat(principalAmount);
  31.         setTimeout(() => {
  32.             document.getElementById('principal').textContent = parseFloat(principalAmount).toLocaleString("en-US", { style: "decimal", maximumFractionDigits: 2 })
  33.             document.getElementById('annual-interest').textContent = parseFloat(interest).toLocaleString("en-US", { style: "decimal", maximumFractionDigits: 2 }) + "%";
  34.             document.getElementById('loan-terms').textContent = parseFloat(PayableYears).toLocaleString("en-US", { style: "decimal", maximumFractionDigits: 2 }) + (PayableYears > 1 ? " Yrs." : "")
  35.             document.getElementById('monthly-pay').textContent = parseFloat(pmt).toLocaleString("en-US", { style: "decimal", maximumFractionDigits: 2 })
  36.             document.getElementById('total-pay').textContent = parseFloat(total).toLocaleString("en-US", { style: "decimal", maximumFractionDigits: 2 })
  37.             document.getElementById('total-interest').textContent = parseFloat(totalInterest).toLocaleString("en-US", { style: "decimal", maximumFractionDigits: 2 })
  38.             document.getElementById('result').style.display = 'table';
  39.             document.getElementById('reset-btn').style.display = 'block';
  40.             end_loader()
  41.         }, 500)
  42.  
  43.     })
  44.     loanForm.addEventListener('reset', function(e) {
  45.         start_loader();
  46.         setTimeout(() => {
  47.             document.getElementById('principal').textContent = ""
  48.             document.getElementById('annual-interest').textContent = ""
  49.             document.getElementById('loan-terms').textContent = ""
  50.             document.getElementById('monthly-pay').textContent = ""
  51.             document.getElementById('total-pay').textContent = ""
  52.             document.getElementById('total-interest').textContent = ""
  53.             document.getElementById('result').style.display = 'none';
  54.             document.getElementById('reset-btn').style.display = 'none';
  55.             end_loader()
  56.         }, 500)
  57.     })
  58. }

That's it. You can now test the application on your end. Browse the application into your preferred browser such as Chrome Browser. If you have encountered any error occurs, you can download the working source code I provided in this article. The download button is located below. Then, review your codes and differentiate them from the code I provided. If it still won't work, feel free to leave your queries in the comment section of this article.

That's the end of this tutorial. I hope this tutorial will help you to understand or give you an idea of how to create an application using HTML, CSS, and JavaScript. Explore more on this website for more Tutorials and Free Source Codes.

Enjoy :)

Tags

Add new comment

About text formats
  • 3606 views