BMI calculator (Copy)

<div class="bmi-calculator">

<h2>BMI Calculator</h2>

<label for="weight">Weight (kg)</label>

<input type="number" id="weight" placeholder="e.g. 70">

<label for="height">Height (cm)</label>

<input type="number" id="height" placeholder="e.g. 175">

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

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

</div>

<style>

.bmi-calculator {

max-width: 400px;

margin: 30px auto;

padding: 25px;

border-radius: 12px;

background: #f5f5f5;

font-family: Arial, sans-serif;

}

.bmi-calculator h2 {

text-align: center;

}

.bmi-calculator label {

display: block;

margin-top: 15px;

margin-bottom: 5px;

}

.bmi-calculator input {

width: 100%;

padding: 12px;

box-sizing: border-box;

border: 1px solid #ccc;

border-radius: 6px;

}

.bmi-calculator button {

width: 100%;

margin-top: 20px;

padding: 12px;

border: 0;

border-radius: 6px;

background: #007bff;

color: white;

cursor: pointer;

font-size: 16px;

}

#result {

margin-top: 20px;

text-align: center;

font-size: 18px;

font-weight: bold;

}

</style>

<script>

function calculateBMI() {

const weight = parseFloat(document.getElementById("weight").value);

const height = parseFloat(document.getElementById("height").value);

if (!weight || !height || weight <= 0 || height <= 0) {

document.getElementById("result").innerHTML =

"Please enter a valid weight and height.";

return;

}

const heightInMetres = height / 100;

const bmi = weight / (heightInMetres * heightInMetres);

let category;

if (bmi < 18.5) {

category = "Underweight";

} else if (bmi < 25) {

category = "Healthy weight";

} else if (bmi < 30) {

category = "Overweight";

} else {

category = "Obesity";

}

document.getElementById("result").innerHTML =

`Your BMI is <strong>${bmi.toFixed(1)}</strong><br>${category}`;

}

</script>