JavaScript Loan Calculator Script: Calculate loans and amortization breakdown

Recommend this page to a friend!
     
  Info   Example   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 95 All time: 423 This week: 4Up
Version License JavaScript version Categories
amortization 2.0GNU General Publi...5HTML, Finances
Description 

Author

Joseph

This object can calculate loans and amortization breakdown.

It can take some parameters for a loan like the loan amount, down payment, APR (Annual Percentage Rate), and payment cycles per year.

The object generate an HTML table showing the amortization (payments breakdown) for the life of the loan.

Innovation Award
JavaScript Programming Innovation award nominee
June 2016
Number 5		 People that need to take loans need to make calculations about the amortization payments to be able to figure if they can afford to take the loans.

This object can make these calculations and present them in a Web page.

Manuel Lemos
Picture of Joseph
Name: Joseph <contact>
Classes: 6 packages by
Country: United States United States
Age: ???
All time rank: 253 in United States United States
Week rank: 6 Up2 in United States United States Up
Innovation award
Innovation award
Nominee: 2x

Winner: 1x

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name='author' content='Joe Golembieski, SoftMoon-WebWare' />
<meta name='copyright' content='Copyright © 2016, 2018 Joe Golembieski, SoftMoon-WebWare' />
<title>JavaScript Loan Interest Calculator and Amortization Table Generator *DEMO*</title>
<style type='text/css'>
label {
	display: block;
	margin-bottom: .38em; }
label span {
	display: inline-block;
	width: 10em;
	text-align: right; }
input {
	padding-left: .38em; }
input.money {
	padding-left: .16em; }
input.percent {
	text-align: right; }
table.amortization {
	color: black;
	background-color: white;
	width: 38em;
	margin: 1em auto; }
.amortization caption {
	font-size: 1.38em;
	font-weight: bold; }
.amortization tbody th, .amortization tbody td {
	width: 20%;
	text-align: center; }
table.loan_summary {
	width: auto;
	margin: .38em auto; }
.loan_summary tbody th, .loan_summary tbody td {
	width: 50%;
	text-align: left;
	white-space: nowrap;
	padding: .16em .38em; }
.loan_summary tbody th {
	text-align: right; }
.even {
	background-color: #E0E0FF; }
.odd {
	background-color: #FFE0E0; }
.amortization tfoot td:last-child {
	text-align: right; }
</style>

<script type='text/javascript' src="JS_toolbucket/SoftMoon-WebWare/amortization_table.js"></script>

</head>
<body>

<!--  The enclosing form may have any attribute values as you desire  -->
<form id='loan_calc' action='javascript:void(0)'>
<!--  To work with the calculator?s native form-interface code,
      the input names must match the calculator?s enumerable properties, as shown below.
      All inputs are optional.  Additional form elements are ignored.  -->
<label><span>Item Price: $</span><input type='number' step='.01' name='total_price' value='249000' maxlength='10' class='money' /></label>
<label><span>Downpayment: $</span><input type='number' step='any' name='downpayment' value='24900' maxlength='10' class='money' /></label>
<label><span>Downpayment Rate:&nbsp;</span><input type='number' step='any' name='downpayment_rate' value='' maxlength='10' class='percent' />%</label>
<label><span>Loan Amount: $</span><input type='number' step='any' name='loan_amount' value='' maxlength='10' class='money' /></label>
<label><span><abbr title='Annual Percentage Rate'>APR</abbr>:&nbsp;</span><input type='number' step='any' name='apr' value='4.299' maxlength='7' class='percent' />%</label>
<label><span>Number of Payments:&nbsp;</span><input type='number' step='1' name='cycles_loaned' value='120' maxlength='4' /></label>
<label><span>Payments per Year:&nbsp;</span><input type='number' step='1' name='cycles_per_year' value='12' list='standard_payment_plans' maxlength='4' /></label>
	<datalist id='standard_payment_plans'>
		<option value='12'> (monthly)</option>
		<option value='52'> (weekly)</option>
	</datalist>
<label><span>Payment Amount: $</span><input type='number' step='any' name='cyclical_payment' value='' maxlength='10' class='money' /></label>
<!--  To work with the calculator?s native form-interface code,
      the button must have the name shown below  -->
<button name='show_Amortization'>show Amortization Table</button>
</form>

<script type='text/javascript'>
var myCalc=new SoftMoon.WebWare.Amortization_InterestCalculator(document.forms.loan_calc);
</script>

<!--  The default id for the container that receives the created Amortization Table pop-up is shown below.
      It may be changed and customized for each of multiple calculators (see the script).
      The container may be any Element capable of content (childNodes), and may be placed anywhere in the document.
      The container may have any other pre-existing content, and the created Table will be appended to the end,
      or the first offspring found with the className "amortization" (by default - can be changed) will be replaced  -->
<div id='amortization'></div>

</body>
</html>

  Files folder image Files (2)  
File Role Description
Files folder imageJS_toolbox (1 directory)
Plain text file loan_calc_demo.html Example Loan Calculator demo

  Files folder image Files (2)  /  JS_toolbox  
File Role Description
Files folder imageSoftMoon-WebWare (1 file)

  Files folder image Files (2)  /  JS_toolbox  /  SoftMoon-WebWare  
File Role Description
  Plain text file amortization_table.js Class the class sosurce

Downloadamortization-2018-11-01.zip 6KB
Downloadamortization-2018-11-01.tar.gz 4KB
 Version Control Unique User Downloads Download Rankings  
 0%
Total:95
This week:0
All time:423
This week:4Up

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.