Loan Calculator | Understanding DOM Better
--
In continuation to understanding DOM better, let us make together a LOAN Calculator Project!
To start with , open up your VS Code and name a folder: Loan Calculator. So we will be using BootStrap to build our UI in minutes. As we are more concerned with JS .
So make a index.html file in your Loan Calculator folder and add required Bootsrap CDN after adding your HTML boiler plate.
<! — 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=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
So how does our Loan Calculator looks like? Tadaaaa……..
Now first we need to undersand the DOM structure behind it.
You can rearrange and rebuild your DOM structure according to your choice and interest. Once you are done with proper labelling of classes and ids , JS code works more better.
This is the HTML structure:
<!doctype html>
<html lang=”en”>
<head>
<! — 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=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
<title>Loan Calculator</title>
<style>
#loading , #results
{
display: none;
}
#info
{
text-align: center;
padding-top: 10px;
}
</style>
</head>
<body class= “bg-dark”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-6 mx-auto”>
<div class=”card card-body text-center mt-5" >
<h1 class=”heading display-5 pb-3">Loan Calculator</h1>
<form id=”loan-form”>
<div class=”form-group”>
<div class=”input-group”>
<span class=”input-group-addon”>$</span>
<input type=”number” class=”form-control” id=”amount” placeholder=”Loan Amount”>
</div>
</div>
<div class=”form-group”>
<div class=”input-group”>
<span class=”input-group-addon”>%</span>
<input type=”number” class=”form-control” id=”interest” placeholder=”Interest”>
</div>
</div>
<div class=”form-group”>
<div class=”input-group”>
<input type=”number” class=”form-control” id=”years” placeholder=”Years to Repay”>
</div>
</div>
<div class=”form-group”>
<input type=”submit” value=”Calculate” class=”btn btn-dark btn-block”>
</div>
</form>
<! — Loader here →
<div id=”loading”>
<img src=”img/loading.gif” alt=””>
</div>
<! — Results →
<div id=”results” class=”pt-4">
<h5>Results</h5>
<div class=”form-group”>
<div class=”input-group”>
<span class=”input-group-addon”>Monthly Payment</span>
<input type=”number” class=”form-control” id=”monthly-payment” placeholder=”Monthly Payment” disabled>
</div>
</div>
<div class=”form-group”>
<div class=”input-group”>
<span class=”input-group-addon”>Total Payment</span>
<input type=”number” class=”form-control” id=”total-payment” placeholder=”Total Payment” disabled>
</div>
</div>
<div class=”form-group”>
<div class=”input-group”>
<span class=”input-group-addon”>Total Interest Payment</span>
<input type=”number” class=”form-control” id=”total-interest” placeholder=”Total Interest” disabled>
</div>
</div>
</div>
</div>
<div id=”info”>
<a href=”https://www.google.com/" target=”_blank”> <h4 class=”btn btn-danger”>Understand the Code!</h4> </a>
</div>
</div>
</div>
</div>
<! — Optional JavaScript →
<! — jQuery first, then Popper.js, then Bootstrap JS →
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>
<script src=”app.js”></script>
</body>
</html>
We also need an img folder to store loading.gif image for better User Experience
Enough of UI , let us get straight into JS part which is more exciting.
first step is to grab all the UI elements we need to add functionality or event listeners upon .Seeing UI you can see the submit button is the only thing that is making this UI perform as a whole together.
So grabbing up the form id , we can grab the whole details USER will type into it.
Now all we need is to add respective event listener to it.
Now for now, everything on the web page is visible , even the results section and loading gif which we need to display after the submit button is clicked
So for that we will add an event listener to submit const :
So what is happening here is , aftera submit button is clicked : 1. Hide the results section and display the loading gif by block to get that feel of UI with a timer to perform calculateResults() by 2ms .
Now its time to call calculateResults():-
Explanation :
First Picture:- We need to grab all the UI elements responsible for input and output of the results using getElementById () .
We need to apply formula : and calculate the principal , calculatedInterest, calculatedPayment and compute monthlyPayment accordingly.
It is followed by if-else condition : to check if the monthly calculated is finite or not . If finite , calculate the results accordingly and display the result in block while hiding the loading.gif as display:none. If not finite , showError(‘Please check your number’) is performed.
In the showerror() , hide both the results and loading.gif section as none. Then create errorGif const with a div into it in DOM , add class name to it and append the error text into it. Add error div particularly before the card heading Loan Calculator accordingly. You can also vanish the error after 3ms using setTimeOut() that will call clearError() accordingly.
The clearError() will find the added class name’alert’ for errorGif and remove it instantly.
And this is how , LoanCalculator works beautifully.
