Cómo crear una calculadora de BMI (Índice de Masa Corporal) con JavaScript y Tailwind css

En la actualidad, el Índice de Masa Corporal (BMI, por sus siglas en inglés) es una herramienta valiosa para evaluar el estado de salud de una persona en relación con su peso y altura. En este artículo, aprenderás cómo crear una calculadora de BMI utilizando JavaScript y Tailwind CSS. Este proyecto no solo te ayudará a comprender mejor estos dos lenguajes, sino que también te permitirá construir una interfaz de usuario atractiva y receptiva.

¿Qué es el Índice de Masa Corporal (BMI)?

El Índice de Masa Corporal es una medida que se utiliza para evaluar la cantidad de tejido corporal en una persona. Se calcula utilizando la siguiente fórmula:

[ \text{BMI} = \frac{\text{Peso (kg)}}{(\text{Altura (m)})^2} ]

Los resultados del BMI se clasifican en diferentes categorías que incluyen:

Bajo peso: BMI menor a 18.5
Peso normal: BMI de 18.5 a 24.9
Sobrepeso: BMI de 25 a 29.9
Obesidad: BMI de 30 o más

¿Por qué usar JavaScript y Tailwind CSS?

JavaScript

JavaScript es un lenguaje de programación ampliamente utilizado para crear interactividad en páginas web. En este proyecto, usaremos JavaScript para realizar los cálculos del BMI y mostrar los resultados en la interfaz de usuario.

Tailwind CSS

Tailwind CSS es un marco de diseño CSS que permite crear interfaces de usuario elegantes y responsivas de manera rápida y fácil. Utilizaremos Tailwind CSS para estilizar nuestra calculadora de BMI, haciéndola estéticamente agradable y fácil de usar.

Requisitos previos

Antes de comenzar, asegúrate de tener los siguientes elementos instalados:

Un editor de texto (como Visual Studio Code o Sublime Text).
Un navegador web (como Google Chrome o Firefox).
Conocimientos básicos de HTML, CSS y JavaScript.

Estructura del proyecto

Inicia creando la estructura de tu proyecto. Puedes crear una carpeta llamada calculadora-bmi y dentro de ella, crear los siguientes archivos:

index.html
style.css
script.js

Paso 1: HTML básico

Comencemos creando la estructura HTML en index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora de BMI</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto mt-10">
        <h1 class="text-3xl text-center font-bold">Calculadora de BMI</h1>
        <div class="bg-white shadow-md rounded-lg p-6 mt-6">
            <form id="bmi-form" class="space-y-4">
                <div>
                    <label for="weight" class="block text-sm font-medium text-gray-700">Peso (kg)</label>
                    <input type="number" id="weight" class="mt-1 block w-full border-gray-300 rounded-md" required>
                </div>
                <div>
                    <label for="height" class="block text-sm font-medium text-gray-700">Altura (m)</label>
                    <input type="number" id="height" class="mt-1 block w-full border-gray-300 rounded-md" required>
                </div>
                <button type="submit" class="w-full py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Calcular BMI</button>
            </form>
            <div id="result" class="mt-4 text-lg font-semibold"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Explicación del código HTML

Usamos Tailwind CSS para dar estilo a la interfaz.
Creamos un formulario que solicita el peso y la altura del usuario.
Se incluye un botón para calcular el BMI y un área para mostrar el resultado.

Paso 2: Agregar estilos con Tailwind CSS

La mayor parte del estilo se logra a través de las clases de utilidad de Tailwind CSS que hemos agregado en el HTML anterior. Si deseas agregar más estilos personalizados, puedes incluirlos en style.css.

/* style.css */
body {
    font-family: Arial, sans-serif;
}

input {
    padding: 0.5rem;
    border: 1px solid #ccc;
}

Paso 3: Crear la lógica de JavaScript

Ahora, vamos a agregar la lógica para calcular el BMI en script.js:

// script.js
document.getElementById('bmi-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const weight = parseFloat(document.getElementById('weight').value);
    const height = parseFloat(document.getElementById('height').value);

    if (weight > 0 && height > 0) {
        const bmi = weight / (height * height);
        let category = '';

        if (bmi < 18.5) {
            category = 'Bajo peso';
        } else if (bmi >= 18.5 && bmi < 24.9) {
            category = 'Peso normal';
        } else if (bmi >= 25 && bmi < 29.9) {
            category = 'Sobrepeso';
        } else {
            category = 'Obesidad';
        }

        document.getElementById('result').innerText = `Tu BMI es: ${bmi.toFixed(2)} (${category})`;
    } else {
        document.getElementById('result').innerText = 'Por favor, introduce valores válidos.';
    }
});

Explicación del código JavaScript

Escuchamos el evento submit del formulario.
Obtenemos el peso y la altura ingresados por el usuario.
Calculamos el BMI y determinamos la categoría correspondiente.
Mostramos el resultado en la interfaz.

Paso 4: Probar la calculadora

Abre index.html en tu navegador y prueba la calculadora ingresando diferentes valores de peso y altura. Asegúrate de que los resultados se calculen correctamente y se muestren en el formato adecuado.

Conclusión

Has creado con éxito una calculadora de BMI usando JavaScript y Tailwind CSS. Este proyecto no solo es funcional, sino que también presenta una buena oportunidad para mejorar tus habilidades de programación web y diseño.

Si te ha gustado este artículo, ¡no dudes en compartirlo y dejar tus comentarios!