This awesome Angular pen calculates your Body Mass Index (BMI)! BMI is the measure of body fat, and this calculator applies to both men and women. Enter your weight in pounds and height in inches, your result will be rounded up to the nearest whole number. I will make a metric one as well in the future for the rest of the world xP
A Pen by Petrus Rex on CodePen.
| <body ng-app="bmrApp"> | |
| <div class="container"> | |
| <div class="jumbotron" ng-controller="headerText"> | |
| <h2 class="main-header">{{mainHeader}}</h2> | |
| <hr> | |
| <br> | |
| <form ng-controller="mainCtrl"> | |
| <h3>Weight(lbs):</h3><input ng-change="computeBMI()" ng-model="stats.weightUS"></input> | |
| <br> | |
| <br> | |
| <h3>Height(in):</h3><input ng-change="computeBMI()" ng-model="stats.heightUS"></input> | |
| <br> | |
| <br> | |
| <b>Your BMI is:</b> | |
| <br> | |
| {{stats.BMI | number: 0}} | |
| </form> | |
| </div> | |
| </div> | |
| </body> |
| var app = angular.module('bmrApp', []); | |
| //TextCtrl | |
| app.controller('headerText', function ($scope){ | |
| $scope.mainHeader="Angular BMI Calculator"; | |
| }); | |
| //MainCtrl | |
| app.controller('mainCtrl', function ($scope){ | |
| $scope.stats = { | |
| weightUS: 0, | |
| heightUS: 0, | |
| BMI: 0}; | |
| var computeBMI = function(){ | |
| $scope.stats.BMI = ($scope.stats.weightUS * 703) / ($scope.stats.heightUS * $scope.stats.heightUS) ; | |
| } | |
| $scope.$watch('stats.weightUS', computeBMI); | |
| $scope.$watch('stats.heightUS', computeBMI); | |
| }); |
| <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> |
| /* 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" /> |