La calculadora del índice de masa corporal (IMC) se puede utilizar para calcular los valores del IMC en función de su altura y peso. El IMC es un indicador bastante confiable de la grasa corporal para la mayoría de las personas.
Fórmula:
BMI = (weight) / (height * height)
Enfoque: el IMC es un número calculado a partir del peso y la altura de una persona. Para averiguar el IMC, tomaremos información del usuario (tanto la altura como el peso) que se almacenará en la variable de altura y peso para su posterior cálculo. El proceso de cálculo es sencillo, simplemente dividiremos el peso en kilogramos por el cuadrado de la altura. Ahora, según el IMC calculado, ejecutará la declaración if-else respectiva. También estamos verificando si el usuario presiona el botón Enviar sin ingresar las entradas, en ese caso, estamos imprimiendo la altura o el peso.
Al usar HTML, estamos dando la estructura deseada, la opción para la entrada y el botón de envío. Con la ayuda de CSS, estamos embelleciendo nuestra estructura dándole los colores y la fuente deseada, etc.
En la sección de JavaScript, estamos procesando la entrada tomada y después de calcular, se imprime la salida respectiva.
Ejemplo:
HTML:
index.html
<!DOCTYPE html> <html> <head> <!-- Include JS files --> <script src="app.js"></script> </head> <body> <div class="container"> <h1>BMI Calculator</h1> <!-- Option for providing height and weight to the user--> <p>Height (in cm)</p> <input type="text" id="height"> <p>Weight (in kg)</p> <input type="text" id="weight"> <button id="btn">Calculate</button> <div id="result"></div> </div> </body> </html>
JavaScript:
app.js
window.onload = () => {
let button = document.querySelector("#btn");
// Function for calculating BMI
button.addEventListener("click", calculateBMI);
};
function calculateBMI() {
/* Getting input from user into height variable.
Input is string so typecasting is necessary. */
let height = parseInt(document
.querySelector("#height").value);
/* Getting input from user into weight variable.
Input is string so typecasting is necessary.*/
let weight = parseInt(document
.querySelector("#weight").value);
let result = document.querySelector("#result");
// Checking the user providing a proper
// value or not
if (height === "" || isNaN(height))
result.innerHTML = "Provide a valid Height!";
else if (weight === "" || isNaN(weight))
result.innerHTML = "Provide a valid Weight!";
// If both input is valid, calculate the bmi
else {
// Fixing upto 2 decimal places
let bmi = (weight / ((height * height)
/ 10000)).toFixed(2);
// Dividing as per the bmi conditions
if (bmi < 18.6) result.innerHTML =
`Under Weight : <span>${bmi}</span>`;
else if (bmi >= 18.6 && bmi < 24.9)
result.innerHTML =
`Normal : <span>${bmi}</span>`;
else result.innerHTML =
`Over Weight : <span>${bmi}</span>`;
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por imsushant12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA