Home Web Development JavaScript JavaScript Loan Calculator With Bootstrap UI | jQuery Interest Calculator

JavaScript Loan Calculator With Bootstrap UI | jQuery Interest Calculator

October 23, 2019

14435

How we can create a loan interest calculator using HTML CSS JS? Solution: See this JavaScript Loan Calculator With Bootstrap UI Design. In other words, the jQuery Interest Calculator Program.

Previously I have shared some calculator programs, but this is a loan’s interest calculator using jQuery. Basically, a loan calculator is a program for calculating interest and the total sum of taken loans, you don’t to sum with formulas. You just have to put taken amount, interest rate, and time period to calculate the total amount.

Today you will learn to create an interset calculator using jQuery. Basically, there is a form with 3 fields and one button, the fields are for taken amount, interest rate, and time period. For finding the correct payable amount, you have to put the amount, interest percentage, and time periods like years or months. After that, just click on the calculate or submit button for automatic calculation.

So, Today I am sharing JavaScript Loan Calculator With Bootstrap UI. There I have used bootstrap for creating a responsive layout, all the styling this based on bootstrap‘s pre-built classes there are fewer CSS codes. For functioning, I have used jQuery as we know jQuery is a JS library that’s why I am calling this a JavaScript program.

If you are thinking now how this loan interest calculator actually is, then see the preview given below.

Preview Of jQuery Interest Calculate Program

See this video preview to getting an idea of how this loan interest program looks like.

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

JavaScript Loan Calculator With Bootstrap Source Code

Before sharing source code, let’s talk about it. First, I have linked the external CDN files like bootstrap, jquery, etc in the HTML file. Inside the file, I have created the layout using bootstrap’s pre-built or default class names, there I have used class="form-group" to creating the whole form (info). There is a loading or loader animations, I have used a GIF image for placing that.

CSS has very less part in this program, all styles are managed by bootstrap’s CSS library. Using CSS, I have only put the margin, padding, etc basic stuff. As we know bootstrap makes the responsive design by default, actually this library is for creating a responsive design. But there I have used CSS @media query for just resize the image only, we also can do with bootstrap but it is ok.

jQuery handling here the whole function, the calculation of whole period and monthly also. First, jQuery listens to the submit action and shows the GIF loader animation for 2 seconds, then it calculates the amounts. After that, it hides the loader animation and shows the result by creating divs dynamically.

There are many conditions like detect error, shows the error, etc. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>JS Loan Calculator | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
  <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">
      <div class="row">
        <div class="col-md-6 mx-auto calculate-form">
          <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">
                  <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                  </div>
                  <input
                    type="number"
                    class="form-control"
                    id="amount"
                    placeholder="Loan Amount"
                  />
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">%</span>
                  </div>
                  <input
                    type="number"
                    class="form-control"
                    id="interest"
                    placeholder="Interest"
                  />
                </div>
              </div>
              <div class="form-group">
                <input
                  type="number"
                  id="years"
                  class="form-control"
                  placeholder="Years To Repay"
                />
              </div>
              <div class="form-group">
                <input
                  type="submit"
                  value="Calculate"
                  class="btn btn-dark btn-block"
                />
              </div>
            </form>
            <!-- Loader -->
            <div id="loading">
              <img src="https://media.giphy.com/media/swhRkVYLJDrCE/giphy.gif" alt="loading"/>
            </div>
            <!-- Result -->
            <div id="result">
              <h5>Results</h5>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">Monthly Payment</span>
                  </div>
                  <input
                    type="number"
                    class="form-control"
                    id="monthly-payment"
                    disabled
                  />
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">Total Payment</span>
                  </div>
                  <input
                    type="number"
                    class="form-control"
                    id="total-payment"
                    disabled
                  />
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">Total Interest</span>
                  </div>
                  <input
                    type="number"
                    class="form-control"
                    id="total-interest"
                    disabled
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script  src="function.js"></script>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

<!DOCTYPE html>

<head>

<title>JS Loan Calculator | Webdevtrick.com</title>

</head>

<body>

<h1 class="heading display-5 pb-3">Loan Calculator</h1>

</div>

<input

type="number"

class="form-control"

id="amount"

placeholder="Loan Amount"

</div>

</div>

<input

type="number"

class="form-control"

id="interest"

placeholder="Interest"

</div>

<input

type="number"

id="years"

class="form-control"

placeholder="Years To Repay"

</div>

<input

type="submit"

value="Calculate"

class="btn btn-dark btn-block"

</div>

</form>

</div>

<h5>Results</h5>

<span class="input-group-text">Monthly Payment</span>

</div>

<input

type="number"

class="form-control"

id="monthly-payment"

disabled

</div>

<span class="input-group-text">Total Payment</span>

</div>

<input

type="number"

class="form-control"

id="total-payment"

disabled

</div>

<span class="input-group-text">Total Interest</span>

</div>

<input

type="number"

class="form-control"

id="total-interest"

disabled

</div>

</body>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
body {
  background: #f3f3f3;
}
.container {
  height: 100vh;
  position: relative;
}
.calculate-form {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
}
#loading,
#result {
  display: none;
}
@media (max-width: 750px) {
  #loading img {
    width: 100%;
  }
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

