JSFiddle - React, Tailwind, and code Playground

by ethanpil

HTML

<table style="width:100%">
    <tr>
        <td width="85%">
            <input type="text" name="weight" id="weight" value="0">
        </td>
        <td>LBS.</td>
            <td style=""> <a href="#weightInfo" data-rel="popup" data-role="button" data-icon="info" data-theme="d" id="weightInfoIcon" data-iconpos="notext">Weight Units</a> </td><td> <a href="#weightCalc" data-rel="popup" data-role="button" data-icon="grid" data-theme="d" id="weightInfoIcon">Read Scale</a>

        </td>
    </tr>
</table>
<div data-role="popup" id="weightInfo" class="ui-content" data-theme="c" style="max-width:150px;">
    <table style="font-size:.78em">
        <tbody>
            <tr>
                <th>Pounds:</th>
                <td id="weight-unit-pound"></td>
            </tr>
            <tr>
                <th>Metric Tons:</th>
                <td id="weight-unit-metric_ton"></td>
            </tr>
            <tr>
                <th>Gross Tons:</th>
                <td id="weight-unit-gross_ton"></td>
            </tr>
            <tr>
                <th>Kilograms:</th>
                <td id="weight-unit-kilogram"></td>
            </tr>
        </tbody>
    </table>
</div>
<div data-role="popup" id="weightCalc" class="ui-content" data-theme="c" style="max-width:250px;">
    <button data-theme="b" id="readScale">Read Scale</button>
    <br />
    <input type="text" name="calc-weight" id="calc-weight" value="0">
    <select name="calc-weight-unit" id="calc-weight-unit">
        <option value="pound" selected>Pounds</option>
        <option value="metric_ton">Metric Tons</option>
        <option value="gross_ton">Gross Tons</option>
        <option value="kilogram">Kilograms</option>
    </select>
    <br />
    <div id="calc-weight-info"></div>
    <button data-theme="a" id="updateWeight">Update Weight</button>
</div>

CSS

table {
    font-size: .9em;
}
th {
    text-align: right;
}

JavaScript

function weight_convert(rawweight, weight_unit) {
    var weight = new Array();

    switch (weight_unit) {
        case "pound":
            weight.pound = rawweight;
            weight.kilogram = weight.pound * 0.45359237;
            weight.gross_ton = weight.pound / 2240;
            weight.metric_ton = weight.kilogram / 1000;
            break;
        case "metric_ton":
            weight.metric_ton = rawweight;
            weight.kilogram = weight.metric_ton * 1000;
            weight.pound = weight.metric_ton * 2204.62262;
            weight.gross_ton = weight.pound / 2240;
            break;
        case "gross_ton":
            weight.gross_ton = rawweight;
            weight.pound = weight.gross_ton * 2240;
            weight.kilogram = weight.pound * 0.45359237;
            weight.metric_ton = weight.kilogram / 1000;
            break;
        case "kilogram":
            weight.kilogram = rawweight;
            weight.pound = weight.kilogram * 2.20462262;
            weight.gross_ton = weight.pound / 2240;
            weight.metric_ton = weight.kilogram / 1000;
            break;
        default:
            weight.kilogram = "ERROR";
            weight.pound = "ERROR";
            weight.gross_ton = "ERROR";
            weight.metric_ton = "ERROR";
    }
    //round the numbers
    weight.pound = Math.round(weight.pound).toFixed(3);
    weight.kilogram = Math.round(weight.kilogram).toFixed(3);
    weight.gross_ton = Math.round(weight.gross_ton).toFixed(3);
    weight.metric_ton = Math.round(weight.metric_ton).toFixed(3);

    return weight;

}

$("#weight, #weight-unit").change(function () {

    rawweight = $("#weight").val();
    weight_unit = 'pound';

    if ($.isNumeric(rawweight)) {

        var weight = weight_convert(rawweight, weight_unit);

        $("#weight-unit-pound").text(weight.pound);
        $("#weight-unit-metric_ton").text(weight.metric_ton);
        $("#weight-unit-gross_ton").text(weight.gross_ton);
       ...