Cómo crear una calculadora en línea sencilla con JavaScript

Las calculadoras en línea son uno de los elementos interactivos más simples y, al mismo tiempo, más utilizados en la web. Ya se trate de una calculadora financiera, una fórmula física o incluso un indicador básico de salud, la lógica siempre es la misma: entrada + fórmula + resultado.

En este tutorial mostraremos cómo crear una calculadora web funcional con solo unas pocas líneas de JavaScript. Como ejemplo, utilizaremos el Índice de Masa Corporal (IMC). La fórmula es corta, fácil de comprender y demuestra perfectamente cómo una ecuación matemática puede implementarse directamente en el navegador.

La fórmula del IMC

El IMC se define como:

IMC = peso (kg) / altura (m)²

Ejemplo: una persona de 70 kg y 1,75 m de altura:

IMC = 70 / 1.75² ≈ 22,86

Estructura básica en HTML

<div>
  <label>Peso (kg):</label>
  <input type="number" id="weight" placeholder="ej. 70">

  <label>Altura (cm):</label>
  <input type="number" id="height" placeholder="ej. 175">

  <button onclick="calculateBMI()">Calcular</button>

  <p id="result"></p>
</div>

Lógica en JavaScript

<script>
function calculateBMI() {
  const weight = parseFloat(document.getElementById("weight").value);
  const height = parseFloat(document.getElementById("height").value) / 100; // cm → m
  if (!weight || !height) {
    document.getElementById("result").innerText = "¡Por favor, introduce valores válidos!";
    return;
  }
  const bmi = weight / (height * height);
  document.getElementById("result").innerText = "Tu IMC es: " + bmi.toFixed(2);
}
</script>

Puedes probar la versión completa, adaptable y optimizada para móviles de la calculadora IMC aquí: Calculadora IMC →

Consejos para desarrolladores

• Validación: asegúrate de que los usuarios no introduzcan valores nulos o negativos.
• UI/UX: al usar type="number", en móviles aparece un teclado numérico.
• Diseño responsive: con CSS Grid o Flexbox, la interfaz se mantiene clara en todos los dispositivos.
• Extensiones: puedes añadir categorías de IMC (bajo peso, normal, sobrepeso, obesidad) en función del resultado calculado.

👉 Con este breve tutorial, tus lectores obtendrán tanto una calculadora funcional como un ejemplo claro de lo sencillo que es convertir una fórmula en una herramienta web interactiva.