Skip to content

Instantly share code, notes, and snippets.

@VasVV

VasVV/Loan Calculator.html

Created July 21, 2020 14:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save VasVV/c97c48806dd705e914c33b14dc1a87ee to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save VasVV/c97c48806dd705e914c33b14dc1a87ee to your computer and use it in GitHub Desktop.
Download ZIP
Loan Calculator - Vanilla JS, Bootstrap
Raw
Loan Calculator.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Loan calculator</title>
</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-text'>€</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-text'>%</span>
<input type='number' class='form-control' id='interest' placeholder='interest rate'>
</div>
</div>
<div class='form-group'>
<input type='number' class='form-control' id='years' placeholder='yrs to pay'>
</div>
<div class='form-group'>
<input type='submit' class='btn btn-block btn-dark' id='submit' placeholder='yrs to pay' >
</div>
</form>
<div id='loading' style='display:none'>
<img src='https://i.pinimg.com/originals/72/66/03/7266036c9f3383d21730484150602f01.gif'class="img-responsive" width="100%">
</div>
<div id='results' class='pt-3' style='display:none'>
<h3>Results</h3>
<div class='form-group'>
<div class='input-group'>
<span class='input-group-text'>Monthly payment</span>
<input type='number' class='form-control' id='monthly-payment' disabled>
</div>
</div>
<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>
</div>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Raw
loan-calculator-vanilla-js-bootstrap.markdown
Raw
script.js
const element = document.querySelector('form');
element.addEventListener('submit', event => {
event.preventDefault();
const loanAmount = document.getElementById('amount').value;
const interestRate = document.getElementById('interest').value;
const yrsToPay = document.getElementById('years').value;
let monthlyPayment = document.getElementById('monthly-payment');
let totalPayment = document.getElementById('total-payment');
let totalInterest = document.getElementById('total-interest');
const p = parseFloat(loanAmount);
const i = parseFloat(interestRate) / 100 / 12;
const z = parseFloat(yrsToPay) * 12;
const x = Math.pow(1 + i, z);
const m = (p*x*i)/(x-1);
if(isFinite(m)) {
document.getElementById('results').style.display='none';
monthlyPayment.value = m.toFixed(1);
totalPayment.value = (m * z).toFixed(1);
totalInterest.value = ((m*z)-p).toFixed(1);
document.getElementById('loading').style.display='block';
const loadDisappear = () => document.getElementById('loading').style.display='none';
setTimeout(loadDisappear, 2000);
const res = () => document.getElementById('results').style.display='block';
setTimeout(res, 2000);
}
else {
document.getElementById('results').style.display='none';
const err = document.createElement("div");
err.setAttribute('class', 'alert');
err.setAttribute('class', 'alert-danger');
err.setAttribute('role', 'alert');
err.setAttribute('id', 'alert');
err.textContent = 'Please, check the numbers you\'ve entered and try again';
const elem = document.getElementById("loan-form");
elem.appendChild(err);
const toRemove = document.getElementById('alert');
let rem = () => toRemove.parentNode.removeChild(toRemove);
setTimeout(rem, 3000)
}
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment