<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KMI / BMI kalkulator</title>
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/http.min.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<div class="panel panel-default col-sm-9">
<bmikalk>
laster...
</bmikalk>
</div>
</body>
</html>
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src"
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {BmiCalcApp} from './bmi';
bootstrap(BmiCalcApp, [])
.catch(err => console.error(err));
// root app component
import {Component, View} from 'angular2/core'
@Component({
selector: 'bmikalk'
})
@View({
templateUrl: 'src/bmiform.html'
})
export class BmiCalcApp {
constructor() {
this.weight = '80'
this.height = '183'
}
calcBMI = function(){
return this.weight / (this.height/100 * this.height/100);
}
describeBMI = function(){
var bmi=((this.weight/Math.pow((this.height/100),2)));
var category;
if(bmi>30){
category="Feit";
} else if(bmi>25 && bmi<29.99) {
category="Overvektig";
}else if(bmi>18.5 && bmi<24.99) {
category="Sunn";
}else if(bmi<18.5) {
category="Undervektig";
};
return category;
}
}
<div class="row">
<div class="col-md-6 col-md-offset-1">
<form class="form-vertical">
<fieldset>
<!-- Form Name -->
<legend>KMI/BMI kalkulator</legend>
<div><p>Kroppsmasseindeks (KMI eller den engelske forkortalsen BMI) beregnes ut høyde og vekt. Alle er forskjellige, men det tar ikke kalkulatoren høyde for. Beinbygning, fett og muskler er fordelt forskjellig, og KMI gir bare en pekepinn. </p>
<p>Kalkulatoren er ikke egnet for personer < 17 år</p></div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="height">Høyde</label>
<div class="col-md-4 input-group">
<input name="height" class="form-control input-md" id="height" type="text" placeholder="Høyde i cm" [(ngModel)]="height" />
<span class="input-group-addon">cm</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="weight">Vekt</label>
<div class="col-md-4 input-group">
<input name="weight" class="form-control input-md" id="weight" type="text" placeholder="Vekt i kg" [(ngModel)]="weight" />
<span class="input-group-addon">kg</span>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Resultat</div>
<div class="panel-body">
Høyde: {{height}} cm
<br>Vekt: {{weight}} kg
<br> KMI: {{calcBMI() | number:'1.0-1'}}
<br> Vurdering: {{describeBMI()}}
</div>
</div>
</fieldset>
<bmikalkulator></bmikalkulator>
</form>
</div>
</div>