JSFiddle - React, Tailwind, and code Playground

by Bryan Weaver

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">	<strong>Height:</strong>

            <div class="form-group">
                <select name="height-ft" id="height-ft" class="form-control">
                    <option value="12">1'</option>
                    <option value="24">2'</option>
                    <option value="36">3'</option>
                    <option value="48">4'</option>
                    <option value="60">5'</option>
                    <option value="72">6'</option>
                    <option value="84">7'</option>
                </select>
            </div>
            <div class="form-group">
                <select name="height-in" id="height-in" class="form-control">
                    <option value="1">1"</option>
                    <option value="2">2"</option>
                    <option value="3">3"</option>
                    <option value="4">4"</option>
                    <option value="5">5"</option>
                    <option value="6">6"</option>
                    <option value="7">7"</option>
                    <option value="8">7"</option>
                    <option value="9">9"</option>
                    <option value="10">10"</option>
                    <option value="11">11"</option>
                </select>
            </div>
        </div>
        <div class="col-md-12">	<strong>Weight:</strong>

            <select name="weight-in" id="weight-in" class="form-control">
                <option value="100">100</option>
                <option value="120">120</option>
                <option value="140">140</option>
                <option value="160">160</option>
                <option value="180">180</option>
                <option value="200">200</option>
         ...

JavaScript

/* BMI Calculator */



 $('#calculatebutton').click(function () {
     var weight = parseInt($('#weight-in').val()),
         heightInches = parseInt($('#height-ft').val()) + parseInt($('#height-in').val()),
         heightsqaured = (heightInches) * (heightInches),
         result = ((weight) / (heightsqaured) * 703);
     debugger;
     if (result < 16) {
         var rating = ('You are severely underweight');
     } else if (result > 16 && result < 18.5) {
         var rating = ('You are underweight');
     } else if (result > 18.5 && result < 25) {
         var rating = ('You are healthy');
     } else if (result > 25 && result < 30) {
         var rating = ('You are overweight');
     } else if (result > 30 && result < 35) {
         var rating = ('You are moderately obese');
     } else if (result > 35 && result < 40) {
         var rating = ('You are severely obese');
     } else if (result > 40 && result < 80) {
         var rating = ('You are very severely obese');
     } else if (result > 80) {
         var rating = ('This result seems unlikely, please check that the information you have entered is correct');
     }
     $('#result').html('Your BMI is ' + result.toFixed(1) + '. ' + rating + '.');
 });