JSFiddle - React, Tailwind, and code Playground

by John Satriano

HTML

<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"> https://www.k-state.edu/paccats/Contents/Nutrition/PDF/Needs.pdf


<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Information</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <div id="inputs">

      Units:
      <input type="radio" name="metricSystem" value="0" checked="checked" /> Customary
      <input type="radio" name="metricSystem" value="1" /> Metric
      <br/> Weight:
      <input type="number" id="weight" value="200" width=100 /> lbs/kg

      <br/> Sex:
      <input type="radio" name="sex" id="sex" value="0" checked="checked" /> Male
      <input type="radio" name="sex" id="sex" value="1" /> Female
      <br/> Height:
      <input type="number" id="height" value="65" /> in/cm
      <br/> Age:
      <input type="number" id="age" value="25" /> years old
      <br/> Activity level:
      <select id="activity">
        <option value="1">None</option>
        <option value="1.1">Sedentary, to and from desk</option>
        <option value="1.2">Average, walk to work, walk at work</option>
        <option value="1.3">Above average, light workout every day</option>
        <option value="1.4">High, medium intensity cardio every day</option>
        <option value="1.5">Intense, high intensity cardio every day</option>
      </select>
      <br/> I want to
      <input type="radio" id="gain" name="gain" value="1" /> gain
      <input type="radio" id="gain" name="gain" value="-1" checked="checked" /> lose
      <input type="number" id="goal" value="2" /> lbs/kg per week
      <br/>

    </div>
    You need to consume
    <input type="text" id="calories"...

CSS

input[type="number"] {
  width: 55px;
}

input[type="text"] {
  width: 75px;
}

JavaScript

$(function() {
    $("#tabs").tabs();
  });

  weight = document.getElementById('weight');
  height = document.getElementById('height');
  calories = document.getElementById('calories');
  var metricSystem = 0;
  const CUSTOMARY = 0;
  const METRIC = 1;
  const MALE = 0;
  const FEMALE = 1;

  function calculateF() {
    gender = $("input[type='radio'][name='sex']:checked").val();
    var bee = 0;
    if (gender == MALE) {
      bee = 66.5 + 13.8 * toKgs(weight.value) + 5.0 * tocms(height.value) - 6.8 * age.value;
    } else if (gender == FEMALE) {
      bee = 655.1 + 9.6 * toKgs(weight.value) + 1.9 * tocms(height.value) - 4.7 * age.value;

    }
    calories.value = Math.round(bee * $("#activity").val() + $("input[type='radio'][name='gain']:checked").val() * toKgs($("#goal").val()) * 1000);

  }

  $('#weight, #height, #age, #goal, #sex, #activity, #gain').change(function() {
    calculateF()
  });


  calculateF();


  function toKgs(weight) {
    metricSystem = $("input[type='radio'][name='metricSystem']:checked").val();
    if (metricSystem == CUSTOMARY) {
      return weight / 2.20462;
    }
    return weight
  }

  function tocms(height) {
    metricSystem = $("input[type='radio'][name='metricSystem']:checked").val();
    if (metricSystem == CUSTOMARY) {
      return height * 2.45;
    }
    return height
  }


  $('input[type="radio"][name="metricSystem"]').change(function() {
    metricSystem = $("input[type='radio'][name='metricSystem']:checked").val();
    if (metricSystem == CUSTOMARY) {
      weight.value = weight.value * 2.20462;
      goal.value = goal.value * 2.20462
      height.value = height.value / 2.45;
    } else {
      weight.value = weight.value / 2.20462;
      goal.value = goal.value / 2.20462
      height.value = height.value * 2.45;
    }
    weight.value = Math.round(weight.value)
    height.value = Math.round(height.value)
    calculateF();
  });