<div class="container">
  <h1>BMI Calculator</h1>
  <form id="bmi-form">
    <input type="number" id="height" placeholder="Height (cm)" required>
    <input type="number" id="weight" placeholder="Weight (kg)" required>
    <button type="submit">Calculate BMI</button>
  </form>
  <div id="result"></div>
  <div id="history"></div>
</div>

function calculateBMI(weight, height) {
  const heightInMeters = height / 100;
  const bmi = weight / (heightInMeters * heightInMeters);
  return bmi.toFixed(1);
}

function getCategory(bmi) {
  if (bmi < 18.5) return { category: 'Underweight', color: '#3b82f6' };
  if (bmi < 25) return { category: 'Normal', color: '#10b981' };
  if (bmi < 30) return { category: 'Overweight', color: '#f59e0b' };
  return { category: 'Obese', color: '#ef4444' };
}

form.addEventListener('submit', (e) => {
  e.preventDefault();

  const height = parseFloat(document.getElementById('height').value);
  const weight = parseFloat(document.getElementById('weight').value);

  if (!height || !weight || height <= 0 || weight <= 0) {
    alert('Please enter valid values');
    return;
  }

  const bmi = calculateBMI(weight, height);
  displayResult(bmi);
  saveToHistory(bmi, weight, height);
});

function saveToHistory(bmi, weight, height) {
  const history = JSON.parse(localStorage.getItem('bmiHistory')) || [];
  history.unshift({
    bmi,
    weight,
    height,
    date: new Date().toLocaleDateString()
  });
  localStorage.setItem('bmiHistory', JSON.stringify(history));
  displayHistory();
}