BMI Calculator (auto) - traditional Enyo

A simple automatic BMI calculator written in traditional Enyo style. Will be compared to an MVC version.

by sugardave

HTML

<script>new BmiCalculator().renderInto(document.body);</script>

JavaScript

enyo.kind({
	name: "BmiCalculator",
	kind: "enyo.FittableRows",
	published: {
		metric: false
	},
	handlers: {
		onchange: "validate",
		onkeyup: "handleKeyup"
	},
	components: [
		{name: "calculator", kind: "Calculator", onResult: "showResult"},
        {kind: "enyo.ToolDecorator", classes: "onyx-toolbar-inline", components: [
			{name: "metric", kind: "onyx.Checkbox", onchange: "changeLabels"},
			{content: "Metric"}
		]},
		{components: [
			{kind: "enyo.ToolDecorator", classes: "onyx-toolbar-inline", components: [
				{kind: "onyx.InputDecorator", components: [
					{name: "height", kind: "onyx.Input", placeholder: "Enter your height"}
				]},
				{name: "labelHeight"}
			]}
		]},
		{components: [
			{kind: "enyo.ToolDecorator", classes: "onyx-toolbar-inline", components: [
				{kind: "onyx.InputDecorator", components: [
					{name: "mass", kind: "onyx.Input", placeholder: "Enter your weight"}
				]},
				{name: "labelMass"}
			]}
		]},
		{kind: "enyo.ToolDecorator", classes: "onyx-toolbar-inline", components: [
			{content: "Body Mass Index:"},
			{name: "result", content: "0"}
		]}
	],
	create: function() {
		this.inherited(arguments);
		this.metricChanged();
	},
	metricChanged: function() {
		if (this.metric) {
			this.$.labelHeight.setContent("(meters)");
			this.$.labelMass.setContent("(kilograms)");
		} else {
			this.$.labelHeight.setContent("(inches)");
			this.$.labelMass.setContent("(pounds)");
		}
	},
	changeLabels: function(inSender, inEvent) {
		var originator = inEvent.originator;
		var checked = originator.checked;
		this.setMetric(checked);
	},
	getBmi: function(height, mass, metric) {
		var bmi = Math.round(this.$.calculator.calculate(height, mass, metric));
		this.$.result.setContent(bmi);
	},
	handleKeyup: function(inSender, inEvent) {
		// make sure we auto-update the result if possible
		inEvent.originator.bubble("onchange", inEvent);
	},
	validate: function() {
		var h = this.$.height.getValue();
		var m = this.$.mass.getValue();
		var...