JSFiddle - React, Tailwind, and code Playground

by Fernando Leal

HTML

<body>
    <form id="formulario">
        <fieldset>
            <legend>Cálculo do IMC</legend>
            
            <label for="quilos">Quilos:</label>
            <input type="text" name="quilos"/>          
            
            <label for="metros">Metros:</label>
            <input type="text" name="metros"/>
            
            <label for="centimetros">Cm:</label>
            <input type="text" name="centimetros"/>
            
            <label for="imc">IMC:</label>
            <input type="text" name="imc" disabled="disabled"/>
            
            <a href="#" onclick="calcularIMC()">Calcular</a>
        </fieldset>
    </form>
</body>

CSS

img, table { width:165px; }
fieldset { width:140px; }
label { display:block; float:left;}
label, input {width:68px; margin:3px 0; }
th, td {border:1px solid #ccc; font-size:0.8em;}

JavaScript

calcularIMC = function(){
    var formulario = document.getElementById("formulario");
    
    var quilos = +formulario.quilos.value;    
    var metros = +formulario.metros.value;  
    var centimetros = +formulario.centimetros.value;
    
    var altura = (metros*100 + centimetros)/100;    
    var imc = quilos / (altura * altura);    
    formulario.imc.value = imc.toFixed(2);
}