JSFiddle - React, Tailwind, and code Playground

by Thiago dos Santos Souza

HTML

<label class="form">
		<span class="peso">Peso</span>
		<input type="number" id="pesoID" class="ipt" maxlength="10" autofocus autocomplete="off">

		<span class="altura">Altura</span>
		<input type="number" id="alturaID" class="ipt" maxlength="10" autocomplete="off">

		<span class="resultado">Resultado</span>
		<input type="text" id="resultadoID" class="ipt" maxlength="10" autocomplete="off" >
		<button id="calc" class="btn" onclick="calcula();">Calcular</button>
		<button id="calc" class="btn" title="Limpar Formulário" onclick="limpa();">Limpar</button>
	</label>

CSS

* {margin: 0; padding: 0; } 

h1 {text-align: center; margin: 2%;}

h2 {text-align: center; margin: 0% 0% 10% 0;}

label.form {margin: 5% 10% 10% 19%;}

input {width: 130px; height: 50px; }

span.peso {padding: 2px; font-weight: bold; font-size: 1.3em; font: sans-serif; MS;}

span.altura {padding: 6px; font-weight: bold; font-size: 1.3em;}

span.resultado {padding: 6px; font-weight: bold; font-size: 1.3em;}

.ipt {font: Trebuchet; font-size: 1.3em; text-align: center;}

.btn {width: 80px; height: 45px; padding: 0px; font-weight: bold;  }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

JavaScript

function calcula(){
 
	var fieldA = document.getElementById("pesoID").value;
	var fieldB = document.getElementById("alturaID").value; 

	var Resultado = fieldA/(Math.pow(fieldB, 2));

	var Imc = parseFloat(Resultado);

	document.getElementById("resultadoID").value = Imc.toFixed(2);
}

function limpa(){
	document.getElementById("pesoID").value='';
	document.getElementById("alturaID").value = ''; 
	document.getElementById("resultadoID").value = '';
}