JSFiddle - React, Tailwind, and code Playground

by Vikash Verma

HTML

<fieldset class="IOPS-field">
    <legend>IOPS/Bandwidth</legend>
    <table>
        <tr>
            <td>
                <input type="radio" name="bandwidth" value="IOPS-block" checked>IOPS at Block Size:
            </td>
            <td>
                <input type="text" name="IOPS" id="IOPS" value="500000" size="3"> at
                <select id="block-size">
                    <option value="4096" selected>4K</option>
                    <option value="8192">8K</option>
                    <option value="16384">16K</option>
                    <option value="32786">32K</option>
                    <option value="65536">64K</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="bandwidth" value="pure-bandwidth">Bandwidth (GBps):
            </td>
            <td>
                <input type="text" name="bandwidth-entry" value="1953.125" id="bw" size="6">
            </td>
        </tr>
    </table>
</fieldset>

JavaScript

function iops_bw_update(toUpdate) {
    alert(this.id);
        var iops = parseInt($("#IOPS").val());
        var block = parseInt($("#block-size").val());
        var bw = parseFloat($("#bw").val());

        if (toUpdate == "BW") {
            $("#bw").val((iops*block)/1048576);
        }
        else {
            $("#IOPS").val((bw*1048576)/block);
        }
}

$(document).ready(function(){    
    $("#IOPS").bind("keypress", iops_bw_update);
    $("#bw").bind("keypress", iops_bw_update);
    $("#block-size").bind("change", iops_bw_update);
});