BMI Demo

In this example below you will see how to do a BMI Demo with some HTML / CSS and Javascript

This awesome code was written by yuanyu, you can see more from this user in the personal repository.
You can find the original code on
Copyright yuanyu ©


  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>BMI Demo</title>


<label for="tall">身高:</label>
<input id="tall" type="number"/>
<label for="weight">體重:</label>
<input id="weight" type="number"/>
<button id="cal">計算bmi</button>
<div id="mydiv"></div>
  <script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
"use strict";
var myd = $("#mydiv");
var tall = $("#tall");
var weight = $("#weight");
var cal = $("#cal");
cal.on('click', function(){
  let tallInMeter = Number(tall.val())/100;
  let weightKG = Number(weight.val());
  let bmi = weightKG / Math.pow(tallInMeter,2);
  bmi = bmi.toFixed(2);
  // let result = bmi >= 35? "重度肥胖"
  myd.text(tallInMeter +"m " + weightKG +"kg bmi:" + bmi);