BMI Health Calculator

<div class="bmi-card">
  <h2><i class="fas fa-heartbeat"></i> BMI Calculator</h2>

  <div class="unit-tabs">
    <button class="tab-btn active" id="btn-metric">Metric (cm, kg)</button>
    <button class="tab-btn" id="btn-imperial">Imperial (ft, lbs)</button>
  </div>

  <div class="form-grid">
    <div class="field">
      <label id="lbl-height">Height (cm)</label>
      <input type="number" id="inp-height" value="175" placeholder="cm">
    </div>
    <div class="field">
      <label id="lbl-weight">Weight (kg)</label>
      <input type="number" id="inp-weight" value="70" placeholder="kg">
    </div>
  </div>

  <button id="calc-bmi-btn" class="btn-calc-bmi">Calculate BMI</button>

  <div class="bmi-result-card" id="bmi-result">
    <span class="bmi-score" id="bmi-val">22.9</span>
    <span class="bmi-status" id="bmi-cat">Normal Weight</span>
    <p class="bmi-advice" id="bmi-advice">You have a healthy body weight. Keep it up!</p>
  </div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
  background: #0f172a;
  color: #f8fafc;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bmi-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 24px;
  padding: 28px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.bmi-card h2 { font-size: 1.3rem; color: #10b981; margin-bottom: 18px; }
.unit-tabs { display: flex; background: #0f172a; padding: 4px; border-radius: 10px; margin-bottom: 20px; }
.tab-btn { flex: 1; background: transparent; border: none; color: #94a3b8; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.tab-btn.active { background: #334155; color: #f8fafc; }
.form-grid { display: flex; gap: 12px; margin-bottom: 20px; }
.field { flex: 1; text-align: left; }
.field label { display: block; font-size: 0.8rem; color: #94a3b8; margin-bottom: 6px; }
.field input { width: 100%; padding: 10px 12px; background: #0f172a; border: 1px solid #334155; border-radius: 10px; color: #f8fafc; font-size: 1rem; outline: none; }
.btn-calc-bmi { width: 100%; background: #10b981; color: #ffffff; border: none; padding: 12px; border-radius: 10px; font-weight: 700; cursor: pointer; margin-bottom: 20px; }
.bmi-result-card { background: #0f172a; border: 1px solid #334155; border-radius: 16px; padding: 20px; }
.bmi-score { font-size: 2.5rem; font-weight: 800; color: #10b981; display: block; }
.bmi-status { font-size: 1rem; font-weight: 700; color: #f8fafc; display: block; margin: 4px 0 8px; }
.bmi-advice { font-size: 0.85rem; color: #94a3b8; line-height: 1.4; }

let isMetric = true;

const btnMetric = document.getElementById('btn-metric');
const btnImperial = document.getElementById('btn-imperial');
const lblHeight = document.getElementById('lbl-height');
const lblWeight = document.getElementById('lbl-weight');
const inHeight = document.getElementById('inp-height');
const inWeight = document.getElementById('inp-weight');
const calcBtn = document.getElementById('calc-bmi-btn');
const bmiVal = document.getElementById('bmi-val');
const bmiCat = document.getElementById('bmi-cat');
const bmiAdvice = document.getElementById('bmi-advice');

function calculateBMI() {
  const h = parseFloat(inHeight.value);
  const w = parseFloat(inWeight.value);

  if (!h || !w || h <= 0 || w <= 0) return;

  let bmi = 0;
  if (isMetric) {
    bmi = w / ((h / 100) * (h / 100));
  } else {
    bmi = (w / (h * h)) * 703;
  }

  bmi = Math.round(bmi * 10) / 10;
  bmiVal.textContent = bmi;

  if (bmi < 18.5) {
    bmiCat.textContent = 'Underweight';
    bmiCat.style.color = '#38bdf8';
    bmiAdvice.textContent = 'Consider nutrient-dense foods to achieve a healthy weight.';
  } else if (bmi <= 24.9) {
    bmiCat.textContent = 'Normal Weight';
    bmiCat.style.color = '#10b981';
    bmiAdvice.textContent = 'You have a healthy body weight. Keep up the active lifestyle!';
  } else if (bmi <= 29.9) {
    bmiCat.textContent = 'Overweight';
    bmiCat.style.color = '#f59e0b';
    bmiAdvice.textContent = 'Regular exercise and balanced meals can help optimize fitness.';
  } else {
    bmiCat.textContent = 'Obese';
    bmiCat.style.color = '#ef4444';
    bmiAdvice.textContent = 'Consult a healthcare professional for a personalized fitness plan.';
  }
}

btnMetric.addEventListener('click', () => {
  isMetric = true;
  btnMetric.classList.add('active');
  btnImperial.classList.remove('active');
  lblHeight.textContent = 'Height (cm)';
  lblWeight.textContent = 'Weight (kg)';
  inHeight.value = '175';
  inWeight.value = '70';
  calculateBMI();
});

btnImperial.addEventListener('click', () => {
  isMetric = false;
  btnImperial.classList.add('active');
  btnMetric.classList.remove('active');
  lblHeight.textContent = 'Height (inches)';
  lblWeight.textContent = 'Weight (lbs)';
  inHeight.value = '68';
  inWeight.value = '150';
  calculateBMI();
});

calcBtn.addEventListener('click', calculateBMI);
calculateBMI();