03/05/2021

Javascript Lizzard Js Series : build a basic mortgage calculator

Ouch :) This article was published 4 years ago - might be out of date, check out stuff or leave comment

Create your first responsive dynamic web form

in this tutorial you will learn how to build a simple loan application that displays mortgage cost

  • Level : beginner
  • Duration : 30 minutes

What you will learn

  • search bootsnip to find a good code sample, and run it locally
  • create a html page with bootstrap and jquery
  • display form on left colum
  • display calculation result on right column
  • use javascript validation

the range form field

https://css-tricks.com/value-bubbles-for-range-inputs/
https://mdbootstrap.com/docs/standard/forms/range/

Build your own form

Create your first bootstrap page

Following the Bootstrap 5 introduction lesson, we start making a HTML 5 blank page to which we add

  • the specific BS5 style sheet and javascript CDN reference :
  • a title
  • you can view it here , it is for now very simple
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blank HTML 5 Bootstrap 5 Page</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
 rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

Layout : bring in Two columns

Boostrap column layout allows management of various screen sizes : on small screens elements are arranged vertically, while on big screens they would be arranged horizontally

In order to build our dynamic configurator, we will use two columns :

  • on desktop and tablets
  • left column displays the form
  • right column displays the result
  • on small devices (smartphones), columns switch to row
  • first row displays the form
  • second column displays the result

We will use the bootstrap grid system to build those 2 columns in responsive mode.

Bootstrap columns

in this example we have many class elements to discover

  • Bootstrap columns defined via div elements with the col class name
  • this col element is contained within row and container element
  • bootstrap col classes can be extended with responsive elements
  • responsive breakpoints : lg (large screens) and md (medium screens)
  • the number specifies width in portion of 12 : 4/12 means a third
  • we use the boostrap order-md-last class name to move the result column right on big screens, left on small screens
<div class="container">
 <div class="row">
     <div class="col-md-5 col-lg-4 order-md-last">



     </div>
     <div class="col-md-7 col-lg-8">

     </div>

</div></div>

Form Layout : 3 columns

Then we will integrate form fields within a new row element , which will itself contain 3 col elements, we have three fields here so we will use col-4 class name, with additionnal md suffix to specify that this 4/12 size starts at medium screen size. Smaller screens will display full width

** Integrating form in bootstrap colums**
paste the code below in the last column of your page layout (above : line 9)

<hr class="my-4">

          <h4 class="mb-3">Payment</h4>

<form name="loan" method="get" action="test.php"> 

          <div class="row gy-3">
            <div class="col-md-4">
              <label for="cc-name" class="form-label">Total Loan Amount</label>
              <input type="text" class="form-control" id="cc-name" placeholder="" required>

            </div>

            <div class="col-md-4">
              <label for="cc-number" class="form-label">Loan Term in years</label>
              <input type="text" class="form-control" id="cc-number" placeholder="" required>

            </div>

            <div class="col-md-4">
              <label for="cc-expiration" class="form-label">Interest Rate per year</label>
              <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
              <div class="invalid-feedback">
                Expiration date required
              </div>
            </div>


          </div>

          <hr class="my-4">

          <button class="w-100 btn btn-primary btn-lg" type="submit" id="waveSubmit1">Calculate loan</button>
        </form>

Jquery : add event on submit button

You remember the lesson from Javascript Objects : remember we had setup this event on the submit button ?

** Well, let's go ahead and do a wee job on that babe **

the idea is to simplify the writing of events in the context of an application that has a lot of event driven elements.

  • To appreciate the advantage of this technique, let's first have a look at line 3 here : you can see that a single line declares and event on the submit button with ID waveSumbit1.
  • The waveEventHandler method is our generic code to adress the specific event method for every event decalred in the constructor method : is build a method name from the id of the element
  • in our specific case of the waveSubmit1 button, or in any other element that has an event declared in the constructor, we'll build a mtehod name base on the id prefixed by waveClickEvent

for example, the event method for waveSubmit1element will be… waveClickEventwaveSubmit1

class WaveJsLizzardEvents {
    constructor() {
       this.waveEventHandler("#waveSubmit1")
      console.log("new class definition")
    }
    waveEventHandler(elt)
    {
        var that = this;
        var fnName=elt.replace("#","");
        console.log('Declaring waveClickEvent' + fnName + " for elt " + elt)
        $(elt).on('click',  eval("this.waveClickEvent" +fnName ));
    }
    waveClickEventwaveSubmit1(event,obj) {

        console.log( "waveClickEventwaveSubmit1  : " +  waveGlobals.hauteurFinale)

    }

}

Calculate

Links

  • https://bootsnipp.com/snippets/6vEM
  • calculate formulas : https://www.thebalance.com/loan-payment-calculations-315564
  • nice font : https://www.bankrate.com/calculators/mortgages/loan-calculator.aspx
  • nice piechart graphic : https://www.calculator.net/loan-calculator.html
To top