body {

background: #f3f3f3;

}

.container {

height: 100vh;

position: relative;

}

.calculate-form {

position: absolute;

top: 40%;

left: 50%;

transform: translate(-50%, -40%);

}

#loading,

#result {

display: none;

}

@media (max-width: 750px) {

#loading img {

width: 100%;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
// Listen for Submit
document.getElementById("loan-form").addEventListener("submit", function(e) {
  // Hide Results
  document.getElementById("result").style.display = "none";

  // Show Loader
  document.getElementById("loading").style.display = "block";

  setTimeout(calculateResults, 2000);

  e.preventDefault();
});

// Calculate Results
function calculateResults() {

  const amount = document.getElementById("amount");
  const interest = document.getElementById("interest");
  const years = document.getElementById("years");
  const monthlyPayment = document.getElementById("monthly-payment");
  const totalPayment = document.getElementById("total-payment");
  const totalInterest = document.getElementById("total-interest");

  const principal = parseFloat(amount.value);
  const calculatedInterest = parseFloat(interest.value) / 100 / 12;
  const calculatedPayments = parseFloat(years.value) * 12;

  // Computed Monthly payment
  const x = Math.pow(1 + calculatedInterest, calculatedPayments);
  const monthly = (principal * x * calculatedInterest) / (x - 1);

  if (isFinite(monthly)) {
    monthlyPayment.value = monthly.toFixed(2);
    totalPayment.value = (monthly * calculatedPayments).toFixed(2);
    totalInterest.value = (monthly * calculatedPayments - principal).toFixed(2);

    // Show Results
    document.getElementById("result").style.display = "block";

    // Hide Loader
    document.getElementById("loading").style.display = "none";
  } else {
    showError("Please check number inputs");
  }
}

// Show Error
function showError(error) {
  // Hide Results
  document.getElementById("result").style.display = "none";

  // Hide Loader
  document.getElementById("loading").style.display = "none";

  // Create a div
  const errorDiv = document.createElement("div");

  // Get Elements
  const card = document.querySelector(".card");
  const heading = document.querySelector(".heading");

  // Add class
  errorDiv.className = "alert alert-danger";

  // Create text node and append div
  errorDiv.appendChild(document.createTextNode(error));

  // Insert error above heading
  card.insertBefore(errorDiv, heading);

  // Clear Error after 3 seconds
  setTimeout(clearError, 3000);

  // Clear Error
  function clearError() {
    document.querySelector(".alert").remove();
  }
}

// Code By Webdevtrick ( https://webdevtrick.com )

// Listen for Submit

document.getElementById("loan-form").addEventListener("submit", function(e) {

// Hide Results

document.getElementById("result").style.display = "none";

// Show Loader

document.getElementById("loading").style.display = "block";

setTimeout(calculateResults, 2000);

e.preventDefault();

});

// Calculate Results

function calculateResults() {

const amount = document.getElementById("amount");

const interest = document.getElementById("interest");

const years = document.getElementById("years");

const monthlyPayment = document.getElementById("monthly-payment");

const totalPayment = document.getElementById("total-payment");

const totalInterest = document.getElementById("total-interest");

const principal = parseFloat(amount.value);

const calculatedInterest = parseFloat(interest.value) / 100 / 12;

const calculatedPayments = parseFloat(years.value) * 12;

// Computed Monthly payment

const x = Math.pow(1 + calculatedInterest, calculatedPayments);

const monthly = (principal * x * calculatedInterest) / (x - 1);

if (isFinite(monthly)) {

monthlyPayment.value = monthly.toFixed(2);

totalPayment.value = (monthly * calculatedPayments).toFixed(2);

totalInterest.value = (monthly * calculatedPayments - principal).toFixed(2);

// Show Results

document.getElementById("result").style.display = "block";

// Hide Loader

document.getElementById("loading").style.display = "none";

} else {

showError("Please check number inputs");

}

// Show Error

function showError(error) {

// Hide Results

document.getElementById("result").style.display = "none";

// Hide Loader

document.getElementById("loading").style.display = "none";

// Create a div

const errorDiv = document.createElement("div");

// Get Elements

const card = document.querySelector(".card");

const heading = document.querySelector(".heading");

// Add class

errorDiv.className = "alert alert-danger";

// Create text node and append div

errorDiv.appendChild(document.createTextNode(error));

// Insert error above heading

card.insertBefore(errorDiv, heading);

// Clear Error after 3 seconds

setTimeout(clearError, 3000);

// Clear Error

function clearError() {

document.querySelector(".alert").remove();

}

That’s It. Now you have successfully created JavaScript Loan Calculator With Bootstrap UI, jQuery Interest Calculator Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

1 COMMENT

Karl October 3, 2020 At 2:24 pm

Works great, thanks:)

Reply

JavaScript Loan Calculator With Bootstrap UI | jQuery Interest Calculator

Preview Of jQuery Interest Calculate Program

JavaScript Loan Calculator With Bootstrap Source Code

1 COMMENT

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY