JavaScript BMI Calculator Tutorial

In this blog, we'll walk through the process of creating a simple BMI (Body Mass Index) calculator using HTML, CSS, and JavaScript. This project is perfect for beginners looking to enhance their JavaScript skills and understand how to manipulate the DOM.

HTML Structure

Our HTML provides the structure for the BMI calculator. It includes a form for user input and a section to display the results.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="../styles.css" />
  <title>BMI Calculator</title>
</head>
<body>
  <div class="container">
    <h1>BMI Calculator</h1>
    <form>
      <p><label>Height in CM: </label><input type="text" id="height" /></p>
      <p><label>Weight in KG: </label><input type="text" id="weight" /></p>
      <button>Calculate</button>
      <div id="results"></div>
      <div id="weight-guide">
        <h3>BMI Weight Guide</h3>
        <p>Under Weight = Less than 18.6</p>
        <p>Normal Range = 18.6 and 24.9</p>
        <p>Overweight = Greater than 24.9</p>
      </div>
    </form>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Styling

The CSS file styles the form, making it visually appealing and user-friendly.

.container {
  width: 575px;
  height: 825px;
  background-color: #797978;
  padding-left: 30px;
}

#height,
#weight {
  width: 150px;
  height: 25px;
  margin-top: 30px;
}

#weight-guide {
  margin-left: 75px;
  margin-top: 25px;
}

#results {
  font-size: 35px;
  margin-left: 90px;
  margin-top: 20px;
  color: rgb(241, 241, 241);
}

button {
  width: 150px;
  height: 35px;
  margin-left: 90px;
  margin-top: 25px;
  background-color: #fff;
  padding: 1px 30px;
  border-radius: 8px;
  color: #212121;
  text-decoration: none;
  border: 2px solid #212121;
  font-size: 25px;
}

h1 {
  padding-left: 15px;
  padding-top: 25px;
}

Let's have a look at our BMI calculator with HTML and CSS only

JavaScript Functionality

Here's the JavaScript that powers our BMI calculator. It captures user input, validates it, calculates BMI, and displays the result.

const form = document.querySelector('form');
form.addEventListener('submit', function (e) {
  e.preventDefault();
  const height = parseInt(document.querySelector('#height').value);
  const weight = parseInt(document.querySelector('#weight').value);
  const results = document.querySelector('#results');

  if (height === '' || height <= 0 || isNaN(height)) {
    results.innerHTML = `Please enter a valid height: (height you entered ${height})`;
  } else if (weight === '' || weight <= 0 || isNaN(weight)) {
    results.innerHTML = `Please enter a valid weight: (weight you entered ${weight})`;
  } else {
    const bmi = (weight / ((height * height) / 10000)).toFixed(2);
    if (bmi < 18.6) {
      results.innerHTML = `Underweight: BMI is ${bmi}`;
    } else if (bmi >= 18.6 && bmi <= 24.9) {
      results.innerHTML = `Normal range: BMI is ${bmi}`;
    } else {
      results.innerHTML = `Overweight: BMI is ${bmi}`;
    }
  }
});

Javascript Explained

Form Submission Handling: We attach an event listener to the form to handle the submit event. This prevents the default form submission behavior and allows us to process the input data with JavaScript.

const form = document.querySelector('form');
form.addEventListener('submit', function (e) {
  e.preventDefault();

Retrieving and Validating Input: We retrieve the height and weight values entered by the user and convert them to integers. We then validate these inputs to ensure they are positive numbers.

const height = parseInt(document.querySelector('#height').value);
const weight = parseInt(document.querySelector('#weight').value);
const results = document.querySelector('#results');

if (height === '' || height <= 0 || isNaN(height)) {
  results.innerHTML = `Please enter a valid height: (height you entered ${height})`;
} else if (weight === '' || weight <= 0 || isNaN(weight)) {
  results.innerHTML = `Please enter a valid weight: (weight you entered ${weight})`;
}

Calculating BMI: If the inputs are valid, we calculate the BMI using the formula:

BMI = Weight / (Height x Height)/10000

The result is rounded to two decimal places.

else {
  const bmi = (weight / ((height * height) / 10000)).toFixed(2);

Displaying Results: Based on the BMI value, we categorize the user's weight status and display it.

if (bmi < 18.6) {
  results.innerHTML = `Underweight: BMI is ${bmi}`;
} else if (bmi >= 18.6 && bmi <= 24.9) {
  results.innerHTML = `Normal range: BMI is ${bmi}`;
} else {
  results.innerHTML = `Overweight: BMI is ${bmi}`;
}

Our BMI calculator is working and completed

Conclusion

In this project, we created a simple BMI calculator that validates user input and provides feedback based on the calculated BMI. This project is a great way to practice DOM manipulation and event handling in JavaScript. Feel free to enhance the styling or add more features to make it more robust! Happy coding!

Building a BMI Calculator with JavaScript

Table of contents

HTML Structure

CSS Styling

JavaScript Functionality

Conclusion