JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<label>
    <input type="radio" name="System" value="US" checked/>US</label>
<label>
    <input type="radio" name="System" value="Metric" />Metric</label>
<label>Weight</label>
<input type="text" id="weight" value="100">
<label>Height</label>
<input type="text" id="height" value="62">
<label for="">Teen Mother?</label>
<select name="tm" id="tm">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<label for="">Twins?</label>
<select name="twins" id="twins">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select>
<table id="results"></table>

CSS

label, input[type="text"], select {
    display:block;
}
td {
    width:100px;
}

JavaScript

$(function () {
    
    //Default values. TM = teen mother, twins = expecting twins
    tm = 'No';
    twins = 'No';
    
    
    //Call functions on page load, generating table from default height and weight.
    calculateBmi();
    getDemos();
    getGain();
    genTable();

    //On change of a form element, rerun the table.
    $('input, select').change(function () {
        
        calculateBmi();
        getDemos();
        getGain();
        genTable();

    })

    // Get the selected values from form element, overwriting defaults
    function getDemos() {
        weight = $('#weight').val();
        height = $('#height').val();
        tm = $('#tm').val();
        twins = $('#twins').val();
        method = $('input[name="System"]:checked').val();
    }
    // Calculate BMI, converting for US and metric systems
    function calculateBmi() {
        bmi = $('#weight').val() / ($('#height').val() * $('#height').val());
        if ($('input[name="System"]').val() == 'US') {
            bmi = bmi * 703;
        }
        return bmi;
    }

    //Get weight-gain rates, depending on body type, averages, and system
    function getGain() {
        // The following rates are for US measurement system
        if (method == 'US') {
            //If user is underweight, use these rates.
            if (bmi < 19.8) {
                if (tm == 'No' && twins == 'No') {
                    gain = [
                        [.32, .45, .39],
                        [1.59, 2.27, 1.93],
                        [2.11, 3.01, 2.56], ];
                } else if (tm == 'Yes' && twins == 'No') {
                    gain = [
                        [.40, .45, .43],
                        [1.98, 2.27, 2.13],
                        [2.64, 3.01, 2.83], ];
                } else {
                    gain = [
                        [.45, .57, .51],
                        [2.27, 2.83, 2.55],
                        [3.01, 3.77, 3.39], ];
                }
            }
        ...