Pen showing Angular MVC capabilities by building a simple AdSense Calculator. Calculates based on today, and so far monthly. Returns a projected value for the end of the month, based on a 30 day calendar, tax rate of 1.33, and gives output in USD.
A Pen by Petrus Rex on CodePen.
| <body ng-app="someApp"> | |
| <div class="container"> | |
| <div class="jumbotron" ng-controller="headerText"> | |
| <h2 class="main-header">{{mainHeader}}</h2> | |
| <hr> | |
| <br> | |
| <br> | |
| <form ng-controller="StartupCtrl"> | |
| <h3>Today (Actual):</h3><input ng-change="computeDaily()" ng-model="funding.dailycount"></input> | |
| <br> | |
| <br> | |
| <h3>This Month:</h3><input ng-change="computeMonthly()" ng-model="funding.monthlycount"></input> | |
| <br> | |
| <br> | |
| <b>Calculation based on Today:</b> | |
| <br> | |
| Predicted Amount: {{funding.dailyaftertax | currency:"USD $ "}} | |
| <br> | |
| <br> | |
| <b>Calculation based on Month:</b> | |
| <br> | |
| Predicted Amount: {{funding.monthlyaftertax | currency:"USD $ "}} | |
| </form> | |
| </div> | |
| </div> | |
| </body> |
| var app = angular.module('someApp', []); | |
| //TextCtrl | |
| app.controller('headerText', function ($scope){ | |
| $scope.mainHeader="Angular No Nonsense AdSense Calculator!"; | |
| }); | |
| //StartupCtrl | |
| app.controller('StartupCtrl', function ($scope){ | |
| var date = new Date().getDate(); | |
| $scope.funding = { dailycount: 0, monthlycount: 0, dailyaftertax: 0, monthlyaftertax: 0 }; | |
| var computeDaily = function(){ | |
| $scope.funding.dailyaftertax = (($scope.funding.dailycount * 30 ) / 1.33); | |
| }; | |
| var computeMonthly = function(){ | |
| $scope.funding.monthlyaftertax = ((30 * $scope.funding.monthlycount / date) / 1.33); | |
| }; | |
| $scope.$watch('funding.dailycount', computeDaily); | |
| $scope.$watch('funding.monthlycount', computeMonthly); | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> |
| /* fonts */ | |
| @import url(https://fonts.googleapis.com/css?family=Knewave); | |
| $knewave: "Knewave"; | |
| body { | |
| background:url('https://www.dropbox.com/s/7zxkiuyghz7z3ss/black-background.jpg?raw=1'); | |
| } | |
| .jumbotron{ | |
| margin-top: 5%; | |
| } | |
| h2{ | |
| font-family: $knewave; | |
| } | |
| h3{ | |
| display: inline; | |
| margin-right: 20px; | |
| } |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |