BMI Demo

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

Thumbnail
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 Codepen.io
Copyright yuanyu ©

Technologies

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

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

<body>

  
<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='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/yuanyu/bmi-demo-jYdqpw */
"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);
});

Comments