Hola, tengo un código JS de una calculadora de IMC para usar online, funciona perfecto, pero no me gusta la forma en que se visualiza en la pantalla, mi pregunta es la siguiente; utilizando este mismo código puedo hacer un marco a la calculadora, y agregarle color de fondo?
Les agradezco cualquier ayuda. Demás está decir que soy muy novato en el tema.
Les dejo el código para que visualizen la calculadora y entiendan mejor a lo que me refiero.
<script type="text/javascript">
function calcBMI(){
// Get Variables and validate to make sure they're numbers,
// setting them to a value of 1 if they're not.
var weight = (isNaN(document.wcbubba.weight.value)) ? 1 : document.wcbubba.weight.value;
if (weight == 0) alert("Results will be inaccurate. Weight is not a valid number.");
var height = (isNaN(document.wcbubba.height.value)) ? 1 : document.wcbubba.height.value;
if (height == 0) alert("Results will be inaccurate. Height is not a valid number.");
// set multipliers based on whether metric or English units were selected
var wmult = (document.wcbubba.units.value == "pounds") ? 2.204 : 1;
// Turns inches/centimeters into meters
var hmult = (document.wcbubba.hunits.value == "inches") ? .0254 : .01;
// Do the calculation (weight in kg divided by the height in meters
// times itself). The multiplication by 10 and then division by ten
// work in conjunction with Math.round() to round the value to one
// decimal place of precision.
var BMI = Math.round(((weight / wmult)/((height * hmult)*(height * hmult))) *10)/10;
// get the analysis - note this is for general purpose, there is a separate scale for
// Southeast Asian people and there may be more variants on the way
var result = "";
if(BMI < 16.5) result = "severely underweight";
else if((BMI >=16.5)&&(BMI<=18.49)) result = "underweight";
else if((BMI >=18.5)&&(BMI<=25)) result = "normal";
else if((BMI >=25.01)&&(BMI<=30)) result = "overweight";
else if((BMI >=30.01)&&(BMI<=35)) result = "obese";
else if((BMI >=35.01)&&(BMI<=40)) result = "clinically obese";
else result = "morbidly obese";
document.getElementById('results').innerHTML = "Your Body Mass Index (BMI) is: " + BMI + ".<br><br>This would be considered " + result + ".";
}
</script>
<form name="wcbubba" id="wcbubba" action="javascript:void()">
Weight:<br> <input type=text name="weight" size="6"> <select name="units"><option value="pounds">pounds<option value="kilos">kg</select><br><br>
Height:<br> <input type=text name="height" size="6"> <select name="hunits"><option value="inches">inches<option value="cm">cm</select><br><br>
<input type="submit" value="Calculate My BMI" onClick="calcBMI();"></form><br>
<div id="results" style="border:1px solid #000;padding:4px;font-size:15px;font-weight:bold;width:400px;">
Your BMI is:<br><br>
</div>