Angular App developed for a real estate client, calculates your monthly mortgage payments in a USD amount. App based on the mortgage equation M = P[i(1+i)^n]/[(1+i)^n -1]. In the future variables such as insurance rates, property tax, and down payments can also be applied. Now includes down payment option.
A Pen by Peter Girnus on CodePen.
| <body ng-app="mortgageApp"> | |
| <div class="container"> | |
| <div class="jumbotron" ng-controller="headerCtrl"> | |
| <h1>{{header}}</h1> | |
| <span>by:</span><a href="http://www.petrusrex.com/" target="_blank"> {{mySite}}</a> | |
| <br> | |
| <br> | |
| <p>{{formula}}</p> | |
| <hr> | |
| <br> | |
| <!--MainCtrl--> | |
| <form ng-controller="appCtrl"> | |
| <!-- Loan Amount --> | |
| <label for="home-price">Home Price: </label> | |
| <input type="text" id="home-price" ng-change="findNewHomeAmt()" ng-model="mortgage.homePrice"> | |
| <br> | |
| <br> | |
| <!-- Down Payment --> | |
| <label for="loan-amount">Down Payment: </label> | |
| <input type="text" id="down-payment" ng-change="findNewHomeAmt()" ng-model="mortgage.downPayment"> | |
| <br> | |
| <br> | |
| <!-- Interest Rate --> | |
| <label for="interest-rate">Interest Rate (%): </label> | |
| <input type="text" id="interest-rate" ng-change="aprMonthly()" ng-model="mortgage.interestRate"> | |
| <br> | |
| <br> | |
| <!-- Mortgage Period --> | |
| <label for="mortgage-period">Mortgage Period (years): </label> | |
| <input type="text" id="mortgage-period" ng-change="numOfPayments()" ng-model="mortgage.mortgagePeriod"> | |
| <br> | |
| <br> | |
| <b>Monthly Mortgage Payment:</b> | |
| <br> | |
| Predicted Payment: {{mortgage.mortagePayment | currency:"USD $ "}} | |
| <br> | |
| <br> | |
| <div class="build-helper"> | |
| <p>Variable Watch (For Manual Calculation):</p> | |
| New Home Amount: {{mortgage.newHomeAmt}} | |
| <br> | |
| Mortage APR Monthly Rate: {{mortgage.aprMonthlyRate}} | |
| <br> | |
| Total Number of Payments: {{mortgage.numberOfPayments}} | |
| <br> | |
| monthlyInterest^numOfPayments: {{mortgage.interestPayments}} | |
| <br> | |
| <hr> | |
| Total Monthly Mortgage Payment: {{mortgage.monthlyPayment | currency:"USD $ "}} | |
| </div> | |
| <br> | |
| </form> | |
| </div> | |
| </div> | |
| </body> |
| var app = angular.module('mortgageApp', []); | |
| app.controller('headerCtrl', function($scope){ | |
| $scope.header = "Angular Mortgage Calculator"; | |
| $scope.mySite = "Petrus Rex"; | |
| $scope.formula = "M = P[i(1+i)^n]/[(1+i)^n -1]"; | |
| }); | |
| app.controller('appCtrl',['$scope', function($scope){ | |
| $scope.mortgage = { | |
| homePrice: 100000, | |
| downPayment: 0, | |
| newHomeAmt: 0, | |
| interestRate: 5, | |
| aprMonthlyRate: 0, | |
| numberOfPayments: 0, | |
| interestPayments: 0, | |
| mortgagePeriod: 15, | |
| monthlyPayment: 0 | |
| } | |
| //subtract down payment from home price | |
| var findNewHomeAmt = function(){ | |
| $scope.mortgage.newHomeAmt = $scope.mortgage.homePrice - $scope.mortgage.downPayment; | |
| } | |
| $scope.$watch('mortgage.homePrice + mortgage.downPayment',findNewHomeAmt); | |
| //Calculate monthly APR Rate | |
| var aprMonthly = function(){ | |
| $scope.mortgage.aprMonthlyRate = (($scope.mortgage.interestRate / 100) / 12); | |
| }; | |
| $scope.$watch('mortgage.interestRate', aprMonthly); | |
| //Calculate Total Number of Mortgage Payments | |
| var numOfPayments = function(){ | |
| $scope.mortgage.numberOfPayments = ($scope.mortgage.mortgagePeriod * 12); | |
| }; | |
| $scope.$watch('mortgage.mortgagePeriod', numOfPayments); | |
| //Calculate term (1+i)^n or interestPayments^numberOfPayments | |
| var interestPayments = function(){ | |
| $scope.mortgage.interestPayments = Math.pow(1 + $scope.mortgage.aprMonthlyRate, $scope.mortgage.numberOfPayments); | |
| }; | |
| $scope.$watch('mortgage.mortgagePeriod + mortgage.interestRate', interestPayments); | |
| //calculate monthly mortgage payment | |
| var monthlyPayment = function(){ | |
| $scope.mortgage.monthlyPayment = ($scope.mortgage.newHomeAmt * ($scope.mortgage.aprMonthlyRate * $scope.mortgage.interestPayments) / ($scope.mortgage.interestPayments - 1)); | |
| }; | |
| $scope.$watch('mortgage.aprMonthlyRate + mortgage.interestPayments + mortgage.downPayment + mortgage.homePrice', monthlyPayment); | |
| }]); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> |
| body { | |
| background:url('https://www.dropbox.com/s/7zxkiuyghz7z3ss/black-background.jpg?raw=1'); | |
| } | |
| .build-helper{ | |
| color: red; | |
| } |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |