Creating a Simple Loan Calculator in HTML and JavaScript Tutorial

MtNerds

Blockchain Wizard

Rep

Vouches

Posts

174

Likes

Bits

2 MONTHS

2 2 MONTHS OF SERVICE

LEVEL 2 900 XP

OP
Feb 27, 2025
0

1

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.

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

Simple Loan Calculator App</

title

>
<link

rel

=

"stylesheet"

href

=

"style.css"

>
<script

src

=

"script.js"

></

script

>
</

head

>
<style

></

style

>
<body

>
<main>
<div

id

=

"loader-holder"

>
<div

class

=

"loader-spinner"

></

div

>
<div

>
<center

><small

>

Please wait...</

small

></

center

>
</

div

>
</

div

>
<h1

id

=

"app-title"

>

Simple Loan Calculator in JavaScript</

h1

>
<div

id

=

"form-holder"

>
<div

id

=

"main-box"

>
<form

action

=

""

id

=

"calculate-loan-form"

>
<div

class

=

"form-item"

>
<label

for

=

"loan-amount"

><b

>

Enter Loan Amount</

b

></

label

>
<input

type

=

"number"

step=

"any"

min=

"0"

name

=

"loan-amount"

id

=

"loan-amount"

placeholder=

"xxxxx"

class

=

"input-item text-right"

required>
</

div

>
<div

class

=

"form-item"

>
<label

for

=

"loan-interest"

><b

>

Enter Loan Interest</

b

>

<small

>

(%)</

small

></

label

>
<input

type

=

"number"

step=

"any"

name

=

"loan-interest"

id

=

"loan-interest"

placeholder=

"x"

class

=

"input-item text-right"

required>
</

div

>
<div

class

=

"form-item"

>
<label

for

=

"loan-years"

><b

>

Years to Pay</

b

></

label

>
<input

type

=

"number"

step=

"any"

min=

"1"

name

=

"loan-years"

id

=

"loan-years"

placeholder=

"x"

class

=

"input-item text-right"

required>
</

div

>
<div

class

=

"form-item"

>
<button

class

=

"btn-block"

id

=

"calculate-btn"

type

=

"submit"

>

Calucate</

button

>
<button

class

=

"btn-block"

id

=

"reset-btn"

type

=

"reset"

>

Reset</

button

>
</

div

>
</

form

>
<table

id

=

"result"

>
<colgroup

>
<col

width

=

"50%"

>
<col

width

=

"50%"

>
</

colgroup

>
<tbody

>
<tr

>
<td

class

=

""

><b

>

Principal</

b

></

td

>
<td

class

=

"text-right"

id

=

"principal"

></

td

>
</

tr

>
<tr

>
<td

class

=

""

><b

>

Annual Rate</

b

></

td

>
<td

class

=

"text-right"

id

=

"annual-interest"

></

td

>
</

tr

>
<tr

>
<td

class

=

""

><b

>

Loan Terms</

b

></

td

>
<td

class

=

"text-right"

id

=

"loan-terms"

></

td

>
</

tr

>
<tr

>
<td

class

=

""

><b

>

Monthly Payable</

b

></

td

>
<td

class

=

"text-right"

id

=

"monthly-pay"

></

td

>
</

tr

>
<tr

>
<td

class

=

""

><b

>

Total Cost</

b

></

td

>
<td

class

=

"text-right"

id

=

"total-pay"

></

td

>
</

tr

>
<tr

>
<td

class

=

""

><b

>

Total Interest</

b

></

td

>
<td

class

=

"text-right"

id

=

"total-interest"

></

td

>
</

tr

>
</

tbody

>
</

table

>
</

div

>
</

div

>
</

main>
</

body

>
</

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.

html,
body {
height

:

100%

;
width

:

100%

;
padding

:

0

!important;
margin

:

unset;
}
body *

{
font-family

:

'Segoe UI'

,

Tahoma,

Geneva,

Verdana,

sans-serif

,

cursive

;
}
main {
margin

:

unset !important;
height

:

100%

;
width

:

100%

;
display

:

flex;
flex-direction

:

column;
align-items

:

center

;
justify-content

:

center

;
background

:

rgb

(

0

,

0

,

0

)

;
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%

)

;
}
#app-title

{
margin

:

5rem

12rem

;
text-align

:

center

;
font-family

:

cursive

;
font-size

:

5rem

;
color

:

#fff

;
text-shadow

:

3px

3px

8px

#4b889f

;
}
#form-holder

{
min-height

:

20vh

;
width

:

100%

;
display

:

flex;
flex-direction

:

row;
align-items

:

center

;
justify-content

:

center

;
}
#main-box

{
padding

:

0.5em

1em

;
border-radius

:

0.5em

;
width

:

40vw

;
min-height

:

20vh

;
background-color

:

white

;
box-shadow

:

0px

5px

24px

#d6ecff

;
}
/* forms */
.form-item

{
padding

:

0.5em

2em

;
}
.form-item

label {
margin-bottom

:

.5em

;
}
.form-item>*

{
display

:

block

;
width

:

100%

;
}
input.input-item

{
padding

:

0.5em

0.3em

;
border

:

1px

solid

;
border-radius

:

0.3rem

;
border-color

:

#4444442e

;
}
.text-right

{
text-align

:

right

;
}
.text-center

{
text-align

:

center

;
}
form {
margin-bottom

:

2rem

;
}
.btn-block

{
width

:

100%

;
padding

:

.5rem

;
border-radius

:

.3rem

;
margin-bottom

:

.5rem

;
}
button

#calculate-btn

{
background-color

:

#57abfb

;
font-weight

:

700

;
color

:

#fff

;
}
.btn-block

