10+ JavaScript BMI Calculator Examples

This post contains a total of 10+ JavaScript BMI Calculator Examples with Source Code. All these BMI ( Body mass index ) Calculators are made using JavaScript.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript BMI Calculator Examples

1. BMI Calculator UI

Made by SeshuEn. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
  
<style>
body {
  background: #F73946;
  background: -webkit-linear-gradient(left top, #F73946, #FF3875);
  background: -o-linear-gradient(bottom right, #F73946, #FF3875);
  background: -moz-linear-gradient(bottom right, #F73946, #FF3875);
  background: linear-gradient(to bottom right, #F73946, #FF3875);
  background-attachment: fixed;
  background-repeat: no-repeat;
  height: 100%;
}

.bmi-calculator {
  margin: 75px auto;
  width: 100%;
  max-width: 500px;
  display: table;
  background: #2B2D41;
  color: #4E5279;
  border-radius: 5px;
  box-shadow: 0px 2px 45px 8px #C32B4A;
}

.result {
  display: table;
  width: 100%;
}

.result-text {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 20px;
  border: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #4CA456;
  background: -webkit-linear-gradient(left top, #4FD24D, #4CA456);
  background: -o-linear-gradient(bottom right, #4FD24D, #4CA456);
  background: -moz-linear-gradient(bottom right, #4FD24D, #4CA456);
  background: linear-gradient(to bottom right, #4FD24D, #4CA456);
  transition: all 0.4s ease-in;
  -webkit-transition-delay: 2s;
  /* Safari */
  transition-delay: 2s;
  box-shadow: 0px 5px 25px 2px #333;
}
.result-text h1 {
  color: #fff;
  font-size: 3em;
  margin: 8px 0;
  padding: 0;
}
.result-text small {
  font-size: 1em;
  text-transform: uppercase;
  font-weight: 400;
  color: #fff;
}

.calculator {
  padding: 20px;
}

.calculator-title {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5em;
  padding: 15px;
}

.calculator-hr {
  margin-top: -10px;
  width: 80%;
  border: 1.2px solid #F73946;
  border-radius: 15px;
}

input[type=range] {
  -webkit-appearance: none;
  width: 75%;
  height: 4px;
  background: #27283A;
  border-radius: 5px;
  display: inline-block;
  margin-top: -15px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #F73946;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #F73946;
  cursor: pointer;
}

input[type=range]::-ms-thumb {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #F73946;
  cursor: pointer;
}

.field-text {
  font-size: 2em;
  color: #F73946;
  font-weight: 700;
  padding: 8px;
  display: inline-block;
}

.label-height:after {
  content: " cm";
  font-size: 0.5em;
  color: #4E5279;
  font-weight: 400;
  text-align: center;
  margin-top: -12px;
}

.label-weight:after {
  content: " kg";
  font-size: 0.5em;
  color: #4E5279;
  font-weight: 400;
}

.submit {
  text-align: center;
}

#submit {
  background: #F73946;
  background: -webkit-linear-gradient(left top, #F73946, #FF3875);
  background: -o-linear-gradient(bottom right, #F73946, #FF3875);
  background: -moz-linear-gradient(bottom right, #F73946, #FF3875);
  background: linear-gradient(to bottom right, #F73946, #FF3875);
  border: none;
  border-radius: 30px;
  padding: 4px 25px;
  color: #2B2D41;
  font-size: 1.5em;
  font-weight: 100;
  transition: all 0.3s ease-in;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
}
#submit:hover, #submit:focus {
  color: #FFF;
  outline: none;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="bmi-calculator">
        <div class="result">
          <div class="result-text"> 
            <h1><span id="bmiValue">24.8 </span>kg/m2</h1><small id="bmid">Normal</small>
          </div>
        </div>
        <div class="calculator">
          <h2 class="text-center calculator-title">What's Your BMI?</h2>
          <hr class="calculator-hr"/>
          <div class="height">
            <input class="value_range" id="height" type="range" value="182" min="100" max="250" step="1"/>
            <div class="label-height field-text">0</div>
          </div>
          <div class="weight">
            <input class="value_range" id="weight" type="range" value="82" min="0" max="250" step="1"/>
            <div class="label-weight field-text">0</div>
          </div>
          <div class="submit">
            <input class="submit" type="submit" id="submit" value="Calculate"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var rangeSlider = function () {
  var slider = $('.row'),
  range = $('.value_range'),
  value = $('.field-text');

  slider.each(function () {

    value.each(function () {
      var value = $(this).prev().attr('value');
      $(this).html(value);
    });

    range.on('input', function () {
      $(this).next(value).html(this.value);
    });
  });
};
rangeSlider();

$('#submit').click(function () {
  var h = $('#height').val() / 100;
  var w = $('#weight').val();
  var bmi = h * h;
  bmi = w / bmi;
  bmi = bmi.toFixed(1);
  $('#bmiValue').html(bmi + " ");
  if (bmi < 18.5) {
    //Underweight
    $('.result-text').css('background', '-webkit-linear-gradient(left top, #27939D, #07658F)');
    $('.result-text').css('background', '-o-linear-gradient(bottom right, #27939D, #07658F)');
    $('.result-text').css('background', '-moz-linear-gradient(bottom right, #27939D, #07658F)');
    $('.result-text').css('background', 'linear-gradient(to bottom right, #27939D, #07658F)');
    $('#bmid').html("Underweight");
  } else if (18.5 <= bmi && bmi <= 24.9) {
    //Normal weight
    $('.result-text').css('background', '-webkit-linear-gradient(left top, #4FD24D, #4CA456)');
    $('.result-text').css('background', '-o-linear-gradient(bottom right, #4FD24D, #4CA456)');
    $('.result-text').css('background', '-moz-linear-gradient(bottom right, #4FD24D, #4CA456)');
    $('.result-text').css('background', 'linear-gradient(to bottom right, #4FD24D, #4CA456)');
    $('#bmid').html("Normal");
  } else if (25 <= bmi && bmi <= 29.9) {
    //Overweight   
    $('.result-text').css('background', '-webkit-linear-gradient(left top, #EF7532, #DC3A26)');
    $('.result-text').css('background', '-o-linear-gradient(bottom right, #EF7532, #DC3A26)');
    $('.result-text').css('background', '-moz-linear-gradient(bottom right, #EF7532, #DC3A26)');
    $('.result-text').css('background', 'linear-gradient(to bottom right, #EF7532, #DC3A26)');
    $('#bmid').html("Overweight");
  } else {
    //Obese
    $('.result-text').css('background', '-webkit-linear-gradient(left top, #F73946, #FF3875)');
    $('.result-text').css('background', '-o-linear-gradient(bottom right, #F73946, #FF3875)');
    $('.result-text').css('background', '-moz-linear-gradient(bottom right, #F73946, #FF3875)');
    $('.result-text').css('background', 'linear-gradient(to bottom right, #F73946, #FF3875)');
    $('#bmid').html("Obese");
  }
  console.log(bmi);
});

$('input[type="range"]').change(function () {
  var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

  $(this).css('background-image',
  '-webkit-gradient(linear, left top, right top, ' +
  'color-stop(' + val + ', #F73946), ' +
  'color-stop(' + val + ', #27283A)' +
  ')');

});

$('.value_range').each(function () {
  var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

  $(this).css('background-image',
  '-webkit-gradient(linear, left top, right top, ' +
  'color-stop(' + val + ', #F73946), ' +
  'color-stop(' + val + ', #27283A)' +
  ')');

});
    </script>
</body>
</html>

2. Body Mass Index Calculator

Made by Simonpietro Nonnis. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  height: 100vh;
}

.g-buttonClean {
  cursor: pointer;
  border: 0;
  -webkit-appearance: none;
  outline: 0;
  padding: 0;
  box-shadow: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-decoration: none;
  font-style: normal;
  color: inherit;
  background-color: transparent;
}

.g-btn-shadow {
  box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
  background: #fff;
  border: 1px solid white;
  border-radius: 100px;
}

.g-linear-grad {
  background-color: #FFF;
  background-image: linear-gradient(#FFF, #EEE, #D2D2D2);
}

.u-textCenter {
  text-align: center !important;
}

.u-block {
  display: block !important;
}

.u-inlineBlock {
  display: inline-block !important;
}

.u-textUppercase {
  text-transform: uppercase !important;
}

.typo-1 {
  font-family: "Open Sans", sans-serif;
}

.typo-2 {
  font-family: Georgia, Serif;
}

.c-bmi__title {
  font-size: 1.8rem;
}

body {
  background-color: #5870EC;
  background-image: radial-gradient(ellipse farthest-corner at center top, #97A3DC 0%, #5870EC 100%);
}

.wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-bmi-container {
  display: flex;
  transition: all 0.4s;
  perspective: 900px;
  width: 318px;
  height: 527px;
}

.c-bmi {
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.3);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform-style: preserve3d;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.4s;
}

.c-bmi--back {
  transform: rotateY(-180deg);
  padding: 1em 2em 3em;
  border-radius: 10px 10px;
}

.c-bmi--back__title {
  margin-top: 0;
}

.flipped .c-bmi--back {
  transform: rotateY(0deg);
}

.flipped .c-bmi--front {
  transform: rotateY(180deg);
}

.c-bmi__title {
  background-color: orangered;
  background-image: linear-gradient(#F36D38 0%, #F5A43B 100%);
  margin: 0;
  padding: 0.5em 0.7em;
  color: white;
  border-radius: 10px 10px 0 0;
  border: 0;
  border-bottom: 6px solid transparent;
  -o-border-image: linear-gradient(to right, #DEE444 0%, #ad3 100%);
     border-image: linear-gradient(to right, #DEE444 0%, #ad3 100%);
  border-image-slice: 1;
}

.c-bmi__slider {
  display: block;
  margin-top: 0.5em;
  width: 100%;
}

.c-bmi__body {
  position: relative;
  padding: 3em 2em;
  border-radius: 0 0 10px 10px;
}

.c-bmi__row + .c-bmi__row {
  margin-top: 1.5em;
}

.c-bmi__result {
  color: #333;
  margin: 3em 0 0 0;
}

.c-bmi__number {
  border-width: 5px;
  width: 4em;
  height: 4em;
  font-size: 2rem;
  line-height: 3.5em;
  font-weight: normal;
  margin: auto;
  margin-top: 10px;
}

.c-bmi__info {
  position: absolute;
  bottom: 1em;
  right: 1em;
  color: #999;
  width: 2em;
  height: 2em;
  padding: 0.2em;
  padding-left: 0;
}

.c-bmi__info--x {
  padding-top: 0.1em;
  padding-left: 0.2em;
}
</style>
</head>
<body>
  <div class="wrapper"> 
  <main class="c-bmi-container typo-1">
    <section class="c-bmi c-bmi--front">

        <h1 class="c-bmi__title [ u-textUppercase u-textCenter ]">BMI Calculator</h1>
        <div class="c-bmi__body g-linear-grad">
          <div class="c-bmi__row">
            <span>Weight: <span id="weight-text"></span>kg</span> 
            <input class="c-bmi__slider" id="weight-slider" type="range" min="40" max="120" step="1" value="71" >
          </div>
          <div class="c-bmi__row">
            <span>Height: <span id="height-text"></span>cm</span> 
            <input class="c-bmi__slider" id="height-slider" type="range" min="140" max="210" value="175">
          </div>
          <h2 class="c-bmi__result typo-1 [ u-textUppercase u-textCenter ]">your BMI is <span class="typo-2 c-bmi__number g-btn-shadow [ u-block ]" id="bmi-text"></span></h2>
          <button id="jsInfoButton" class="g-buttonClean g-btn-shadow c-bmi__info"><i>i</i></button>
        </div>

    </section>
  
    <section class="c-bmi c-bmi--back g-linear-grad">
      <h1 class="c-bmi--back__title [ u-textUppercase ]">What is BMI</h1>
      <div>
        <p>The body mass index (BMI) or Quetelet index is a value derived from the mass (weight) and height of an individual. The BMI is defined as the body mass divided by the square of the body height, and is universally expressed in units of kg/m2, resulting from mass in kilograms and height in metres.</p>
        <button id="jsCloseButton" class="g-buttonClean g-btn-shadow c-bmi__info c-bmi__info--x">x</button>
      </div>
    </section>
  </main>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js'></script>
      <script>
// Flip card
// In RX $ stands for Stream
//Get elements
var infoButton = document.getElementById('jsInfoButton');
var closeButton = document.getElementById('jsCloseButton');
var bmiContainer = document.querySelector('.c-bmi-container');

//On click on info button toggles flip class on c-bmi-container 
const infoButtonClicks$ = Rx.Observable.fromEvent(infoButton, 'click');

//Close Info
const closeButtonClicks$ = Rx.Observable.fromEvent(closeButton, 'click');

const flipSubscription = Rx.Observable.merge(infoButtonClicks$, closeButtonClicks$).
subscribe(() => bmiContainer.classList.toggle('flipped'));


// BMI Calculator
// Get elements 
var weightSliderElem = document.querySelector('#weight-slider');
var heightSliderElem = document.querySelector('#height-slider');

var weightTextElem = document.querySelector('#weight-text');
var heightTextElem = document.querySelector('#height-text');

var bmiTextElem = document.querySelector('#bmi-text');

// Observables
var weight = Rx.Observable.fromEvent(weightSliderElem, 'input').
map(ev => ev.target.value).
startWith(weightSliderElem.value);

var height = Rx.Observable.fromEvent(heightSliderElem, 'input').
map(ev => ev.target.value).
startWith(heightSliderElem.value);

var bmi = weight.combineLatest(height, (w, h) => (w / (h * h * 0.0001)).toFixed(1));

// Observers
var weightObserver = x => weightTextElem.innerHTML = x;
var heightObserver = x => heightTextElem.innerHTML = x;
var bmiObserver = x => bmiTextElem.innerHTML = x;

// Subscriptions
weight.subscribe(weightObserver);
height.subscribe(heightObserver);
bmi.subscribe(bmiObserver);
    </script>
</body>
</html>

3. BMI calculator by Nikolett Molnar

Made by Nikolett Molnar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
    <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
<style>
* {
  font-family: Quicksand;
  font-size: 16px;
  color: #333;
}

body {
  margin: 0;
  height: 100vh;
  padding: 0;
  border: 0;
  background: linear-gradient(to bottom right,  #F1F2B5, #eef2f3);
}

.form {
  background-color: #fff;
  height: 240px;
  width: 450px;
  border-radius: 20px;
  margin: 20px auto 20px auto;
  display: block;
  border: solid 1px #289df6;
  
  box-shadow: 0 0 40px 0 #ddd;
}

.form:hover {
  box-shadow: 0 0 60px 0 #ccc;
  transition: .4s;
  transform: scale(1.02);
}

.row-one {
  padding: 20px;
}

.row-two {
  padding: 20px;
}

.text-input {
  width: 60px;
  height: 30px;
  border-radius: 10px;
  background-color: #dbeffe;
  border: none;
  outline: none;
  padding: 5px 10px;
  cursor: pointer;
}

.text-input:last-child {
  margin-bottom: 35px;
}

.text-input:hover {
  background-color: #cbe7fd;
}

#submit {
  border: none;
  border-radius: 10px;
  height: 40px;
  width: 140px;
  background-color: #289df6;
  color: #fff;
  margin: auto;
  display: block;
  outline: none;
  cursor: pointer;
}

#submit:hover{
  background-color: #0a8ef2;
}

.text {
  display: inline-block;
  margin: 5px 20px 5px 8px;;
}

.row-one {
  padding: 30px 20px 15px 20px;
}
.row-two {
  padding: 15px 20px 30px 20px;
}

.container {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #dbeffe;
  border-radius: 50%;
}

.container:hover input ~ .checkmark {
  background-color: #cbe7fd;
}

.container input:checked ~ .checkmark {
  background-color: #289df6;
}

h1 {
  font-size: 30px;
  font-weight: 300;
  text-align: center;
  color: #289df6;
  padding-top: 15px;
  display: block;
}

h2 {
  font-size: 22px;
  font-weight: 300;
  text-align: center;
}

h3 {
  font-size: 24px;
  font-weight: 300;
  text-align: center;
  padding: 15px;
}

h3 b {
  font-size: 32px;
  font-weight: 300;
  color: #289df6;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
</style>
</head>
<body>
  <h3><b>B</b>ody <b>M</b>ass <b>I</b>ndex Calculator</h3>
<form class="form" id="form" onsubmit="return validateForm()">
<div class="row-one">
  <input type="text" class="text-input" id="age" autocomplete="off" required/><p class="text">Age</p>
  <label class="container">
  <input type="radio" name="radio" id="f"><p class="text">Female</p>
    <span class="checkmark"></span>
  </label>
  <label class="container">
  <input type="radio" name="radio" id="m"><p class="text">Male</p>
    <span class="checkmark"></span>
  </label>
  </div>

<div class="row-two">
  <input type="text" class="text-input" id="height" autocomplete="off" required><p class="text">Height (cm)</p>
  <input type="text" class="text-input" id="weight" autocomplete="off" required><p class="text">Weight (kg)</p>
</div>
<button type="button" id="submit">Submit</button>
</form>
      <script>
var age = document.getElementById("age");
var height = document.getElementById("height");
var weight = document.getElementById("weight");
var male = document.getElementById("m");
var female = document.getElementById("f");
var form = document.getElementById("form");

function validateForm() {
  if (age.value == '' || height.value == '' || weight.value == '' || male.checked == false && female.checked == false) {
    alert("All fields are required!");
    document.getElementById("submit").removeEventListener("click", countBmi);
  } else {
    countBmi();
  }
}
document.getElementById("submit").addEventListener("click", validateForm);

function countBmi() {
  var p = [age.value, height.value, weight.value];
  if (male.checked) {
    p.push("male");
  } else if (female.checked) {
    p.push("female");
  }
  form.reset();
  var bmi = Number(p[2]) / (Number(p[1]) / 100 * Number(p[1]) / 100);

  var result = '';
  if (bmi < 18.5) {
    result = 'Underweight';
  } else if (18.5 <= bmi && bmi <= 24.9) {
    result = 'Healthy';
  } else if (25 <= bmi && bmi <= 29.9) {
    result = 'Overweight';
  } else if (30 <= bmi && bmi <= 34.9) {
    result = 'Obese';
  } else if (35 <= bmi) {
    result = 'Extremely obese';
  }

  var h1 = document.createElement("h1");
  var h2 = document.createElement("h2");

  var t = document.createTextNode(result);
  var b = document.createTextNode('BMI: ');
  var r = document.createTextNode(parseFloat(bmi).toFixed(2));

  h1.appendChild(t);
  h2.appendChild(b);
  h2.appendChild(r);

  document.body.appendChild(h1);
  document.body.appendChild(h2);
  document.getElementById("submit").removeEventListener("click", countBmi);
  document.getElementById("submit").removeEventListener("click", validateForm);
}
document.getElementById("submit").addEventListener("click", countBmi);
    </script>
</body>
</html>

4. BMI Calculator by Adam

Made by Adam. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body {
  background-color: #EEE;
  color: #666;
  font-family: sans-serif;
}
.bmi_widget {
  background-color: #FFF;
  width:300px;
  margin:50px auto 0;
  padding:20px 30px;
  box-shadow:0 0 20px rgba(0, 0, 0, 0.15);
  border-left: 5px solid #99BB22;
}
.normw .bmi_widget {
  border-left: 5px solid #99BB22;
}
.underw .bmi_widget {
  border-left: 5px solid #22bba1;
}
.overw .bmi_widget {
  border-left: 5px solid #eded37;
}
.obsew .bmi_widget {
  border-left: 5px solid #ed3737;
}
.bmi_widget h2 {
  margin:0;
}
.bmi_widget .bmirow {
  width:100%;
  margin-bottom:10px;
  clear:both;
}
.bmi_widget input[type=text] {
  border: 1px solid #eee;
  padding: 5px;
  color: #666;
  width:100%;
}

.bmi_widget .bmileft {
  width:125px;
  float:left;
}
.bmi_widget .bmiright {
  float:left;
}

.bmi_widget .resultl {
  background-color:#99BB22;
  float:left;
}
.bmi_widget .resultr {
  width:100px;
  float:right;
  padding:5px 10px;
  text-align:center;
  color:#FFF;
  text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
  border: 1px solid #eee;
  cursor: pointer;
  background-color:#99BB22;
  background: linear-gradient(#99BB22 10%, #99AA33) repeat scroll 0 0 transparent;
}

.normw .bmi_widget .resultr {
    background-color:#99BB22;
    background: linear-gradient(#99BB22 10%, #99AA33) repeat scroll 0 0 transparent;
}
.underw .bmi_widget .resultr {
  background-color:#22bba1;
  background: linear-gradient(#22bba1 10%, #22aa90) repeat scroll 0 0 transparent; 
}
.overw .bmi_widget .resultr {
  background-color:#eded37;
  background: linear-gradient(#eded37 10%, #dcdc26) repeat scroll 0 0 transparent; 
}
.obsew .bmi_widget .resultr {
  background-color:#ed3737;
  background: linear-gradient(#ed3737 10%, #dc2626) repeat scroll 0 0 transparent; 
}
</style>
</head>
<body>
  <div class="bmi_widget">
  <h2>BMI Calculator</h2>
  <div class="bmirow">
    <div class="bmileft">
        <label for="h1">Height - <span id="ht">Feet</span>: </label>
    </div><div class="bmiright">
        <input type="text" id="h"/>
    </div>
  </div>
  <div id="hh2" class="bmirow">
    <div class="bmileft">
      <label for="h2">Inches: </label>
    </div><div class="bmiright">
      <input type="text" id="h2"/>
    </div>
  </div>
  <div class="bmirow">
    <div class="bmileft">
      <label for="w">Weight - <span id="wt">Stone</span>: </label>
    </div><div class="bmiright">
      <input type="text" id="w"/>
    </div>
  </div>
  <div id="hw2" class="bmirow">
    <div class="bmileft">
      <label for="w2">Pounds: </label>
    </div><div class="bmiright">
      <input type="text" id="w2"/>
    </div>
  </div>
<div class="bmirow">
<input checked type="radio" name="u" id="u2" value="i"/><label for="u2">Imperial</label>
<input type="radio" name="u" id="u1" value="m"/><label for="u1">Metric</label>
  </div>
  <div style="clear:both;"></div>
  <div class="resultl"></div>
  <div id="bmib" class="resultr normw" title="..."><strong>BMI:</strong> <span id="bmi">&hellip;</span></div>
  <div style="clear:both;"></div>
                                    
</div>
<br/><br/>
<div style="text-align:center;">
  <small>&copy 2013 <a href="https://www.aboutcher.co.uk" style="color:#666;">Adam Boutcher</a></small>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var h, h2, w, w2, t;

function calculate_bmi(h, w, u) {
  bmi = h * h;
  bmi = w / bmi;
  if (u == 'i') {
    bmi = bmi * 703;
  }
  bmi = bmi.toFixed(1);
  return bmi;
}

function toggle_imperial(u) {
  if (u == 'i') {
    $('#hh2').slideDown();
    $('#hw2').slideDown();
    $('#ht').html("Feet");
    $('#wt').html("Stone");
  } else {
    $('#hh2').hide();
    $('#hw2').hide();
    $('#ht').html("cm");
    $('#wt').html("kg");
  }
}

function ss_bmi(u) {
  // ParseInteger or 0
  h = parseInt($('#h').val()) || 0;
  h2 = parseInt($('#h2').val()) || 0;
  w = parseInt($('#w').val()) || 0;
  w2 = parseInt($('#w2').val()) || 0;

  // Convert to values we can work with.
  if (u == 'i') {h = h * 12;h = h + h2;w = w * 14;w = w + w2;} else {h = h / 100;}

  bmi = calculate_bmi(h, w, u);

  if (bmi < 18.5) {
    $('body').removeClass("normw").removeClass("overw").removeClass("obsew").addClass("underw");
    $('#bmib').attr("title", "Underweight");
  } else if (18.5 <= bmi && bmi <= 24.9) {
    $('body').removeClass("underw").removeClass("overw").removeClass("obsew").addClass("normw");
    $('#bmib').attr("title", "Normal weight");
  } else if (25 <= bmi && bmi <= 29.9) {
    $('body').removeClass("underw").removeClass("normw").removeClass("obsew").addClass("overw");
    $('#bmib').attr("title", "Overweight");
  } else {
    $('body').removeClass("underw").removeClass("normw").removeClass("overw").addClass("obsew");
    $('#bmib').attr("title", "Obese");
  }

  if (bmi == 'NaN' || bmi < 0.1 || bmi == 'Infinity') {
    bmi = "&hellip;";
    $('body').removeClass("underw").removeClass("overw").removeClass("obsew").addClass("normw");
    $('#bmib').attr("title", "...");
  }

  $('#bmi').html(bmi);
};

$("[name=u]").click(function () {
  toggle_imperial($(this).val());
  // Reset
  $('#h').val("");
  $('#h2').val("");
  $('#w').val("");
  $('#w2').val("");
  $('body').removeClass("underw").removeClass("overw").removeClass("obsew").addClass("normw");
  $('#bmib').attr("title", "...");
  $('#bmi').html("&hellip;");
});

$("#h").bind("propertychange input paste", function () {
  u = $('[name=u]:checked').val();
  ss_bmi(u);
});
$("#h2").bind("propertychange input paste", function () {
  u = $('[name=u]:checked').val();
  ss_bmi(u);
});
$("#w").bind("propertychange input paste", function () {
  u = $('[name=u]:checked').val();
  ss_bmi(u);
});
$("#w2").bind("propertychange input paste", function () {
  u = $('[name=u]:checked').val();
  ss_bmi(u);
});
    </script>
</body>
</html>

5. BMI Calculator by Tommy Hodgins

Made by Tommy Hodgins. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<script>  document.documentElement.setAttribute('data-theme','preston')
</script>
  <link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/basic.css'>
<link rel='stylesheet' href='//staticresource.s3.amazonaws.com/template/css/themes/preston.css'>
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Raleway:400,700,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700italic,800,800italic,900,900italic'>
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic'>
  
<style>
body {
  max-width: 500px;
  background: transparent !important;
}
input {
  display: block;
  margin: 0 0 1em 0;
  padding: .4em .5em;
  width: 100%;
  height: 40px;
  outline: none; 
}
[type=number] {
  display: block;
  margin: 0 0 1em 0;
  padding: .4em .5em;
  width: 100%;
  height: 40px;
  outline: none;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 2px;
  background: rgba(255,255,255,.5);
  box-shadow: rgba(0,0,0,.15) 0 1px 0;
  color: rgba(0,0,0,.7);
  font-weight: 400;
  font-size: 12pt;
  transition: all .2s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  font-family: 'Source Sans Pro', 'Open Sans', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
}
[type=number]:focus {
  outline: none;
  border-color: orange;
  box-shadow: #fc0 0 0 3px;
}
</style>
</head>
<body>
  <h1>BMI Calculator</h1>
<h3>Weight</h3>
<input id=weight type=number value=150 oninput=slider.value=value;bmi()>
<input id=slider type=range min=0 max=650 value=185 oninput=weight.value=value;bmi()>
<h3>Height</h3>
<span>Feet</span>
<input id=feet type=number value=6 onchange=bmi()>
<span>Inches</span>
<input id=inches type=number value=0 onchange=bmi()>
<output></output>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.2.1/EQCSS.min.js'></script>
      <script>
function bmi() {
  var weight = document.getElementById('weight').value,
  feet = parseInt(document.getElementById('feet').value * 12),
  inches = parseInt(document.getElementById('inches').value),
  height = feet + inches,
  output = document.querySelector('output'),
  formula = ~~(weight / (height * height) * 703 * 100) / 100,
  category = '';
  if (formula < 18.5) {
    category = 'Underweight';
    document.documentElement.style.background = 'orange';
  } else if (18.5 < formula && formula < 25) {
    category = 'Normal Weight';
    document.documentElement.style.background = 'lightgreen';
  } else if (25 < formula && formula < 30) {
    category = 'Overweight';
    document.documentElement.style.background = 'orange';
  } else if (30 < formula) {
    category = 'Obese';
    document.documentElement.style.background = 'indianred';
  }
  output.innerHTML = '<h1>' + formula + '</h1><h2>' + category + '</h2>';
}
bmi();
    </script>
</body>
</html>
 

6. Simple BMI Calculator

Made by Janez Kolar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Import Roboto font from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
/*
  Define CSS variables for colors
*/
:root {
  --background-color: #f6f6f6;
  --vigo-color: #f09831;
  --slider-color: #A3A3A3;
  --input-number-color: #EBEBEB;
}
/* Prepare your work table. 😎 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 
  Push sliders down from <h1> tag
*/
h1 {
  text-align: center;
  margin-left: 0.2em;
  margin-right: 0.2em;
  margin-bottom: 0.9em;
}
/* 
  Define positioning of the elements inside <body>
*/
html,
body {
  height: 100%; width: 100%;
  margin: 0; padding: 0;
  background-color: var(--background-color);
  color: black;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto', sans-serif;
}
/*
  Styling for calculator <div>
*/
.bmi-calculator {
  border: 5px solid white;
  -moz-box-shadow: 0px 0px 5px hsl(15, 2%, 55%);
  -webkit-box-shadow: 0px 0px 5px hsl(15, 2%, 55%);
  box-shadow: 0px 0px 10px hsl(0,0%,73.9%);
  padding: 3em;
  margin: 2em;
  height: 520px;
  background-color: white;
}
/*
  Styling for div elements wrapping both sliders
*/
.bmi-calculator-weight, .bmi-calculator-height {
  /* Positioning */
  /*border: dotted 1px red;*/
  margin-bottom: 2.2em;
  width: 100%;
  /* background:
    repeating-linear-gradient(90deg, #c8c8c8, #c8c8c8 0.125em /* lines *//*, transparent 0.125em, transparent 1.25em /* space between 
      *//*) 80% no-repeat;
  /*background-size: 100% /* = 10*1.25em + .125em */ /*20%;*/
}
/*
  Styling for both sliders
*/
.weight-slider, .height-slider {
  width: 100%;
  height: 1px;
  border-radius: 10px;
  background: var(--slider-color); /* Light grey background. */
  outline: none; /* Remove outline. */
  /*opacity: 0.7; *//* Set transparency (for mouse-over effects on hover) */
  /*-webkit-transition: .2s;*/ /* 0.2 seconds transition on hover */
  /*transition: opacity .2s;*/
}

/* Mouse-over effects πŸ–± računalniΕ‘ka miΕ‘ka */
/*.weight-slider:hover, .height-slider:hover *//*{
  opacity: 1; *//* Fully shown on mouse-over *//*
}*/


/* DEFINE STYLING FOR INPUT RANGE SLIDERS & INPUT TYPE NUMBER FOR BROWSER COMPATIBILITY
  https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
*/
input[type=range] {
  -moz-appearance: none; /* Override default CSS styles */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
}

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2.5px solid var(--vigo-color);
  height: 20px;
  width: 20px;
  border-radius: 40px;
  background: white;
  cursor: pointer;
  margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */ /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
  border: 2.5px solid var(--vigo-color);
  height: 20px;
  width: 20px;
  border-radius: 40px;
  background: white;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  /* box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; */
  border: 2.5px solid var(--vigo-color);
  height: 20px;
  width: 20px;
  border-radius: 40px;
  background: white;
  cursor: pointer;
}

/* INPUT TYPE NUMBER STYLING*/
input[type=number] {
  -moz-appearance: none; /* Override default CSS styles */
  -webkit-appearance: none;
  cursor: pointer;
  /* Real styling part :D */
  background: var(--input-number-color);
  border-style: none;
  height: 30px;
  width: 60px;
  margin-left: 20px;
  margin-right: 10px;
  text-align: right;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5em;
}

input[type=number]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

/*
  *** END OF DEFAULT STYLING VALUES FOR INPUT RANGE SLIDERS & INPUT TYPE NUMBER ***
*/

/*
  Styling for "Calculate" button
*/
.gumb {
  text-align: center;
  font-size: 1em;
  color: white;
  width: 100%;
  margin-bottom: 10px;
  padding: 11px 32px;
  border: none;
  background-color: var(--vigo-color);
  text-transform: uppercase;
  cursor: pointer;
}

/*
  Media querie for iPhone 5
*/
@media only screen and (max-width: 325px) {
  .bmi-calculator {
    height: 560px;
  }
  
  h1 {
    font-size: 1.5em;
  }
}
</style>
</head>
<body>
  <form name="bmiForm">
<div class="bmi-calculator">
  <h1 style="margin-bottom: 1em;">Calculate your BMI</h1>
  <div class="bmi-calculator-weight">
    <input class="weight-slider" name="realweight" id="myWeight" type="range" min="25" max="180" value="60"/>
    <p style="margin-top: 1.8em;">
      WEIGHT: 
      <input name="TeΕΎa" id="inputWeight" type="number" value="60" min="25" max="180" oninput="showValWeight(this.value)"/>
      <span id="weight"></span> kg
    </p>
  </div>
  <div class="bmi-calculator-height">
    <input class="height-slider" name="realheight" id="myHeight" type="range" min="100" max="220" value="160">
    <p style="margin-top: 1.8em;">
      HEIGHT:
      <input name="ViΕ‘ina" id="inputHeight" type="number" value="160" min="100" max="220" oninput="showValHeight(this.value)"/>
      <span id="height"></span> cm
    </p>
  </div>
  <input class="gumb" type="button" value="Calculate" onclick="calculateBmi()" style="margin-top: 0.5em">
 <p style="margin-top: 1em;font-size: 1.2em;">
   <strong>Your BMI:</strong>
   <span id="yourbmi" style="font-size: 1.2em;margin-left: 8px;"></span>
 </p>
 <p></p>
 <p>
   <span id="evaluationMessage"></span>
 </p>
</div>
</form>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script>
'use strict';
// Define variables for range sliders
// Weight variables
var weightSlider = document.getElementById("myWeight");
var weightOutput = document.getElementById("inputWeight");
// Height variables
var heightSlider = document.getElementById("myHeight");
var heightOutput = document.getElementById("inputHeight");
// Display slider value
weightOutput.innerHTML = weightSlider.value;
heightOutput.innerHTML = heightSlider.value;
// Update sliders in real time while dragging it
weightSlider.oninput = function () {
  weightOutput.innerHTML = this.value;
};
heightSlider.oninput = function () {
  heightOutput.innerHTML = this.value;
};
// Change weight-slider value on weight-number input
function showValWeight(newVal) {
  weightSlider.value = newVal;
};
// Change height-slider value on height-number input
function showValHeight(newVal) {
  heightSlider.value = newVal;
};
// *** Change number input when dragging slider ***
// Add 2 eventListeners for weight and input sliders
weightSlider.addEventListener("input", updateValueWeight);
heightSlider.addEventListener("input", updateValueHeight);
function updateValueWeight(e) {
  weightOutput.value = e.srcElement.value;
}
function updateValueHeight(e) {
  heightOutput.value = e.srcElement.value;
}
// Calculate BMI
function calculateBmi() {
  var weight = document.bmiForm.realweight.value;
  var height = document.bmiForm.realheight.value / 100;
  var realbmi = weight / Math.pow(height, 2);
  var realbmiOutput = document.getElementById("yourbmi");
  var messageOutput = document.getElementById("evaluationMessage");
  var roundedBmi = realbmi.toFixed(1);
  messageOutput.innerHTML = ""; // Clear message before calculating new BMI
  realbmiOutput.innerHTML = " " + roundedBmi; // Print BMI
  // Appropriate message for your BMI rating
  if (roundedBmi > 26) {
    messageOutput.innerHTML = "YOU'RE OBESE";
  } else {

  }
  // Console loggings
  console.log('TeΕΎa: ' + weight + " kg");
  console.log('ViΕ‘ina: ' + height + " m");
  console.log('BMI: ' + realbmi);
}
    </script>
</body>
</html>

7. BMI calculator by Yuanjen

Made by Yuanjen. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700'>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.2.0/css/all.css'>
<style>
* {
  vertical-align: top;
  box-sizing: border-box;
  font-family: Ubuntu;
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  transition-duration: 0.5s;
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 260px;
  background-color: #080B1C;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.screen_1 {
  right: 0px;
}

.screen_2 {
  width: 100%;
  height: 356px;
  position: absolute;
  left: 100%;
  bottom: 75px;
  background-color: #080B1C;
}

.resultTitle {
  font-size: 25px;
  color: #FFFFFF;
  margin: 20px 30px;
  text-align: left;
}

.blockOutside {
  padding: 5px 30px;
}

.blockInside {
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 25px 0px 15px 0px;
}

.resultBMI {
  font-size: 60px;
  font-weight: 700;
  color: #E81D58;
}

.suggestBMI {
  padding: 20px 0px;
}
.suggestBMI span {
  color: #FFFFFF;
}

.suggestion {
  padding: 20px;
  color: #FFFFFF;
}

.title {
  padding: 30px 0px 20px 0px;
}
.title i {
  position: absolute;
  font-size: 20px;
  left: 30px;
  top: 25px;
}

.genderBlock {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 10px auto;
  padding: 10px;
  border: solid 2px transparent;
}
.genderBlock:hover {
  border-color: #E81D58;
  cursor: pointer;
}
.genderBlock i {
  font-size: 50px;
}
.genderBlock .genderText {
  top: 10px;
}

.genderClicked {
  background-color: #E81D58;
}

.blockText {
  margin-bottom: 5px;
}

.heightBlock {
  width: 205px;
  height: auto;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 10px auto;
  padding: 10px;
}
.heightBlock .heightInput {
  background-color: transparent;
  font-size: 30px;
  font-weight: 700;
  color: #FFFFFF;
  width: 100%;
  border-color: transparent transparent #FFFFFF transparent;
  border-width: 1px;
}

.weightBlock, .ageBlock {
  width: 100px;
  height: auto;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 10px auto;
  padding: 10px;
  display: inline-block;
}

.weightNum, .ageNum {
  font-size: 30px;
  font-weight: 700;
  color: #FFFFFF;
}

.circleBtn {
  width: 35px;
  height: 35px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 25px;
  font-weight: 300;
  border-radius: 100%;
  margin-top: 10px;
}
.circleBtn:hover {
  background-color: #E81D58;
  user-select: none;
  cursor: pointer;
}

.calculateBtn {
  padding: 20px 0px;
  margin-top: 20px;
  background-color: #E81D58;
  color: #FFFFFF;
}
.calculateBtn:hover {
  cursor: pointer;
  background-color: #FFFFFF;
  color: #E81D58;
}
</style>
</head>
<body>
  <div class="card">
  <div class="title">BMI CALCULATOR<i class="fas fa-bars"></i></div>
  <div class="screen_1">
    <div class="genderBlock male"><i class="fas fa-mars"></i>
      <div class="genderText">MALE</div>
    </div>
    <div class="genderBlock female"><i class="fas fa-venus"></i>
      <div class="genderText">FEMALE</div>
    </div>
    <div class="heightBlock">
      <div class="blockText">HEIGHT(cm)</div>
      <input class="heightInput"/>
    </div>
    <div class="weightBlock">
      <div class="blockText">WEIGHT(kg)</div>
      <div class="weightNum">50</div>
      <div class="weightMinus circleBtn">-</div>
      <div class="weightPlus circleBtn">+</div>
    </div>
    <div class="ageBlock">
      <div class="blockText">AGE</div>
      <div class="ageNum">25</div>
      <div class="ageMinus circleBtn">-</div>
      <div class="agePlus circleBtn">+</div>
    </div>
  </div>
  <div class="calculateBtn">CALCULATE YOUR BMI</div>
  <div class="screen_2">
    <div class="resultTitle">Your Result</div>
    <div class="blockOutside">
      <div class="blockInside">
        <div class="resultRange">NORMAL</div>
        <div class="resultBMI">22.0</div>
        <div class="suggestBMI">
          <div class="suggestTitle">Suggest BMI range</div><span class="min">18.5</span><span>~</span><span class="max">24.0</span><span> kg/m2</span>
        </div>
        <div class="suggestion">You have a normal body weight. Good job!</div>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
var weight, height, age, gender;
var BMI, range;
var page = 1;
weight = 50;
age = 25;

$(".weightMinus").click(function () {
  weight--;
  $(".weightNum").text(weight);
});

$(".weightPlus").click(function () {
  weight++;
  $(".weightNum").text(weight);
});

$(".ageMinus").click(function () {
  age--;
  $(".ageNum").text(age);
});

$(".agePlus").click(function () {
  age++;
  $(".ageNum").text(age);
});

$(".male").click(function () {
  gender = 'male';
  $(".male").addClass("genderClicked");
  $(".female").removeClass("genderClicked");
});

$(".female").click(function () {
  gender = 'female';
  $(".female").addClass("genderClicked");
  $(".male").removeClass("genderClicked");
});

$(".calculateBtn").click(function () {
  if (page == 1) {
    height = $(".heightInput").val();
    $(".screen_2").css("left", "0%");
    $(".screen_1").css("right", "100%");
    BMI = weight / (height / 100 * (height / 100));
    BMI = Math.round(BMI * 10) / 10;

    console.log('call function success!');
    if (BMI < 18.5) {
      range = 'Underweight';
      $(".resultRange").css("color", "#E5235A");
      $(".suggestion").text("You have an underweight body weight. Be careful!");
    } else if (BMI > 25) {
      range = 'Overweight';
      $(".resultRange").css("color", "#E5235A");
      $(".suggestion").text("You have an overweight body weight. Be careful!");
    } else {
      range = 'Normal';
      $(".resultRange").css("color", "#32DC7C");
      $(".suggestion").text("You have a normal body weight. Good job!");
    }
    $(".resultRange").text(range);

    $(".resultBMI").text(BMI);
    $(".calculateBtn").text("RE-CALCULATE YOUR BMI");
    page = 2;
  } else {
    $(".screen_2").css("left", "100%");
    $(".screen_1").css("right", "0%");
    $(".calculateBtn").text("CALCULATE YOUR BMI");
    page = 1;
  }
});
    </script>
</body>
</html>

8. BMI calculator by Shyam

Made by Shyam. Source

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />

<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />


  <title>CodePen - A Pen by shyam</title>
  
  
  
  
<style>
body{
    text-align: center;
    background: #00b0ff;
    font-size: 10px;
    font-family: 'Noto Sans', sans-serif;
}

.header{
    text-align: center;
    margin-top: 4em;
    width: 50%;
    height: 23rem;;
    box-sizing: border-box;
    background: white;
    display: inline-block;
    box-shadow: 1px -1px 16px -2px rgba(0,0,0,0.99);
    /* transition: all 2s; */
    overflow: hidden;
}

h1{
    background: #00c853;
    margin-top: 0;
    line-height: 3.5em;
    color: white;
}

input[type=text]{
    background: #EDEDED;
    border-style: hidden;
    height: 1.5rem;
    width: 9rem;
    text-align: center;
    transition: all 0.30s ease-in-out;
}

input[type=text]:focus{
    height: 1.9rem;
    width: 9.5rem;
    outline: none;
}

button{
    margin: 1.2em;
    width: 6em;
    height: 2em;
    border-style: hidden;
    background: #00c853;
    color: white;
    margin-top: 1.6rem;
    position: relative; 
    /* overflow: hidden; */
    transition: all 0.8s;
    transform: perspective(1px);
    perspective: 10px;
    perspective-origin: center;
}

button:hover{
    background: #00b248;
    color: white;
    outline: hidden;
}

button:focus{
    background: #00b248;
    outline: none;
}

button::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 40%;
    /* z-index: -1; */
    background: white;
    opacity: 0;
    transform: scale(0);
    transition: all 1s;
}

button:focus::before{
    transform: scale(25);
    opacity: 1;
}

h3{
    margin-top:15em;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>
<body>
    <div class="header">
        <div class="wrapper">
            <h1>BMI calculator</h1>
            <p>Insert Your Age</p>
            <input type="text" id="age">
            <p>Insert Weight in Kg</p>
            <input type="text" id="weight">
            <br>
            <p>Insert Height in cm</p>
            <input type="text" id="height">
            <br>
            <button id="calc">check</button>
            <p id="result"></p>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>
$("#calc").click(function () {
  var age = $("#age").val();
  var weight = $("#weight").val();
  var height = $("#height").val() / 100;
  if (age != 0 && !isNaN(age) && weight != 0 &&
  !isNaN(weight) && height != 0 && !isNaN(weight)) {
    var bmi = weight / Math.pow(height, 2);
    if (bmi < 18.5) {
      setTimeout(() => {
        console.log('lol');
        $('.header').empty();
        $('.header').css({ background: "white" });
        $('.header').html(`<h3> Skinny ${bmi.toFixed(2)}</h3>`);
        $("h1").css({ "margin-top": "30px" });
      }, 100);
    } else
    if (bmi > 18 && bmi < 25) {
      setTimeout(() => {
        console.log('lol');
        $('.header').empty();
        $('.header').css({ background: "white" });
        $('.header').html(`<h3> Normal ${bmi.toFixed(2)}</h3>`);
        $("h1").css({ "margin-top": "30px" });
      }, 1000);
    } else
    {
      setTimeout(() => {
        console.log('lol');
        $('.header').empty();
        $('.header').css({ background: "white" });
        $('.header').html(`<h3>Obese ${bmi.toFixed(2)}</h3>`);
        $("h1").css({ "margin-top": "30px" });
      }, 1000);
    }
  } else
  {
    setTimeout(() => {
      console.log('lol');
      $('.header').empty();
      $('.header').css({ background: "white" });
      $('.header').html(`<h3>fill up all the details </h3>`);
      $("h1").css({ "margin-top": "30px" });
    }, 1000);
  }
});
    </script>
</body>
</html>

9. JavaScript BMI Calculator

Made by Captain Awesome. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
h1 {
  font-family: Palatino Linotype;
  text-align: center;
}

form,
.answer {
  text-align: center;
}

fieldset {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 25px;
  margin-left: auto;
  margin-right: auto;
  width: 400px;
}

.calculate {
  background-color: white;
  border: 2px solid green;
  ;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 2px 1px;
  cursor: pointer;
}

.calculate:hover {
  transition-duration: 0.4s;
  background-color: green;
  color: white;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.reset {
  background-color: white;
  border: 2px solid red;
  ;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 2px 1px;
  cursor: pointer;
}

.reset:hover {
  transition-duration: 0.4s;
  background-color: red;
  color: white;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
  <body>
  <div>
    <fieldset>
      <h1> BMI Calculator </h1>
    </fieldset>
  </div>
  <form>
    <fieldset>
      <div id="height1" class="question">
        <p> Enter your height in meters: </p>
        <input type="text" id="height">
      </div>
      <br>

      <div id="weight1" class="question">
        <p> Enter your weight in kilograms: </p>
        <input type="text" id="weight">
      </div>
      <br>

      <div id="buttons">
        <button class="calculate" type="button" onclick="calculatebmi();"> Calculate </button>
        <button class="reset" type="reset" value="Reset" onclick="clearBox();">Reset</button>
      </div>
  </form>

  <div id="bmi" class="answer">
    <p> BMI is: </p>
  </div>

  <div id="result" class="answer">

  </div>
  </fieldset>
      <script>
function calculatebmi(h, w, bmi, t) {
  h = document.getElementById("height").value;
  w = document.getElementById("weight").value;
  bmi = w / h / h;
  t = Math.round(bmi);
  document.getElementById("bmi").innerHTML = "<br> BMI is: " + t;
  if (t < 18) {
    document.getElementById("result").innerHTML = "<p> You are underweight </p>";
  } else if (t > 18 && t < 25) {
    document.getElementById("result").innerHTML =
    "<p> You are healthy </p>";
  } else if (t > 25 && t < 30) {
    document.getElementById("result").innerHTML =
    "<p> You are overweight </p>";
  } else if (t > 30) {
    document.getElementById("result").innerHTML =
    "<p> You are obese </p>";
  };
};

function clearBox(bmi, result) {
  document.getElementById("bmi").innerHTML = "<br> BMI is:";
  document.getElementById("result").innerHTML = "";
};
    </script>
</body>
</html>

10. BMI Calculator by Frank Choongsaeng

Made by Frank Choongsaeng. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
/* General Styling */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Calibri, Arial;
  transition: all 0.3s ease-out;
}
body {
  overflow-x: hidden;
/*   overflow-y: hidden; */
}
header {
  padding: 50px 50px;
  text-align: center;
  margin-bottom: 50px;
  background-color: #2050ff;
  color: white;
}
thead tr {
  font-size: 14px;
  text-align: center;
  background-color: #aaa;
  text-align: left;
}
tbody{ font-size: 16px; }
td, th { padding: 20px; } 
td { border-bottom: .2px solid #999 }

/* Set Styles For reusable classes */
.body {padding: 0px 10px 0px 10px}
.container {
  max-width: 500px;
  margin: auto;
  margin-top: 50px;
}
.table {
  width: 100%;
  margin-bottom: 50px;
  overflow: hidden;
  background-color: #eee;
  border-collapse: collapse;
  color: #333;
}
.button {
  background-color: #2050ff;
  text-align: center;
  color: white;
  width: 150px;
  padding: 15px 30px;
  margin: auto;
  margin-bottom: 50px;
  box-shadow: 0px 8px 8px -2px #c2c2c2;
  border-radius: 25px;
  cursor: pointer;
}
.button:hover {
  background-color: #4070ff;
}
.button:active{
  background-color: #2030ff;
}
.responsive {
  max-width: 100%;
  height: auto;
  margin-bottom: 50px;
}
.scrollable{ overflow: hidden; overflow-y: auto }
.aside { position: fixed; top: 0; left: -500px }
.info-page {
  font-weight: lighter;
  line-height: 25px;
  text-align: justify;
  height: 100vh; 
  width: 100vw; 
  background-color: #e5e5e5;
  margin: 0;
  padding-top: 50px;
}
.close-button {
  background-color: red;
  padding: 10px;
}
.close-button:hover { background-color: #dd0000 }
.form { margin-bottom: 50px }
.form input, .form button {
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
}
/* Style the meter */
#guage {
  position: relative;
  margin: auto;
  margin-bottom: -150px;
  border-radius: 100%;
  width: 300px;
  height: 300px;
  max-width: 300px;
  max-height: 300px;
}
#guage svg {
  position: absolute;
  top: 0;
  left: 0;
}
#guage .value {
  font-size: 20px;
  position: relative;
  top: 100px;
  text-align: center;
}
#spinner {
  width: 250px;
  height: 250px;
  border-radius: 100%;
  position: absolute;
  top: 25px;
  left: 25px;
  transition: transform 1.5s ease-in-out;
  transform: rotate(45deg);
}
#pointer {
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 12px solid red;
  position: absolute;
  z-index: 20;
  top: 105px;
  left: 5px;
  width: 0px;
}
#guage .small-text {
  font-size: 14px;
  position: relative;
  text-align: center;
  top: 95px;
}
</style>
</head>
<body>
  <div class="main" style="width: 100%">
  <header class="htext-center bg-primary pt-5 pb-5 mb-5">
    <h1 class="text-white text-uppercase">Body Mass Index Results</h1>
    <p class="text-white"><sup><b>Frank&rsquo;s</b> Mega Project</sup></p>
  </header>
  
  <div class="container form">
    <input id="weight" type="number" placeholder="Enter your weight in pounds" max="1000" min="0">
    <input id="height" type="number" placeholder="Enter your height in inches" max="1000" min="0">
    <button id="check">Check</button>
  </div>
      
  <div class="body">
    <div id="guage">
      <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="" height="" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
      viewBox="0 0 3486.3 3486.3"
       xmlns:xlink="http://www.w3.org/1999/xlink">
       <defs>
        <style type="text/css">
         <![CDATA[
          .fil1 {fill:none}
          .fil0 {fill:url(#id0)}
         ]]>
        </style>
        <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="-3.41" y1="1744.6" x2="3550.74" y2="1744.59">
         <stop offset="0.1" style="stop-opacity:1; stop-color:red"/>
<!--           <stop offset="0.1" style="stop-opacity:1; stop-color:#FFE600"/> -->
         <stop offset="0.18" style="stop-opacity:1; stop-color:lime"/>
         <stop offset="0.4" style="stop-opacity:1; stop-color:#FFE600"/>
         <stop offset="0.8" style="stop-opacity:1; stop-color:red"/>
        </linearGradient>
       </defs>
       <g id="Layer_x0020_1">
        <metadata id="CorelCorpID_0Corel-Layer"/>
        <path class="fil0" d="M1761.22 0c134.46,1.5 265.26,18.17 390.78,48.44l-64.38 240.28c-104.96,-24.86 -214.18,-38.66 -326.4,-40.11l0 -248.6zm429.14 58.17c129.18,34.3 252.46,83.03 368.03,144.39l-124.4 215.47c-96.9,-50.69 -200.05,-91.06 -307.98,-119.68l64.35 -240.17zm402.78 163.34c116.57,65.32 224.89,143.62 322.97,232.97l-176.02 176.02c-82.65,-74.14 -173.61,-139.18 -271.29,-193.62l124.34 -215.36zm351.94 259.96c97.2,92.64 183.71,196.4 257.52,309.22l-215.76 124.57c-62.73,-94.02 -135.8,-180.55 -217.62,-257.92l175.87 -175.87zm278.84 342.6c71.4,114.75 129.84,238.41 173.3,368.91l-240.79 64.52c-37.61,-109.27 -87.47,-212.84 -148.02,-309.01l215.51 -124.42zm185.36 406.65c39.92,129.74 65.06,265.94 73.6,406.63l-249.2 0c-8.39,-118.4 -30.46,-233.01 -64.81,-342.21l240.41 -64.42zm-1687.63 -982.11c-112.21,1.47 -221.45,15.23 -326.4,40.12l-64.38 -240.28c125.5,-30.3 256.32,-46.94 390.78,-48.44l0 248.6zm-364.79 49.74c-107.93,28.64 -211.08,68.99 -307.98,119.69l-124.4 -215.47c115.56,-61.37 238.86,-110.07 368.03,-144.39l64.35 240.17zm-342.79 138.53c-97.67,54.45 -188.65,119.48 -271.29,193.62l-176.01 -176.01c98.07,-89.36 206.41,-167.63 322.97,-232.97l124.34 215.36zm-300.41 220.47c-81.81,77.38 -154.9,163.9 -217.62,257.92l-215.76 -124.57c73.8,-112.82 160.32,-216.56 257.51,-309.22l175.87 175.87zm-239.19 291.16c-60.54,96.17 -110.42,199.74 -148.02,309.01l-240.79 -64.52c43.45,-130.51 101.9,-254.16 173.3,-368.92l215.51 124.42zm-160.46 346.64c-34.34,109.2 -56.42,223.81 -64.81,342.21l-249.2 0c8.54,-140.69 33.68,-276.89 73.6,-406.63l240.41 64.42z"/>
        <circle class="fil1" cx="1743.15" cy="1743.15" r="1743.15"/>
        <circle class="fil1" cx="1743.15" cy="1743.15" r="1498.86"/>
       </g>
      </svg>
      <div id="spinner">
        <div id="pointer"></div>
      </div>
      <h2 class="value">BMI</h2>
      <p class="small-text">status</p>
    </div>

    <!-- <div class="text-center">
      <form >
        <input type="number" max="164" id="textfield"/>
        <button id="button">Check</button>
      </form>
    </div> -->

    <div class="container">
      <table class="table">
        <thead>
           <tr>
            <th>PROPERTY</th>
            <th>VALUE</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Weight</td>
            <td>300kg</td>
          </tr>
          <tr>
            <td>Height</td>
            <td>300m</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="button info-button">Info <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: -4px; margin-left: 3px;">
  <g id="24 / notifications / question-circle">
  <path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12.0003 16.9983C12.5528 16.9983 13.0007 16.5506 13.0007 15.9983C13.0007 15.4461 12.5528 14.9983 12.0003 14.9983C11.4479 14.9983 11 15.4461 11 15.9983C11 16.5506 11.4479 16.9983 12.0003 16.9983ZM11 14H13C13 13.2016 13.1254 13.0553 13.9472 12.6444C15.3754 11.9303 16 11.2016 16 9.5C16 7.32063 14.2843 6 12 6C9.79086 6 8 7.79086 8 10H10C10 8.89543 10.8954 8 12 8C13.2772 8 14 8.55641 14 9.5C14 10.2984 13.8746 10.4447 13.0528 10.8556C11.6246 11.5697 11 12.2984 11 14Z" fill="white"/></g>
      </svg>
    </div>
  </div>
</div>

<div class="aside">  
   <div class="container body scrollable fixed info-page">
     <div class="button close-button"><b>close</b><svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: -5px; margin-left: 3px;">
<g id="24 / basic / circle-x">
<path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM8.70711 16.7071L12 13.4142L15.2929 16.7071L16.7071 15.2929L13.4142 12L16.7071 8.70711L15.2929 7.29289L12 10.5858L8.70711 7.29289L7.29289 8.70711L10.5858 12L7.29289 15.2929L8.70711 16.7071Z" fill="white"/>
</g>
</svg>
</div>
</div>
</div>
      <script>
window.onload = () => {
  "use strict";
  const button = document.querySelector(".info-button");
  const close = document.querySelector(".close-button");
  const aside = document.querySelector(".aside");
  const main = document.querySelector(".main");
  const checkBtn = document.querySelector("#check");
  const spinner = document.querySelector("#spinner");
  const height = document.querySelector("#height");
  const weight = document.querySelector("#weight");
  const smallText = document.querySelector(".small-text");
  const bigText = document.querySelector(".value");
  let bmi = 0;

  var expanded = false;

  button.addEventListener("click", handleClick);
  close.addEventListener("click", handleClick);
  checkBtn.addEventListener("click", showLevel);
  height.addEventListener("change", setBMI);
  weight.addEventListener("change", setBMI);

  function setBMI() {
    console.log(height.value, weight.value);
    bmi = Math.round((+weight.value || 0) * 703 / Math.pow(+height.value || 0, 2) * 100) / 100;
  }

  function handleClick() {

    if (!expanded) {
      main.style.marginLeft = "500px";
      aside.style.left = "0px";
    } else {
      aside.style.left = "-500px";
      main.style.marginLeft = "0";
    }
    expanded = !expanded;
  }

  function showLevel() {
    let m = 165 / 75;
    let c = 165 - m * 75;
    let val = bmi;
    if (val < 5)
    val = 5;
    if (val > 75)
    val = 75;
    let deg = m * val + c;
    spinner.style.transform = "Rotate(" + deg + "deg)";

    let status = showReport(bmi);
    smallText.innerHTML = status;
    bigText.innerHTML = bmi + " bmi";
  }

  function showReport(v, val) {
    let text = "";
    let bmis = {
      "very severly underweight": v <= 15,
      "severly underweight": v > 16 && v <= 16,
      "underweight": v > 16 && v <= 18.5,
      "Normal (Healthy Weight)": v > 18.5 && v <= 25,
      "Overweight": v > 25 && v <= 30,
      "Obese Class I (Moderately obese)": v > 30 && v <= 35,
      "Obese Class II (Severely obese)": v > 35 && v < 40,
      "Obese Class III (Very severely obese)": v > 40 && v <= 45,
      "Obese Class IV (Morbidly Obese)": v > 45 && v <= 50,
      "Obese Class V (Super Obese)": v > 50 && v <= 60,
      "Obese Class VI (Hyper Obese)": v > 60 };

    for (let i in bmis) {
      if (bmis[i]) {
        text += i;
        break;
      }
    }
    return text;
  }
};
    </script>
</body>
</html>

11. BMI Calculator by BJack

Made by BJack. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> 
<style>
*{
  font-family: Arial;
  font-size: 12pt;
  box-sizing: border-box;
  text-shadow: 1px 1px 0px #fff;
}
h1{
  text-align: center;
  cursor: move;
}
p{
  margin-bottom:-10px;
}
html,body{
  padding: 0;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/45816/bg.png');
}
label,input,form{
  appearance: none;
  width: 100%;
  margin:0 auto;
  padding: 0;
  height: 100%;
  
}

fieldset{
  display: block;
  outline: 0;
  border: 1px solid #C5DFEA;
  padding:0.5em
  width: 100%;
  height: auto;
  transition: height 0.4s ease-in-out;
  background: #Fff;
}
legend{
  text-align:center;
  background: #fff;
  border: 1px solid #C5DFEA;
  padding: 0.25em 0.5em;
}
.wrapper{
  position: absolute;
  width: 300px;
  height: auto;
  left: calc(50% - 105px);
  top: calc(50% - 175px);
  background: #F0FAFF;
  padding: 0.5em;
  border: 1px solid #C5DFEA;
  box-shadow: 0px 0px 20px #C5DFEA;
}
label{
  position: relative;
  left: 10px; 
  top: 33px;
  transition: top 0.4s,
              color 0.4s,
              font-size 0.4s;
  color: #999;
  font-style: italic;
  cursor: text;
}
.label-up{
  left: 10px; 
  top: 16px;
  font-size: 10px;
  transition: top 0.4s,
              color 0.4s,
              font-size 0.4s;
  color: #000;
  font-style: normal;
}
input{
  display: block;
  outline: 0;
  border: 1px solid #C5DFEA;
  padding:0.5em;
  line-height: 1.5em;
margin-bottom: 10px;
}
label + input[type="radio"] {
  display: inline-block;
}
.results{
  clear:both;
}
.cms:after{
  position:absolute;
  content:"cm";
  top: 33px;
  right: 33px;
}
.kgs:after{
  position:absolute;
  content:"kg";
  top: 15px;
}
.clearfix{
  clear:both;
}
.height{
  margin-bottom: -10px;
}
.reset, .submit{
  background: #C2EBFF;
  display: inline-block;
  width:100%;
  cursor: pointer;
}
.submit{
  margin-right: 10px;
}
:disabled{
  background: #999;
  color: #fff;
  text-shadow: 1px 1px 0px #000;
  cursor:default;
}
</style>
</head>
<body>
  <div class="wrapper">
  <h1 style="text-algin:center;font-size:20pt">BMI Calculator</h1>
  <p>The <strong>Body Mass Iindex (BMI)</strong> is a measure for human body shape based on an individual's mass and height.</p>
<form class="bmiCalc">
<label for="height">Height (cm)</label>
  <input id="height" type="text" min="1" class="height" />
  <label for="weight">Weight (kg)</label>
<input id="weight" type="text" min="1" class="weight" />
<!--
<label for="age">Age</label>
<input id="age" type="number" min="1"  class="age" />

<label>Male</label>
<input type="radio" name="gender" class="male" /> 
<label>Female</label>
<input type="radio" name="gender" class="female" /> 
-->
<input style="float:left;" type="submit" id="submit" class="submit"/> 
<input style="float:left;" type="button" value="Reset" class="reset" />
  </form>
  <div class="clearfix"></div>
  <div>
  <fieldset>
    <legend>Results</legend>
      <p class="results"><p>
    </fieldset>
</div>
  <div class="drag"></div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
      <script>
$(document).ready(function () {
  $('.submit').click(function () {
    var height = $('.height').val();
    var weight = $('.weight').val();
    //var age = $('.age').val();
    //var gender = $('.gender').val();

    if (weight > 0 && height > 0) {
      var bmi = weight / (height / 100 * (height / 100));
      bmi = bmi.toFixed(2);

      if (bmi < 15) {
        $('.results').append("Your BMI is: " + bmi + '<br>' + " You a very severely underweight");
      }
      if (bmi > 15 && bmi < 16) {
        $('.results').append("Your BMI is: " + bmi + '<br>' + "You are Severely underweight.");
      }
      if (bmi > 16 && bmi < 18.5) {
        $('.results').append("Your BMI is: " + bmi + '<br>' + "You are underweight.");
      }
      if (bmi > 18.5 && bmi < 25) {
        $('.results').append("Your BMI is: " + bmi + '<br>' + "You are a normal weight.");
      }
      if (bmi > 25 && bmi < 30) {
        $('.results').append("Your BMI is: " + bmi + '<br>' + "You are overweight.");
      }
      if (bmi > 30 && bmi < 35) {
        $('.results').append("Your BMI is: " + bmi + '<br>' + "You are moderately obese.");
      }
      if (bmi > 35 && bmi < 40) {
        $('.results').append("Your BMI is: " + bmi + '<br>' + "You are severely obese.");
      }
      if (bmi > 40 && bmi < 50) {
        $('.results').append("Your BMI is: " + bmi + '<br>' + "You are very severely obese.");
      }
      if (bmi > 50) {
        $('.results').append("Your BMI is: " + bmi + '<br>' + "Wait, what? Seek immediate medical attention you're about the explode!");
      }
    } else
    {
      alert("Please fill out the form correcty");
    }
    $('.submit').attr('disabled', true);
  }); // bmi click

  $(function () {

    $('input').focus(function () {
      $(this).prev('label').addClass('label-up');
    }); // focus

    $('input').blur(function () {
      if ($(this).val().length == 0) {
        $(this).prev('label').removeClass('label-up'); // on blur, if the input is empty maintain label
      } else
      if ($(this).val().length == "") {
        $(this).prev('label').removeClass('label-up'); // on blur, if the input is empty maintain label
      } else
      {
        $(this).prev('label').addClass('label-up'); //if the input isn't empty, add the label class
      } // end if empty    

    }); // input blur

  }); // Checks to see if empty

  $('.reset').click(function () {
    var answer = confirm("are you sure you want to reset the form?");
    if (answer) {
      $('.results').append().text(" ");
      $('label').removeClass('label-up');
      $('.submit').attr('disabled', false);
      $('.bmiCalc')[0].reset();
    } else {
      // nothing to do here
    }
  });

  $(function () {
    $(".wrapper").draggable({
      containment: "parent", // cannot drag outside window
      handle: "h1" // Drag handle
    });
  }); // Draggable init

}); // global ready
    </script>
</body>
</html>