🔥 Creando una Calculadora de TMB Web

La Tasa Metabólica Basal (TMB) es una medida crucial para entender las necesidades calóricas diarias de una persona. En este artículo, aprenderemos cómo crear una calculadora de TMB web precisa y fácil de usar.

¿Qué es la TMB?

La TMB es la cantidad de calorías que tu cuerpo quema en reposo para mantener las funciones vitales básicas. Se calcula utilizando factores como el género, la edad, el peso y la altura.

Fórmula de Mifflin-St Jeor:

Hombres: TMB = (10 × peso) + (6.25 × altura) - (5 × edad) + 5
Mujeres: TMB = (10 × peso) + (6.25 × altura) - (5 × edad) - 161

Planificación de la Calculadora

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

**Entrada de Datos:**
- Género (masculino/femenino)
- Edad (años)
- Peso (kilogramos)
- Altura (centímetros)
- Nivel de actividad física
**Características de la Interfaz:**
- Diseño responsivo
- Interfaz intuitiva
- Resultados detallados
- Información sobre necesidades calóricas

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 TMB</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Calculadora de TMB</h1>
        <div class="calculator-section">
            <div class="input-group">
                <label>Género</label>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="gender" value="male" checked>
                        Masculino
                    </label>
                    <label>
                        <input type="radio" name="gender" value="female">
                        Femenino
                    </label>
                </div>
            </div>
            <div class="input-group">
                <label for="age">Edad (años)</label>
                <input type="number" id="age" min="1" max="120">
            </div>
            <div class="input-group">
                <label for="weight">Peso (kg)</label>
                <input type="number" id="weight" step="0.1">
            </div>
            <div class="input-group">
                <label for="height">Altura (cm)</label>
                <input type="number" id="height">
            </div>
            <div class="input-group">
                <label for="activity">Nivel de Actividad</label>
                <select id="activity">
                    <option value="1.2">Sedentario (poco o ningún ejercicio)</option>
                    <option value="1.375">Ligeramente activo (ejercicio ligero 1-3 días/semana)</option>
                    <option value="1.55">Moderadamente activo (ejercicio moderado 3-5 días/semana)</option>
                    <option value="1.725">Muy activo (ejercicio intenso 6-7 días/semana)</option>
                    <option value="1.9">Extremadamente activo (ejercicio muy intenso, trabajo físico)</option>
                </select>
            </div>
            <button id="calculateBtn">Calcular TMB</button>
            <div id="result" class="result"></div>
            <div id="tdee" class="tdee"></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;
}

.radio-group {
    display: flex;
    gap: 20px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: normal;
}

/* 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, .tdee {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.tdee {
    background-color: #e3f2fd;
    color: #1976d2;
}

Lógica JavaScript

Implementemos la lógica de cálculo de la TMB:

// Función para calcular la TMB
function calculateBMR(gender, age, weight, height) {
    if (gender === 'male') {
        return (10 * weight) + (6.25 * height) - (5 * age) + 5;
    } else {
        return (10 * weight) + (6.25 * height) - (5 * age) - 161;
    }
}

// Función para calcular el TDEE (Gasto Energético Total Diario)
function calculateTDEE(bmr, activityLevel) {
    return bmr * activityLevel;
}

// Función para mostrar los resultados
function displayResults(bmr, tdee) {
    const resultDiv = document.getElementById('result');
    const tdeeDiv = document.getElementById('tdee');
    
    resultDiv.textContent = `Tu TMB es: ${Math.round(bmr)} calorías/día`;
    tdeeDiv.textContent = `Tu TDEE es: ${Math.round(tdee)} calorías/día`;
}

// Event listener para el botón de cálculo
document.getElementById('calculateBtn').addEventListener('click', function() {
    const gender = document.querySelector('input[name="gender"]:checked').value;
    const age = parseFloat(document.getElementById('age').value);
    const weight = parseFloat(document.getElementById('weight').value);
    const height = parseFloat(document.getElementById('height').value);
    const activityLevel = parseFloat(document.getElementById('activity').value);
    
    if (isNaN(age) || isNaN(weight) || isNaN(height)) {
        alert('Por favor, ingresa valores válidos para todos los campos.');
        return;
    }
    
    const bmr = calculateBMR(gender, age, weight, height);
    const tdee = calculateTDEE(bmr, activityLevel);
    displayResults(bmr, tdee);
});

Mejoras y Características Adicionales

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

**Recomendaciones de Calorías:** Sugerir rangos de calorías para diferentes objetivos (pérdida de peso, mantenimiento, ganancia muscular).
**Historial de Cálculos:** Guardar cálculos anteriores para seguimiento.
**Gráficos de Progreso:** Visualizar cambios en la TMB a lo largo del tiempo.
**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 y proporcionar retroalimentación clara.
**Retroalimentación Visual:** Mostrar claramente los resultados y su significado.
**Accesibilidad:** Asegurar que la calculadora sea accesible para todos los usuarios.
**Diseño Responsivo:** Funcionar bien en todos los dispositivos.
**Carga Rápida:** Optimizar el rendimiento para una experiencia fluida.

Conclusión

Hemos creado una calculadora de TMB 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 fórmulas de cálculo (Harris-Benedict, Katch-McArdle)
Implementar un sistema de seguimiento de progreso
Integrar con APIs de salud y fitness
Añadir calculadoras relacionadas (macronutrientes, calorías de ejercicio, etc.)

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