Amortization Schedule & Payment Calculator

Using Angular for easy display and such. Useful tool and a fun JS exercise. What is a amortization schedule & payment calculator How do you make a amortization schedule & payment calculator? This script and codes were developed by Bryan Fillmer on 14 February 2022, Monday.

How do I make an amortization schedule & payment calculator?
  1. Amortization Schedule & Payment Calculator Previews
  2. Amortization Schedule & Payment Calculator HTML Codes
  3. Amortization Schedule & Payment Calculator CSS Codes
  4. Amortization Schedule & Payment Calculator JS Codes
Amortization Schedule & Payment Calculator Previews

Amortization Schedule & Payment Calculator HTML Codes

<!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>

Amortization Schedule & Payment Calculator CSS Codes

body {
  padding: 2em;
}
section {
  max-width: 33em;
  margin: 0 auto;
}

Amortization Schedule & Payment Calculator JS Codes

(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);
  
})();
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.