Hướng dẫn tự làm tool tính BMI bằng HTML và JavaScript

Trong bài viết này, mình sẽ hướng dẫn bạn cách tự xây dựng một tool tính BMI bằng HTML và JavaScript thuần, không phụ thuộc framework, không cần plugin và có thể dùng cho bất kỳ website nào.

Chỉ số BMI là gì?

BMI (Body Mass Index) được tính theo công thức:

BMI = cân nặng (kg) / (chiều cao (m) × chiều cao (m))

Kết quả BMI thường được phân loại như sau:

• Dưới 18.5: Gầy
• Từ 18.5 đến dưới 25: Bình thường
• Từ 25 đến dưới 30: Thừa cân
• Từ 30 trở lên: Béo phì

Vì sao nên tự làm tool tính BMI?

• Không cần cài plugin, tránh nặng website
• Không phụ thuộc framework hay thư viện bên ngoài
• Dễ hiểu, dễ chỉnh sửa theo nhu cầu
• Phù hợp cho blog, website nội dung, landing page SEO

Cấu trúc cơ bản của tool BMI

Tool tính BMI tối thiểu chỉ cần ba thành phần:

• Một form HTML để nhập chiều cao và cân nặng
• Một đoạn JavaScript để xử lý công thức
• Một khu vực hiển thị kết quả

Bước 1: Tạo form HTML cơ bản

Đây là cấu trúc form HTML đơn giản, không sử dụng bất kỳ framework nào:

<form id="bmi-form">
    <label>
        Chiều cao (cm):
        <input type="number" id="height" step="0.1" required>
    </label>

    <br><br>

    <label>
        Cân nặng (kg):
        <input type="number" id="weight" step="0.1" required>
    </label>

    <br><br>

    <button type="submit">Tính BMI</button>
</form>

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

Form này hoạt động được trên mọi trình duyệt hiện đại và có thể dễ dàng style lại bằng CSS nếu cần.

Bước 2: Viết JavaScript tính BMI

Tiếp theo, chúng ta thêm JavaScript để xử lý dữ liệu người dùng nhập vào:

document.getElementById('bmi-form').addEventListener('submit', function (e) {
    e.preventDefault();

    var height = parseFloat(document.getElementById('height').value) / 100;
    var weight = parseFloat(document.getElementById('weight').value);

    if (!height || !weight) return;

    var bmi = weight / (height * height);
    bmi = bmi.toFixed(1);

    var status = '';
    if (bmi < 18.5) {
        status = 'Gầy';
    } else if (bmi < 25) {
        status = 'Bình thường';
    } else if (bmi < 30) {
        status = 'Thừa cân';
    } else {
        status = 'Béo phì';
    }

    document.getElementById('bmi-result').innerHTML =
        'Chỉ số BMI của bạn là ' + bmi + ' (' + status + ')';
});

Toàn bộ phép tính được xử lý trực tiếp trên trình duyệt, không gửi dữ liệu lên server.

DEMO: Tool tính BMI

Sau khi ghép phần HTML và JavaScript ở trên lại với nhau, bạn đã có một tool tính BMI hoàn chỉnh. Bạn có thể nhúng đoạn code này vào bài viết, trang riêng hoặc theme WordPress mà không cần plugin.

Cách mở rộng thêm

Từ phiên bản cơ bản này, bạn có thể mở rộng:

• Thêm phân loại BMI theo chuẩn châu Á
• Đổi màu kết quả theo từng mức
• Thêm mô tả chi tiết cho từng nhóm BMI
• Kết hợp CSS để cải thiện giao diện

Kết luận

Tool tính BMI là một ví dụ điển hình cho thấy nhiều chức năng tưởng chừng phức tạp thực chất có thể tự làm rất dễ dàng.
Việc tự xây dựng không chỉ giúp website nhẹ hơn mà còn giúp bạn hiểu rõ hơn cách mọi thứ vận hành,
thay vì phụ thuộc hoàn toàn vào plugin trả phí.