Amortization Schedule & Payment Calculator

In this example below you will see how to do a Amortization Schedule & Payment Calculator with some HTML / CSS and Javascript

Using Angular for easy display and such. Useful tool and a fun JS exercise.

Thumbnail
This awesome code was written by bfillmer, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bfillmer ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Amortization Schedule & Payment Calculator</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/flatly/bootstrap.min.css'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  padding: 2em;
}
section {
  max-width: 33em;
  margin: 0 auto;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <body ng-app="AmortApp">
  
  <section ng-controller="AmortCalc as calc">
    <h2>Amortization Schedule &amp Payment Calculator</h2>

    <form class="form-horizontal">

      <fieldgroup>
        <legend>Loan Information</legend>
        <ul class="list-unstyled">
          <li class="form-group">
            <label class="col-sm-4 control-label">Principal</label>
            <div class="col-sm-6"><input type="number" class="form-control" ng-model="calc.principal" ng-change="calc.calcMonthlyPaymentAmount()"></div>
          </li>
          <li class="form-group">
            <label class="col-sm-4 control-label">Annual Interest Rate</label>
            <div class="col-sm-3"><input type="number" class="form-control" placeholder="0.0%" ng-model="calc.interest" ng-change="calc.calcMonthlyPaymentAmount()"></div>
          </li>
          <li class="form-group">
            <label class="col-sm-4 control-label">Years</label>
            <div class="col-sm-3"><input type="number" class="form-control" ng-model="calc.payments" ng-change="calc.calcMonthlyPaymentAmount()"></div>
          </li>
        </ul>
        <h4 class="row" ng-show="calc.monthlyPaymentAmount">
          <div class="col-sm-6 text-muted">Per Month Payment:</div>
          <div class="col-sm-6">{{calc.monthlyPaymentAmount | currency}}</div>
          <div class="col-sm-6 text-muted">Total Payout:</div>
          <div class="col-sm-6">{{calc.totalPayoutAmount | currency}}</div>
          <div class="col-sm-6 text-muted">Total Interest:</div>
          <div class="col-sm-6">{{calc.totalInterestAmount | currency}}</div>
        </h4>
      </fieldgroup>

    </form>
    
  </section>
  
</body>
  <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/bfillmer/amortization-schedule-andamp-payment-calculator-ABDHd */
body {
  padding: 2em;
}
section {
  max-width: 33em;
  margin: 0 auto;
}


/*Downloaded from https://www.codeseek.co/bfillmer/amortization-schedule-andamp-payment-calculator-ABDHd */

(function () {
  
  /**
   *
   * @TODO
   * 1. Reduce watch frequency on monthly calculation.
   * 2. Refactor a bit for more sense.
   * 3. That whole schedule thing.
   * 4. Form element validation checking.
   *
   */
  
  angular.module('AmortApp', [ ]);
  
  var AmortCalc = function () {
    
    var vm = this;
    
    vm.principal = null,
    vm.interest = null,
    vm.payments = null,
    vm.monthlyPaymentAmount = null,
    vm.totalPayoutAmount = null,
    vm.totalInterestAmount = null,
    vm.remainingBalance = null;
    
    var monthlyPayment = function (p, i, n) {
      return ( i * p * Math.pow(1 + i, n) ) / ( Math.pow(1 + i, n) - 1 );
    };
    
    var monthlyInterest = function (i) {
      return (i / 100) / 12;
    };
    
    vm.calcMonthlyPaymentAmount = function () {
      if (null === vm.principal || null === vm.interest || null === vm.payments) { return null; }
      var mInterest = monthlyInterest(vm.interest);
      vm.monthlyPaymentAmount = monthlyPayment(vm.principal, mInterest, (vm.payments * 12));
      vm.totalPayoutAmount = vm.monthlyPaymentAmount * (vm.payments * 12);
      vm.totalInterestAmount = vm.totalPayoutAmount - vm.principal;
    };
    
  };
  angular.module('AmortApp', [ ]).controller('AmortCalc', AmortCalc);
  
})();

Comments