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.
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:
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 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.
Antes de comenzar, asegúrate de tener los siguientes elementos instalados:
Inicia creando la estructura de tu proyecto. Puedes crear una carpeta llamada calculadora-bmi y dentro de ella, crear los siguientes archivos:
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>
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; }
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.'; } });
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.
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!
Page loaded in 42.50 ms