Give your age, weight, sex and tell how tall you ar and the script tells you your BMI. The script was a project from my study to a media designer.

Demo

BMI Rechner

Bitte beachte:
Der Body Mass Index berücksichtigt nicht eine überdurchschnittlich trainierte Muskelmasse des Körpers. Bei stark trainierten Muskeln kann das Normalgewicht des Körpers höher liegen.

Lebst du gesund oder solltest du etwas ändern? Erfahre jetzt wie es um dein Gewicht steht!

W M


Download

Usage

Load the scipt with <script> tag.

<script src="js/bmi-calculator.js"></script>

HTML Markup

<div id="calculator" class="clearfix">
	<div id="textSide">
		<div id="info">
			<h1>BMI Rechner</h1>
			<p><strong>Bitte beachte:</strong><br>
				Der Body Mass Index berücksichtigt nicht eine überdurchschnittlich trainierte Muskelmasse des Körpers. Bei stark trainierten Muskeln kann das Normalgewicht des Körpers höher liegen.</p>
		</div>
		<div id="displayResult">
			<p>Lebst du gesund oder solltest du etwas ändern? Erfahre jetzt wie es um dein Gewicht steht!</p>
		</div>
		<div id="copyright">
			<p>© 2013 Konrad Rolof, 2-MG-11.35</p>
		</div>
	</div>
	<form>
		<fieldset class="clearfix">
			<label>Alter in Jahren:</label>
			<input type="number" name="age" required placeholder="Dein Alter">

			<label>Größe in cm:</label>
			<input type="number" name="dimension" required placeholder="Deine Größe">

			<label>Gewicht in kg:</label>
			<input type="number" name="heft" required placeholder="Dein Gewicht">

			<label>Geschlecht:</label>
			<span id="sfm">
				<input type="radio" name="sex" value="female" required> W
			</span>
			<span id="sml">
				<input type="radio" name="sex" value="male" required> M
			</span>
		</fieldset>
		<hr>
		<fieldset class="clearfix">
			<button type="button" onclick="getBmi()">berechnen</button>
			<button type="reset" onclick="resetForm()">löschen</button>
		</fieldset>
		<hr>
		<fieldset class="clearfix">
			<label>Dein BMI lautet:</label>
			<input type="text" name="yourBMI" readonly placeholder="Dein Ergebnis">
		</fieldset>
	</form>	
</div><!-- #calculator -->

Changelog

  • Version 1 - final script

Licence

Copyright © 2014 Konrad Rolof