How to create a simple BMI calculator using JavaScript

by

Have you ever wondered how your weight relates to your height in terms of overall health? Body Mass Index (BMI) is a simple tool that helps answer that question. In this tutorial, we’ll walk through the process of creating a basic BMI calculator using JavaScript. Whether you’re new to coding or looking to expand your skills, this step-by-step guide will equip you with the knowledge to build your very own BMI calculator from scratch. Let’s dive in and explore the fascinating world of web development while gaining insights into our health along the way!

HTML Page

Think of HTML as the skeleton of a webpage. It defines the structure and layout. Here’s the basic HTML code for our BMI calculator:

In this HTML structure:

  • We have input fields for the user to enter their height and weight.
  • A button labeled “Calculate BMI” is provided to trigger the BMI calculation.
  • The calculated BMI result will be displayed below the button.
<html>
<head>
<title>BMI Calculator</title>
</head>
<body>
  <h2>BMI Calculator</h2>
  <label for="height">Enter your height (in centimeters):</label>
  <input type="number" id="heightInput">
  <br>
  <label for="weight">Enter your weight (in kilograms):</label>
  <input type="number" id="weightInput">
  <br>
  <button onclick="calculateBMI()">Calculate BMI</button>
  <br>
  <p id="result"></p>
<script>  </script>
</body>
</html>

JavaScript Code

function calculateBMI() {
  // Retrieve the user's height and weight from the input fields
  const heightInCentimeters = parseFloat(document.getElementById('heightInput').value);
  const weightInKilograms = parseFloat(document.getElementById('weightInput').value);
  
  // Check if both height and weight are valid numbers and greater than zero
  if (!isNaN(heightInCentimeters) && !isNaN(weightInKilograms) && heightInCentimeters > 0 && weightInKilograms > 0) {
    // Calculate BMI using the formula: weight (kg) / (height (m) ^ 2)
    const heightInMeters = heightInCentimeters / 100;
    const bmi = weightInKilograms / (heightInMeters * heightInMeters);
    
    // Display the calculated BMI result
    document.getElementById('result').innerText = `Your BMI is: ${bmi.toFixed(2)}`;
  } else {
    // Display an error message if inputs are invalid
    document.getElementById('result').innerText = "Please enter valid height and weight values.";
  }
}

JavaScript Logic

JavaScript gives life to our calculator, doing the behind-the-scenes calculations. Let’s break down the JavaScript code

  • We define a function named calculateBMI which will be triggered when the user clicks the “Calculate BMI” button.
  • Inside the function:
    • We retrieve the user’s height and weight from the input fields using getElementById.
    • We validate the inputs to ensure they are valid numbers and greater than zero.
    • If the inputs are valid, we calculate the BMI using the formula weight (kg) / (height (m) ^ 2).
    • The calculated BMI is displayed on the page with two decimal places using toFixed(2).
    • If the inputs are invalid, we display an error message prompting the user to enter valid values.

Leave a Comment