Preplp
HTML CSS JS Projects
Project 2HTML · CSS · JS~40 min

BMI Calculator

Forms, validation, and calculated output

Track progress0/3 days
x

What you'll learn

<form>preventDefaultparseInt/parseFloatinnerHTMLCSS forms
  • Build a styled form with selects and number inputs
  • Read values on submit without reloading the page
  • Convert height from feet/inches to meters
  • Display BMI and a weight category

Lesson & examples

Read the code, then the explanation — try changing values before the project.

Handle form submit
document.getElementById("bmiForm").addEventListener("submit", function (e) {
  e.preventDefault();
  // read inputs and calculate...
});
Height in meters
const heightInMeters = ((feet * 12) + inches) * 0.0254;
const bmi = weight / (heightInMeters * heightInMeters);
Show result in the page
document.getElementById("result").innerHTML =
  "Your BMI: " + bmi.toFixed(2) + "<br>Category: " + category;

Today's project: BMI Calculator

Collect gender, age, height (feet + inches), and weight (kg). Calculate BMI and show underweight, normal, overweight, or obese.

Open index.html in your browser and submit the form to see your BMI.

Steps

  1. 1

    Build the form

    Add labels and inputs for gender, age, height (feet & inches), and weight. Use a submit button.

  2. 2

    Style the card

    Center a .container card with padding, border, and focus styles on inputs.

  3. 3

    Listen for submit

    Call e.preventDefault(), parse all field values, and verify they exist.

  4. 4

    Calculate BMI

    Convert height to meters, compute BMI = weight / height², and pick a category with if/else.

  5. 5

    Render result

    Write the BMI (2 decimals) and category into #result using innerHTML.

Full project source — copy into a folder or use the zip above

Open index.html in your browser and submit the form to see your BMI.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BMI Calculator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h2>BMI Calculator</h2>
    <form id="bmiForm">
      <label for="gender">Gender:</label>
      <select id="gender" required>
        <option value="male">Male</option>
        <option value="female">Female</option>
      </select>

      <label for="age">Age:</label>
      <input type="number" id="age" placeholder="Enter Age" required>

      <label for="height-feet">Height:</label>
      <input type="number" id="height-feet" placeholder="Feet" required>
      <input type="number" id="height-inches" placeholder="Inches" required>

      <label for="weight">Weight (kg):</label>
      <input type="number" id="weight" placeholder="Weight in kg" required>

      <input type="submit" value="Calculate BMI">
    </form>
    <div id="result"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>
style.css
body {
  background-color: #3498db;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 400px;
  margin: 80px auto;
  padding: 20px;
  background-color: #f2f2f2;
  border: 2px solid #1e5f8a;
  border-radius: 5px;
  box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.2);
}

h2 {
  text-align: center;
  text-decoration: underline;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="number"],
select {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

input[type="submit"] {
  padding: 10px;
  margin-top: 10px;
  background-color: #3498db;
  border: none;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #2187b5;
}

#result {
  font-weight: bold;
  margin-top: 20px;
  color: #1e5f8a;
}
script.js
document.getElementById("bmiForm").addEventListener("submit", function (e) {
  e.preventDefault();

  const age = parseInt(document.getElementById("age").value);
  const heightFeet = parseInt(document.getElementById("height-feet").value);
  const heightInches = parseInt(document.getElementById("height-inches").value);
  const weight = parseFloat(document.getElementById("weight").value);

  if (age && heightFeet >= 0 && heightInches >= 0 && weight) {
    const heightInMeters = ((heightFeet * 12) + heightInches) * 0.0254;
    const bmi = weight / (heightInMeters * heightInMeters);

    let category = "";
    if (bmi < 18.5) category = "Underweight";
    else if (bmi < 25) category = "Normal weight";
    else if (bmi < 30) category = "Overweight";
    else category = "Obese";

    document.getElementById("result").innerHTML =
      "Your BMI: " + bmi.toFixed(2) + "<br>Category: " + category;
  }
});

Code explained

  1. 1.e.preventDefault()

    Stops the browser from reloading the page on submit — required for JavaScript-driven forms.

  2. 2.Height conversion

    Feet × 12 + inches gives total inches; × 0.0254 converts to meters for the BMI formula (kg / m²).

    Snippet
    const heightInMeters = ((heightFeet * 12) + heightInches) * 0.0254;

  3. 3.innerHTML for results

    innerHTML allows <br> tags. For user-generated content later, prefer textContent to avoid XSS.

One rehearsal platform

Certification mocks, daily lessons, project labs, and in-browser drills

Structured for exam day and portfolio proof — timed tests, guided builds, and quick reps on one platform.