{
cursor

:

pointer

;
width

:

100%

;
padding

:

0.5rem

;
border-radius

:

0.3rem

;
margin-bottom

:

0.5rem

;
border

:

unset;
transition

:

all ease-in .1s

;
}
.btn-block

:

active

{
transform

:

scale

(

.95)
}
#reset-btn

{
display

:

none

;
;
}
#result

{
border-collapse

:

collapse

;
width

:

100%

;
display

:

none

;
}
#result

th,
#result

tr,
#result

td {
border

:

1px

solid

;
border-color

:

#4444442e

;
padding

:

.3rem

.5rem

;
}
/* forms */
/* Custom Spinner */
div#loader-holder

{
position

:

absolute

;
height

:

100%

;
width

:

100%

;
display

:

flex;
flex-direction

:

column;
align-items

:

center

;
justify-content

:

center

;
backdrop-filter:

brightness(

0.5

)

;
z-index

:

33

;
}
#loader-holder

*

{
color

:

#fff
}
.loader-spinner

{
display

:

inline-block

;
width

:

80px

;
height

:

80px

;
}
.loader-spinner

:

after

{
content

:

" "

;
display

:

block

;
width

:

64px

;
height

:

64px

;
margin

:

8px

;
border-radius

:

50%

;
border

:

6px

solid

#fff

;
border-color

:

#fff

transparent

#fff

transparent

;
animation

:

loader-spinner 1.2s

linear infinite

;
}
@keyframes

loader-spinner {
0%

{
transform

:

rotate

(

0deg

)

;
}
100%

{
transform

:

rotate

(

360deg

)

;
}
}
/* 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.

window.start_loader

=

function

(

)

{
const

loader =

document.getElementById

(

'loader-holder'

)
loader.style

.display

=

'flex'

;
}
window.end_loader

=

function

(

)

{
const

loader =

document.getElementById

(

'loader-holder'

)
loader.style

.display

=

'none'

;
}
window.onload

=

function

(

)

{
setTimeout(

(

)

=>

{
end_loader(

)
}

,

500

)
const

loanForm =

document.getElementById

(

'calculate-loan-form'

)
loanForm.addEventListener

(

'submit'

,

function

(

e)

{
e.preventDefault

(

)
start_loader(

)

;
const

principalAmount =

document.getElementById

(

'loan-amount'

)

.value

;
const

interest =

document.getElementById

(

'loan-interest'

)

.value

;
const

PayableYears =

document.getElementById

(

'loan-years'

)

.value

;
var

monthly =

0

,
pmt =

0

,
total =

0

,
totalInterest =

0

,
monthlyInterest =

0

;
monthlyInterest =

(

parseFloat(

principalAmount)

*

(

parseFloat(

interest)

/

100

)

)

/

12

;
pmt =

parseFloat(

monthlyInterest)

/

(

1

-

Math

.pow

(

1

+

(

(

parseFloat(

interest)

/

100

)

/

12

)

,

-

12

*

parseFloat(

PayableYears)

)

)

;
total =

parseFloat(

pmt)

*

Math

.floor

(

parseFloat(

PayableYears)

*

12

)

;
totalInterest =

parseFloat(

total)

-

parseFloat(

principalAmount)

;
setTimeout(

(

)

=>

{
document.getElementById

(

'principal'

)

.textContent

=

parseFloat(

principalAmount)

.toLocaleString

(

"en-US"

,

{

style:

"decimal"

,

maximumFractionDigits:

2

}

)
document.getElementById

(

'annual-interest'

)

.textContent

=

parseFloat(

interest)

.toLocaleString

(

"en-US"

,

{

style:

"decimal"

,

maximumFractionDigits:

2

}

)

+

"%"

;
document.getElementById

(

'loan-terms'

)

.textContent

=

parseFloat(

PayableYears)

.toLocaleString

(

"en-US"

,

{

style:

"decimal"

,

maximumFractionDigits:

2

}

)

+

(

PayableYears >

1

?

" Yrs."

:

""

)
document.getElementById

(

'monthly-pay'

)

.textContent

=

parseFloat(

pmt)

.toLocaleString

(

"en-US"

,

{

style:

"decimal"

,

maximumFractionDigits:

2

}

)
document.getElementById

(

'total-pay'

)

.textContent

=

parseFloat(

total)

.toLocaleString

(

"en-US"

,

{

style:

"decimal"

,

maximumFractionDigits:

2

}

)
document.getElementById

(

'total-interest'

)

.textContent

=

parseFloat(

totalInterest)

.toLocaleString

(

"en-US"

,

{

style:

"decimal"

,

maximumFractionDigits:

2

}

)
document.getElementById

(

'result'

)

.style

.display

=

'table'

;
document.getElementById

(

'reset-btn'

)

.style

.display

=

'block'

;
end_loader(

)
}

,

500

)
}

)
loanForm.addEventListener

(

'reset'

,

function

(

e)

{
start_loader(

)

;
setTimeout(

(

)

=>

{
document.getElementById

(

'principal'

)

.textContent

=

""
document.getElementById

(

'annual-interest'

)

.textContent

=

""
document.getElementById

(

'loan-terms'

)

.textContent

=

""
document.getElementById

(

'monthly-pay'

)

.textContent

=

""
document.getElementById

(

'total-pay'

)

.textContent

=

""
document.getElementById

(

'total-interest'

)

.textContent

=

""
document.getElementById

(

'result'

)

.style

.display

=

'none'

;
document.getElementById

(

'reset-btn'

)

.style

.display

=

'none'

;
end_loader(

)
}

,

500

)
}

)
}

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 :)

Download

You must reply in the thread to view hidden content. Upgrade your account to always see hidden content.

Creating a Simple Loan Calculator in HTML and JavaScript Tutorial

More options

MtNerds

452,525

359,246

359,305