JSFiddle - React, Tailwind, and code Playground

by Bruno Augusto

HTML

<form id="formulario">

    <p>
        <label for="weight">Peso (em quilos)</label>
        <input type="text" id="weight" name="weight"/>          
    </p>
    
    <p>
        <label for="height">Altura (em metros)</label>
        <input type="text" id="height" name="height" />
    </p>
    
    <p>
        <label for="imc">IMC:</label>
        <input type="text" id="imc" name="imc" readonly="readonly" />
    </p>

    <p>
        <button id="calculate">Calcular</button>
    </p>
    
</form>

CSS

label {
    display: inline-block;
    width: 120px;
}

JavaScript

function IMC( weight, height ) {
    return new Number( weight / Math.pow( height, 2 ) ).toFixed( 2 );
}

$( document ).ready( function() {
    
    $( '#calculate' ).click( function( event ) {
    
        $( '#imc' ).val(
            
            IMC(
                  parseInt( $( '#weight' ).val() ),
                parseFloat( $( '#height' ).val() )
            )
        );
        
        event.preventDefault();
    });
});