Comment créer une calculatrice en ligne simple avec JavaScript

Les calculateurs en ligne font partie des éléments interactifs les plus simples et les plus utilisés sur le web. Qu’il s’agisse d’un calculateur financier, d’une formule physique ou même d’un indicateur de santé de base, la logique reste toujours la même : saisie + formule + résultat.

Dans ce tutoriel, nous allons montrer comment créer une calculatrice web fonctionnelle avec seulement quelques lignes de JavaScript. Comme exemple, nous utiliserons l’Indice de Masse Corporelle (IMC). La formule est courte, facile à comprendre et illustre parfaitement comment une équation mathématique peut être mise en œuvre directement dans le navigateur.

La formule de l’IMC

L’IMC est défini comme suit :

IMC = poids (kg) / taille (m)²

Exemple : une personne de 70 kg et mesurant 1,75 m :

IMC = 70 / 1.75² ≈ 22,86

Structure HTML de base

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

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

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

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

Logique 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 = "Veuillez entrer des valeurs valides !";
    return;
  }
  const bmi = weight / (height * height);
  document.getElementById("result").innerText = "Votre IMC est : " + bmi.toFixed(2);
}
</script>

Vous pouvez essayer la version complète, responsive et adaptée aux mobiles du calculateur IMC ici : Calculateur IMC →

Conseils pour les développeurs

• Validation : assurez-vous que l’utilisateur ne saisit pas de valeurs nulles ou négatives.
• UI/UX : l’utilisation de type="number" fait apparaître un clavier numérique sur mobile.
• Responsive design : avec CSS Grid ou Flexbox, la mise en page reste claire sur tous les appareils.
• Extensions : vous pouvez ajouter des catégories d’IMC (maigreur, normal, surpoids, obésité) en fonction du résultat calculé.

👉 Avec ce court tutoriel, vos lecteurs disposent à la fois d’une calculatrice fonctionnelle et d’un exemple concret montrant à quel point il est simple de transformer une formule en un outil web interactif.