jquery.loan-calculator
Version:
Amortized Loan Calculator jQuery Plugin
107 lines (90 loc) • 3.82 kB
HTML
<html>
<head>
<title>Loan Calculator Demo</title>
<link rel="stylesheet" href="libs/bootstrap/bootstrap-3.3.4.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h1 class="page-header">Loan Calculator</h1>
<div id="widget">
<div class="form-group">
<label for="loan-amount">Amount: </label> <span id="selected-amount"></span>
<input type="range" id="loan-amount" min="1000" max="100000" step="1000" value="2000">
</div>
<div class="form-group">
<label for="loan-duration">Months:</label> <span id="selected-duration"></span>
<input type="range" id="loan-duration" min="6" max="24" step="1" value="12">
</div>
<div class="form-group">
<label for="payment-frequency">Payment frequency: </label> <span id="selected-payment-frequency"></span>
<select id="payment-frequency" class="form-control">
<option value="weekly">Weekly</option>
<option value="biweekly">Biweekly</option>
<option value="monthly" selected>Monthly</option>
</select>
</div>
<div class="form-group">
<label for="credit-score">Credit Score:</label> <span id="selected-score"></span>
<select id="credit-score" class="form-control">
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
</select>
</div>
<ul>
<li>Loan total: <span id="loan-total"></span></li>
<li>Interest total: <span id="interest-total"></span></li>
<li>Payment: <span id="payment"></span></li>
<li>Service fee: <span id="service-fee"></span></li>
<li>CAT: <span id="total-annual-cost"></span></li>
<li>Grand total: <span id="grand-total"></span></li>
</ul>
<hr>
<h3>Amortization Schedule</h3>
<pre id="amortization"></pre>
</div><!-- #widget -->
</div><!-- col-sm-10 -->
</div><!-- row -->
</div><!-- container -->
<script src="libs/jquery/jquery-1.11.1.min.js"></script>
<script src="js/jquery.loan-calculator.js"></script>
<script>
(function($){
// Accepts arguments as strings
$calculator = $('#widget').loanCalculator({
loanAmount : '$1,000.00',
loanDuration : '12',
valueAddedTax : '16%',
serviceFee : '5%',
paymentFrequency : 'monthly'
});
// Can also take numbers as arguments...
$calculator.loanCalculator('update', {
loanAmount : 1000.00,
loanDuration : 12,
valueAddedTax : 0.16,
serviceFee : 0.05,
paymentFrequency : 'monthly'
});
// Generate amortization schedule as json.
var getAmortizationSchedule = function () {
var scheduleData = $calculator.loanCalculator('schedule');
return JSON.stringify(scheduleData, undefined, 2);
};
// Dump the schedule in the DOM
var $schedule = $('#amortization').html(getAmortizationSchedule());
// Event handler for the update method.
$calculator.on('loan:update', function() {
$schedule.html(getAmortizationSchedule());
});
})(jQuery);
</script>
</body>
</html>