Amortization Schedule & Payment Calculator

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

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Amortization Schedule & Payment Calculator</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.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/ */
body {
  padding: 2em;
}
section {
  max-width: 33em;
  margin: 0 auto;
}
/* Downloaded from https://www.codeseek.co/ */

(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);
  
})();

This awesome code ( Amortization Schedule & Payment Calculator ) is write by Bryan Fillmer, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Bryan Fillmer