You are currently viewing Loan Calculator Using HTML,CSS and JavaScript With Source Code

Loan Calculator Using HTML,CSS and JavaScript With Source Code

Telegram Group Join Now

Loan Calculator Using HTML,CSS and JavaScript With Source Code

Loan Calculator Using HTML,CSS and JavaScript Source Code
Loan Calculator Using HTML,CSS and JavaScript Source Code


Welcome to the Codewithrandom blog. In this blog, We learn how we create the Loan Calculator Using HTML, CSS, and JavaScript With Source Code. in this Loan Calculator we enter the Amount, Percentage and how many years it Show Total Payment, monthly payment, and total interest.

I hope you enjoy our blog so let’s start with a basic HTML Structure for the Loan Calculator.


100+ JavaScript Projects With Source Code ( Beginners to Advanced)

HTML and Css Code For Loan Calculator

Code by N/A
Project Download Link Available Below
Language used HTML, CSS and JavaScript
External link / Dependencies Yes
Responsive Yes
Loan Calculator Table

<!doctype html>
<html lang="en">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
#loading, #results{
display: none;
<title>Loan Calculator</title>
<body class="bg-dark">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auro">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">Loan Calculator</h1>
<form action="" id="loan-form">
<div class="form-group">
<div class="input-group">
<span class="input-group-text">$</span>
<input type="number" class="form-control" id="amount" placeholder="Loan Amout">
<div class="form-group">
<div class="input-group">
<span class="input-group-text">%</span>
<input type="number" class="form-control" id="interest" placeholder="Interest">
<div class="form-group">
<input type="number" class="form-control" id="years" placeholder="Years to repay">
<div class="form-group">
<input type="submit" value="Calculator" class="btn btn-dark btn-block">
<!-- Loader Here -->
<div id="loading">
<img src="img/loading.gif" alt="">
<!-- Results -->
<div id="results" class="pt-4">
<div class="form-group">
<div class="input-group">
<span class="input-group-text">Total Payment</span>
<input type="number" class="form-control" id="total-payment" disabled>
<div class="form-group">
<div class="input-group">
<span class="input-group-text">Mothly Payment</span>
<input type="number" class="form-control" id="monthly-payment" disabled>
<div class="form-group">
<div class="input-group">
<span class="input-group-text">Total Interest</span>
<input type="number" class="form-control" id="total-interest" disabled>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="app.js"></script>

There is all the Html code and Css code for the Loan Calculator. Now, you can see an output with Html and Css. then we write javascript for the add main functionality in Loan Calculator.

Portfolio Website using HTML and CSS (Source Code)

Html + Css Output

Loan Calculator Using HTML,CSS and JavaScript Source Code
Loan Calculator Using HTML,CSS and JavaScript Source Code

JavaScript Code For Loan Calculator

// //Listen for submit button
//Listen for submit button
const form = document.getElementById('loan-form');
//form.addEventListener('submit',calculateResults);//Without loader
//Hide Results
//Show Loader
//Calculate Results function
function calculateResults(e){
//UI cars
const ELamount = document.getElementById('amount');
const ELinterest = document.getElementById('interest');
const ELyears = document.getElementById('years');
const ELMonthly_payment = document.getElementById('monthly-payment');
const ELtotal_payment = document.getElementById('total-payment');
const ELtotal_interest = document.getElementById('total-interest');
const principal = parseFloat(ELamount.value);
const calculatedInterest = parseFloat(ELinterest.value) /100 /12;
const calculatedPayment = parseFloat(ELyears.value )*12;
//Create monthly payment
const x = Math.pow(1 + calculatedInterest, calculatedPayment);
const monthly = (principal * x * calculatedInterest) / (x - 1);
if(isFinite(monthly)){//check whether it is finite or not
ELMonthly_payment.value = monthly.toFixed(2);
ELtotal_payment.value = (monthly*calculatedPayment).toFixed(2);
ELtotal_interest.value = ((monthly*calculatedPayment)-principal).toFixed(2);//fix to 2 deciman places
//Show Results
//Hide Loader
console.log("Plase check your numbers");
//Display an error
showError('Plase check your number');
function showError(error){
//Show Results
//Hide Loader
//Create a div
const errorDiv = document.createElement('div');
//get elements
const ELcard = document.querySelector ('.card');
const ELheading = document.querySelector('.heading');
//Add class
errorDiv.className = 'alert alert-danger';
//create text node and append to dic
//Insert error above heading
ELcard.insertBefore(errorDiv, ELheading);
//clear error after 3 seconds
setTimeout(clearError, 3000);
function clearError(){

Ecommerce Website Using HTML, CSS & JavaScript (Source Code)

Final output Of Loan Calculator Using JavaScript Source Code

Loan Calculator Using HTML,CSS and JavaScript Source Code
Loan Calculator Using HTML,CSS and JavaScript Source Code


50+ HTML, CSS & JavaScript Projects With Source Code

Now we have completed our Loan Calculator. Here is our updated output with Html, Css, and JavaScript. Hope you like the Loan Calculator Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create a Loan Calculator Using HTML, CSS, and JavaScript Source Code. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Which code editor do you use for this Loan Calculator coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?


Telegram Group Join Now

Leave a Reply