📊 Creando una Calculadora de IMC Web

El Índice de Masa Corporal (IMC) es una medida importante para evaluar la salud general de una persona. En este artículo, aprenderemos cómo crear una calculadora de IMC web precisa y fácil de usar.

¿Qué es el IMC?

El IMC es una medida que utiliza la altura y el peso para calcular si una persona tiene un peso saludable. Se calcula dividiendo el peso en kilogramos por el cuadrado de la altura en metros.

Fórmula: IMC = peso (kg) / (altura (m))²

Planificación de la Calculadora

Antes de comenzar a codificar, definamos las características principales de nuestra calculadora:

**Entrada de Datos:**
- Altura (en metros o pies/pulgadas)
- Peso (en kilogramos o libras)
- Unidades de medida (métrico/imperial)
**Características de la Interfaz:**
- Diseño responsivo
- Interfaz intuitiva
- Resultados claros y visuales
- Información sobre categorías de IMC

Estructura HTML

Comencemos con la estructura básica de nuestra calculadora:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora de IMC</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Calculadora de IMC</h1>
        <div class="calculator-section">
            <div class="input-group">
                <label for="height">Altura</label>
                <input type="number" id="height" step="0.01">
                <select id="heightUnit">
                    <option value="m">metros</option>
                    <option value="ft">pies</option>
                </select>
            </div>
            <div class="input-group">
                <label for="weight">Peso</label>
                <input type="number" id="weight" step="0.1">
                <select id="weightUnit">
                    <option value="kg">kilogramos</option>
                    <option value="lb">libras</option>
                </select>
            </div>
            <button id="calculateBtn">Calcular IMC</button>
            <div id="result" class="result"></div>
            <div id="category" class="category"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Estilos CSS

Añadamos estilos para hacer que nuestra calculadora se vea profesional:

/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Estilos de entrada */
.input-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input, select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 5px;
}

/* Estilos de botón */
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

button:hover {
    background-color: #45a049;
}

/* Estilos de resultado */
.result {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.category {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
}

/* Colores de categoría */
.underweight {
    background-color: #ffeb3b;
    color: #000;
}

.normal {
    background-color: #4CAF50;
    color: white;
}

.overweight {
    background-color: #ff9800;
    color: white;
}

.obese {
    background-color: #f44336;
    color: white;
}

Lógica JavaScript

Implementemos la lógica de cálculo del IMC:

// Función para convertir unidades
function convertToMetric(height, weight, heightUnit, weightUnit) {
    let heightInMeters = height;
    let weightInKg = weight;
    
    if (heightUnit === 'ft') {
        heightInMeters = height * 0.3048; // convertir pies a metros
    }
    
    if (weightUnit === 'lb') {
        weightInKg = weight * 0.453592; // convertir libras a kilogramos
    }
    
    return { heightInMeters, weightInKg };
}

// Función para calcular el IMC
function calculateBMI(height, weight, heightUnit, weightUnit) {
    const { heightInMeters, weightInKg } = convertToMetric(height, weight, heightUnit, weightUnit);
    return weightInKg / (heightInMeters * heightInMeters);
}

// Función para determinar la categoría del IMC
function getBMICategory(bmi) {
    if (bmi < 18.5) return { category: 'Bajo peso', class: 'underweight' };
    if (bmi < 25) return { category: 'Peso normal', class: 'normal' };
    if (bmi < 30) return { category: 'Sobrepeso', class: 'overweight' };
    return { category: 'Obesidad', class: 'obese' };
}

// Función para mostrar el resultado
function displayResult(bmi, category) {
    const resultDiv = document.getElementById('result');
    const categoryDiv = document.getElementById('category');
    
    resultDiv.textContent = `Tu IMC es: ${bmi.toFixed(1)}`;
    categoryDiv.textContent = category.category;
    categoryDiv.className = `category ${category.class}`;
}

// Event listener para el botón de cálculo
document.getElementById('calculateBtn').addEventListener('click', function() {
    const height = parseFloat(document.getElementById('height').value);
    const weight = parseFloat(document.getElementById('weight').value);
    const heightUnit = document.getElementById('heightUnit').value;
    const weightUnit = document.getElementById('weightUnit').value;
    
    if (isNaN(height) || isNaN(weight)) {
        alert('Por favor, ingresa valores válidos para la altura y el peso.');
        return;
    }
    
    const bmi = calculateBMI(height, weight, heightUnit, weightUnit);
    const category = getBMICategory(bmi);
    displayResult(bmi, category);
});

Mejoras y Características Adicionales

Para hacer nuestra calculadora más útil, podemos añadir varias mejoras:

**Gráfico de IMC:** Visualizar el IMC en un gráfico de rango.
**Historial de Cálculos:** Guardar cálculos anteriores.
**Recomendaciones Personalizadas:** Proporcionar consejos basados en el IMC.
**Modo Oscuro:** Añadir una opción de tema oscuro.
**Exportación de Resultados:** Permitir guardar o compartir resultados.

Consideraciones de UX

Para crear una experiencia de usuario óptima, debemos considerar:

**Validación de Entrada:** Prevenir valores inválidos.
**Retroalimentación Visual:** Mostrar claramente los resultados.
**Accesibilidad:** Asegurar que la calculadora sea accesible para todos.
**Diseño Responsivo:** Funcionar bien en todos los dispositivos.
**Carga Rápida:** Optimizar el rendimiento.

Conclusión

Hemos creado una calculadora de IMC web funcional y fácil de usar. Esta implementación básica puede ser extendida con más características según las necesidades. Algunas ideas para futuras mejoras incluyen:

Añadir más información sobre salud y bienestar
Implementar un sistema de seguimiento de progreso
Integrar con APIs de salud y fitness
Añadir calculadoras relacionadas (grasa corporal, calorías, etc.)

¡Espero que este tutorial te haya sido útil! Si tienes alguna pregunta o sugerencia, no dudes en dejarla en los comentarios.