JSFiddle - React, Tailwind, and code Playground

by ethanpil

HTML

<table style="width:100%">
    <tr>
        <td width="85%">
            <input type="text" name="price" id="price" value="0">
        </td>
            <td>/LB</td>
            <td style=""> <a href="#priceInfo" data-rel="popup" data-role="button" data-icon="info" data-theme="d" id="priceInfoIcon" data-iconpos="notext">Weight Units</a> </td><td> <a href="#priceCalc" data-rel="popup" data-role="button" data-icon="grid" data-theme="d" id="priceInfoIcon">Calculate Price</a>

        </td>
    </tr>
</table>
<div data-role="popup" id="priceInfo" class="ui-content" data-theme="c" style="max-width:150px;">
    <table class="pricetable">
        <tbody>
            <tr>
                <th>Price Per Pound</th>
                <td id="price-per-pound"></td>
            </tr>
            <tr>
                <th style="border-top: 1px solid #000;">Price Per Metric Ton</th>
                <td id="price-per-metric_ton"></td>
            </tr>
            <tr>
                <th style="border-top: 1px solid #000;">Price Per Gross Ton</th>
                <td id="price-per-gross_ton"></td>
            </tr>
            <tr>
                <th style="border-top: 1px solid #000;">Price Per Kilogram</th>
                <td id="price-per-kilogram"></td>
            </tr>
        </tbody>
    </table>
</div>
<div data-role="popup" id="priceCalc" class="ui-content" data-theme="c" style="max-width:250px;">
    <br />
    <input type="text" name="calc-price" id="calc-price" value="0">
    <select name="calc-price-per" id="calc-price-per">
        <option value="pound" selected>per Pound</option>
        <option value="metric_ton">per Metric Ton</option>
        <option value="gross_ton">per Gross Ton</option>
        <option value="kilogram">per Kilogram</option>
    </select>
    <br />
    <div id="calc-price-info"></div>
    <button data-theme="a" id="updateWeight">Update Price</button>
</div>

CSS

table {
    font-size: .9em;
}
th,td {
    text-align: center;
}
.pricetable { margin: 0 auto; }
.pricetable th, .pricetable td { display: block; }
.pricetable tr { margin-top: 1em; }

JavaScript

function price_convert(rawprice, price_unit) {
    var price = new Array();

    switch (price_unit) {
        case "pound":
            price.pound = rawprice;
            price.kilogram = price.pound * 2.20462;
            price.gross_ton = price.pound * 2240;
            price.metric_ton = price.pound * 2204.62262;
            break;
        case "metric_ton":
            price.metric_ton = rawprice;
            price.pound = rawprice / 2204.62262;            
            price.kilogram = price.pound * 2.20462;
            price.gross_ton = price.pound * 2240;
            break;
        case "gross_ton":
            price.gross_ton = rawprice;
            price.pound = price.gross_ton / 2240;
            price.kilogram = price.pound * 2.20462;
            price.metric_ton = price.pound * 2204.62262;
            break;
        case "kilogram":
            price.kilogram = rawprice;
            price.pound = price.kilogram / 2.20462262;
            price.gross_ton = price.pound * 2240;
            price.metric_ton = price.pound * 2204.62262;
            break;
        default:
            price.kilogram = "ERROR";
            price.pound = "ERROR";
            price.gross_ton = "ERROR";
            price.metric_ton = "ERROR";
    }

    return price;

}

$("#price, #price-per").change(function () {

    rawprice = $("#price").val();
    price_unit = 'pound';

    if ($.isNumeric(rawprice)) {

        var price = price_convert(rawprice, price_unit);

        $("#price-per-pound").text(price.pound);
        $("#price-per-metric_ton").text(price.metric_ton);
        $("#price-per-gross_ton").text(price.gross_ton);
        $("#price-per-kilogram").text(price.kilogram);

    } else {
        alert("Weight must be a number. No letters or other characters allowed.");
    }

});

$("#calc-price, #calc-price-per").change(function () {

    rawprice = $("#calc-price").val();
    price_unit = $("#calc-price-per").val();

    if ($.isNumeric(rawprice)) {

        var price...