BMI Calculator Using HTML , CSS & JavaScript

BMI Calculator Using HTML , CSS & JavaScript

HTML CODE

<!DOCTYPE html>
<html>
<head>
  <title>BMI Calculator</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>BMI Calculator</h1>
  <div class="container">
    <label for="weight">Weight (kg):</label>
    <input type="number" id="weight" step="0.01" min="0" required>
    <label for="height">Height (cm):</label>
    <input type="number" id="height" step="0.01" min="0" required>
    <button onclick="calculateBMI()">Calculate</button>
    <div id="result"></div>
  </div>
 
  <script src="script.js"></script>
</body>
</html>

CSS CODE

.container {
  width: 300px;
  margin: 0 auto;
}
 
label {
  display: block;
  margin-bottom: 10px;
}
 
input {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}
 
button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
 
#result {
  margin-top: 20px;
  font-weight: bold;
}

Javascript Code

function calculateBMI() {
  var weight = parseFloat(document.getElementById("weight").value);
  var height = parseFloat(document.getElementById("height").value);
 
  if (isNaN(weight) || isNaN(height) || weight <= 0 || height <= 0) {
    document.getElementById("result").innerHTML = "Please enter valid values for weight and height.";
    return;
  }
 
  var bmi = weight / ((height/100) * (height/100));
  bmi = bmi.toFixed(2);
 
  var category = "";
  if (bmi < 18.5) {
    category = "Underweight";
  } else if (bmi >= 18.5 && bmi < 25) {
    category = "Normal weight";
  } else if (bmi >= 25 && bmi < 30) {
    category = "Overweight";
  } else {
    category = "Obese";
  }
 
  document.getElementById("result").innerHTML = "BMI: " + bmi + "<br>Category: " + category;
}

Tech Doubility

BMI Calculator Using HTML , CSS & JavaScript

Post a Comment

Tech Doubility