Create BMI Calculator Using HTML, CSS And JavaScript

Hello Coder, Welcome to the TheCodingHubs Blog. In This Blog, We Learn How To Build A BMI Calculator Using HTML, CSS, And JavaScript. A BMI calculator is used to calculate BMI values based on height and weight. BMI is a valuable indicator of whether your weight falls within a healthy range for your height.

Contents

Key Features:Source Code HTML (index.html) CSS (Style.css) Javascript (script.js) Output:

As we are going to create BMI Calculator using HTML, CSS, and JavaScript we need to create three files first HTML, second CSS, and last Javascript.

Key Features:

Important characteristics: User Input: Users can input their height in centimeters and kilograms (metric units) or feet, inches, and pounds (inch and pound) in imperial terms when using the calculator.

Calculating BMI: The program uses the following formula to determine BMI: BMI = weight (kg) / (height (m))^2. The user is then presented with the outcome.

BMI Categories: Depending on the results, the BMI is classified as underweight, normal weight, overweight, or obese. Users are given a sense of their current body composition through these categories.

Responsive Design: The web application is made using responsive design, which allows it to adjust to various screen sizes and devices to provide the best possible user experience on desktop, tablet, and mobile devices.

Source Code

HTML (index.html)



<html lang="en">
<head>
  <meta charset="UTF-8"></meta>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
  <title>BMI Calculator</title>
  </head>
<body>
  <div class="calculator">
    <h2>BMI Calculator</h2>
    <label for="weight">Weight (kg):</label>
    <input id="weight" required="" type="number" />

    <label for="height">Height (cm):</label>
    <input id="height" required="" type="number" />

    <button onclick="calculateBMI()">Calculate BMI</button>

    <div id="result"></div>
  </div>
</body>
</html>

CSS (Style.css)


    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }

    .calculator {
      text-align: center;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

    label {
      display: block;
      margin-top: 10px;
    }

    input {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
      box-sizing: border-box;
    }

    button {
      margin-top: 10px;
      padding: 10px;
      background-color: #3498db;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    button:hover {
      background-color: #2980b9;
    }

    #result {
      margin-top: 20px;
      font-weight: bold;
    }

Javascript (script.js)



    function calculateBMI() {
      const weight = parseFloat(document.getElementById('weight').value);
      const height = parseFloat(document.getElementById('height').value) / 100; // Convert height to meters

      if (weight > 0 && height > 0) {
        const bmi = weight / (height * height);
        displayResult(bmi);
      } else {
        alert('Please enter valid values for weight and height.');
      }
    }

    function displayResult(bmi) {
      const resultDiv = document.getElementById('result');
      let category = '';

      if (bmi < 18.5) {
        category = 'Underweight';
      } else if (bmi < 25) {
        category = 'Normal';
      } else if (bmi < 30) {
        category = 'Overweight';
      } else {
        category = 'Obese';
      }

      resultDiv.innerHTML = `Your BMI is ${bmi.toFixed(2)}. You are in the ${category} category.`;
    }

Output:

BMI Calculator Using HTML , CSS & JavaScript

Create BMI Calculator Using HTML, CSS and JavaScript