BMI Calculator

📏 BMI Calculator

🎂 Tuổi (2 - 120): 👤 Gender: Nam Nữ ⚖️ Weight (kg): 📐 Height (m):

<style>
  body {
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    padding: 20px;
  }
  h2 {
    text-align: center;
    color: #333;
  }
  label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
  }
  input, select, button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .bmi-card {
    background: #fff;
    padding: 20px;
    margin-top: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  .bmi-result {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .bmi-status {
    text-align: center;
    font-size: 18px;
    padding: 10px;
    border-radius: 5px;
    margin: 10px 0;
    font-weight: bold;
  }
  .underweight { background: #ffe0e0; color: #c00; }
  .normal { background: #e0ffe0; color: #0a0; }
  .overweight { background: #fff5cc; color: #d68c00; }
  .obese { background: #fdd; color: #a00; }
  table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    background: #fff;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
  }
  th {
    background: #eee;
  }
  .recommendation {
    background: #f9f9f9;
    margin-top: 20px;
    padding: 15px;
    border-left: 5px solid #2196F3;
    border-radius: 5px;
  }
</style>

<h2>📏 BMI Calculator</h2>

<label for="age">🎂 Tuổi (2 - 120):</label>
<input type="number" id="age" min="2" max="120" placeholder="Nhập tuổi">

<label for="gender">👤 Giới tính:</label>
<select id="gender">
  <option value="male">Nam</option>
  <option value="female">Nữ</option>
</select>

<label for="weight">⚖️ Cân nặng (kg):</label>
<input type="number" id="weight" min="40" max="150" placeholder="40 - 150 kg">

<label for="height">📐 Chiều cao (m):</label>
<input type="number" id="height" min="1.3" max="2.3" step="0.01" placeholder="1.3 - 2.3 m">

<button onclick="calculateBMI()">📊 Tính BMI</button>

<div class="bmi-card" id="result"></div>

<script>
function calculateBMI() {
  const age = parseInt(document.getElementById("age").value);
  const gender = document.getElementById("gender").value;
  const weight = parseFloat(document.getElementById("weight").value);
  const height = parseFloat(document.getElementById("height").value);
  const result = document.getElementById("result");

  if (!age || age < 2 || age > 120) {
    result.innerHTML = "<strong>❗ Tuổi phải nằm trong khoảng 2 - 120.</strong>";
    return;
  }
  if (!weight || weight < 40 || weight > 150) {
    result.innerHTML = "<strong>❗ Cân nặng phải nằm trong khoảng 40 - 150 kg.</strong>";
    return;
  }
  if (!height || height < 1.3 || height > 2.3) {
    result.innerHTML = "<strong>❗ Chiều cao phải nằm trong khoảng 1.3 - 2.3 mét.</strong>";
    return;
  }

  const bmi = (weight / (height * height)).toFixed(1);
  let status = "";
  let colorClass = "";
  let advice = "";

  if (bmi < 18.5) {
    status = "Underweight";
    colorClass = "underweight";
    advice = "Increased risk of nutrient deficiencies and osteoporosis.";
  } else if (bmi < 25) {
    status = "Normal";
    colorClass = "normal";
    advice = "Keep maintaining a balanced diet and regular exercise.";
  } else if (bmi < 30) {
    status = "Overweight";
    colorClass = "overweight";
    advice = "Increased risk of heart disease and diabetes.";
  } else {
    status = "Obese";
    colorClass = "obese";
    advice = "High risk of multiple health conditions.";
  }

  result.innerHTML = `
    <h3 style="text-align:center;">Your BMI Result</h3>
    <div class="bmi-result">${bmi}</div>
    <div class="bmi-status ${colorClass}">${status}</div>
    <div style="text-align:center; margin: 15px 0;">
      <strong>${status.toUpperCase()}</strong><br>
      Your BMI is within a ${status.toLowerCase()} range. ${advice}<br><br>
      <small>${weight}kg / (${height}m)² = ${bmi}</small>
    </div>

    <table>
      <tr><th>BMI Range</th><th>Category</th><th>Health Risk</th></tr>
      <tr><td>Below 18.5</td><td>Underweight</td><td>Increased risk of nutrient deficiencies and osteoporosis</td></tr>
      <tr style="background:#f0f0f0"><td>18.5 - 24.9</td><td>Normal Weight</td><td>Lowest risk of health problems</td></tr>
      <tr><td>25.0 - 29.9</td><td>Overweight</td><td>Increased risk of heart disease and diabetes</td></tr>
      <tr><td>30.0 and above</td><td>Obese</td><td>High risk of multiple health conditions</td></tr>
    </table>

    <div class="recommendation">
      <strong>Recommendations</strong><br>
      - Maintain a balanced diet rich in fruits, vegetables, and whole grains.<br>
      - Stay hydrated by drinking plenty of water throughout the day.<br>
      - Get regular physical activity – aim for at least 150 minutes per week.<br>
      - Get adequate sleep (7–9 hours per night).
    </div>
  `;
}
</script>

Info!
To receive the code, please leave your email address in the comment section below and I will send the template to you via email as soon as possible.

People don't have to become experts to share. In the process of sharing, they become experts.

Anonymous