BMI Calculator

BMI Calculator /* Basic reset */ * { box-sizing: border-box; font-family: "Segoe UI", Roboto, Arial, sans-serif; } body { margin: 0; padding: 20px; background: #f4f7fa; color: #222; }

/* Card wrapper */ .bmi-card { max-width: 760px; margin: 10px auto; background: linear-gradient(180deg, #0f1724, #153042); color: #edf6f9; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 30px rgba(10,20,30,0.25); display: flex; gap: 0; align-items: stretch; }

/* Left info column */ .bmi-info { flex: 1; padding: 26px; background: rgba(255,255,255,0.03); min-width: 260px; } .bmi-info h2 { margin: 0 0 8px; font-size:20px; color:#aee1f5; } .bmi-info p { margin: 0; line-height:1.5; opacity:0.95; font-size:14px; }

/* Right controls column */ .bmi-controls { flex: 1.2; padding: 26px; background: transparent; display: flex; flex-direction: column; gap: 16px; }

/* Gender toggle */ .gender-row { display:flex; gap:12px; align-items:center; } .gender-btn { cursor:pointer; padding:10px 14px; border-radius:8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.03); display:flex; align-items:center; gap:8px; color:#dff9ff; } .gender-btn.active { background: linear-gradient(90deg,#12b0d8,#3dd7ff); color:#04212a; font-weight:600; }

/* Input rows */ .row { display:flex; align-items:center; gap:12px; } .label { width:90px; font-size:14px; opacity:0.9; min-width:80px; } .input, input[type="range"] { flex:1; } input[type="number"] { width:110px; padding:8px 10px; border-radius:6px; border: none; outline:none; background:#0b2230; color:#e6f9ff; } input[type="range"] { width:100%; -webkit-appearance:none; height:8px; background:rgba(255,255,255,0.08); border-radius:6px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#12b0d8; box-shadow:0 0 6px rgba(18,176,216,0.6); }

/* Button */ .calc-btn { margin-top:6px; padding:12px 16px; border-radius:8px; background: linear-gradient(90deg,#12b0d8,#29d6aa); color:#04212a; border:none; cursor:pointer; font-weight:700; width:140px; }

/* Result area */ .result { margin-top:8px; padding:14px; border-radius:8px; background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); } .bmi-value { font-size:28px; font-weight:800; margin:0; } .bmi-category { margin:6px 0 0; font-size:14px; opacity:0.95; }

/* Responsive */ @media (max-width:720px){ .bmi-card { flex-direction: column; padding:0; } .bmi-info, .bmi-controls { padding:18px; } }

<img alt="BMI Calculator 2025" border="0" data-original-height="720" data-original-width="1280" height="360" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi542Y0osxgu4HDAn2FBjptibNvR-WVRnhGofeJkwqYZZ6NG_Sh-Pb5L395mUdBtlhe4Jw97Qe80_by9JWDbVBK-vMcTRrgoWJXMEd3rYApxpWNwJGNRN-eAXob24N7vzTuro-nP3ri8fDdlifAU87BoP3rxq1zXA6uV6E1zCJ9pvzcwBa38PGCe8r3RsEu/w640-h360-rw/BMI%20Calculator%202025.png" title="BMI Calculator 2025" width="640" /> Ideal Weight (BMI) BMI (Body Mass Index) is a simple index of weight-for-height commonly used to classify underweight, normal weight, overweight and obesity in adults. Enter your details on the right and press Calculate .

👨 Male 👩 Female

Age

Height (cm)

Weight (kg)

Calculate

BMI: —

Category: —

Tip: Use the sliders or number boxes to adjust values.

// Elements const genderMale = document.getElementById('genderMale'); const genderFemale = document.getElementById('genderFemale'); const ageInput = document.getElementById('ageInput');

const heightRange = document.getElementById('heightRange'); const heightInput = document.getElementById('heightInput');

const weightRange = document.getElementById('weightRange'); const weightInput = document.getElementById('weightInput');

const calcBtn = document.getElementById('calcBtn'); const bmiValueEl = document.getElementById('bmiValue'); const bmiCategoryEl = document.getElementById('bmiCategory'); const adviceText = document.getElementById('adviceText');

// Gender toggle handlers function setGender(activeBtn, inactiveBtn) { activeBtn.classList.add('active'); activeBtn.setAttribute('aria-pressed', 'true'); inactiveBtn.classList.remove('active'); inactiveBtn.setAttribute('aria-pressed', 'false'); } genderMale.addEventListener('click', () => setGender(genderMale, genderFemale)); genderFemale.addEventListener('click', () => setGender(genderFemale, genderMale)); genderMale.addEventListener('keydown', e => { if(e.key === 'Enter' || e.key === ' ') setGender(genderMale, genderFemale); }); genderFemale.addEventListener('keydown', e => { if(e.key === 'Enter' || e.key === ' ') setGender(genderFemale, genderMale); });

// Sync sliders and numeric inputs function syncRangeAndNumber(rangeEl, numberEl) { rangeEl.addEventListener('input', () => { numberEl.value = rangeEl.value; }); numberEl.addEventListener('input', () => { let val = Number(numberEl.value); if (isNaN(val)) val = Number(rangeEl.min); val = Math.max(Number(rangeEl.min), Math.min(Number(rangeEl.max), val)); numberEl.value = val; rangeEl.value = val; }); } syncRangeAndNumber(heightRange, heightInput); syncRangeAndNumber(weightRange, weightInput);

// BMI calculation + result function calculateBMI() { const heightCm = Number(heightInput.value); const weightKg = Number(weightInput.value); const age = Number(ageInput.value);

if (!heightCm || !weightKg || heightCm <= 0) { bmiValueEl.textContent = 'BMI: —'; bmiCategoryEl.textContent = 'Category: —'; adviceText.textContent = 'Please enter valid height and weight.'; return; }

const heightM = heightCm / 100; const bmi = weightKg / (heightM * heightM); const bmiRounded = Math.round(bmi * 10) / 10;

// Category detection (adult only) let category = ''; let advice = ''; if (bmi < 18.5) { category = 'Underweight'; advice = 'Consider a balanced diet and checking with a healthcare provider.'; } else if (bmi < 25) { category = 'Normal weight'; advice = 'Great — maintain a healthy lifestyle to keep it up.'; } else if (bmi < 30) { category = 'Overweight'; advice = 'A mix of balanced diet and regular activity can help.'; } else { category = 'Obesity'; advice = 'Consider consulting a healthcare professional for personalized advice.'; }

bmiValueEl.textContent = 'BMI: ' + bmiRounded; bmiCategoryEl.textContent = 'Category: ' + category; adviceText.textContent = advice; }

// Button and Enter key calcBtn.addEventListener('click', calculateBMI); [ageInput, heightInput, weightInput].forEach(el => el.addEventListener('keydown', e => { if (e.key === 'Enter') calculateBMI(); }));

// Initialize (sync visuals) heightRange.dispatchEvent(new Event('input')); weightRange.dispatchEvent(new Event('input')); calculateBMI();

BMI Calculator: To calculate your Body Mass Index (BMI), divide your weight in kilograms by the square of your height in meters (weight in kg / height in meters x height in meters).