Tiap nganter Babeh kontrol ke rumah sakit, saya selalu menyempatkan diri untuk ikut nimbang badan.. Maklum gak punya timbangan, adanya timbangan buat kopi hehe.. Padahal beberapa kali terlintas dipikiran mau beli, tapi ya gitu sering nya lupa..
Jadi keinget tentang IMT (Indeks Massa Tubuh) atau BMI (Body Mass Index).. Tetiba muncul keinginan untuk bikin kalkulator nya.. Saya menggunakan jQuery library untuk memudahkan..
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
Untuk formula nya, saya mengambil dari sini.. Mungkin untuk orang Asia agak berbeda klasifikasi nya sih, tp gak apa-apa deh, toh BMI ini hanya utk referensi awal saja, bukan sebagai penentu diagnosis..
Formula nya adalah berat dibagi kuadrat dari tinggi badan.. udah gitu doang.. nanti hasil nya dikategorikan dalam rentang tertentu..
function hitung(){
$('#hasil').hide();
var hasil = 'Kamu <strong>Obesitas</strong> tingkat 3',
className = 'bg-danger-2 text-white',
tinggi = $('#tinggi').val() / 100,
berat = $('#berat').val(),
bmi = (berat / Math.pow( tinggi, 2 )).toFixed(1);
if(bmi < 18.5){
hasil = 'Berat badan kamu <strong>Kurang</strong>';
className = 'bg-orange text-white';
}
if(bmi >= 18.5 && bmi < 25){
hasil = 'Berat badan kamu <strong>Normal</strong>';
className = 'bg-success text-white';
}
if(bmi >= 25 && bmi < 30){
hasil = 'Berat badan kamu <strong>Berlebih</strong>';
className = 'bg-warning text-dark';
}
if(bmi >= 30 && bmi < 35){
hasil = 'Kamu <strong>Obesitas</strong> tingkat 1';
className = 'bg-warning-2 text-white';
}
if(bmi >= 35 && bmi < 40){
hasil = 'Kamu <strong>Obesitas</strong> tingkat 2';
className = 'bg-danger text-white';
}
$('#hasil').html(
'<div class="'+className+'"><p>Nilai BMI/IMT kamu: <strong>'+bmi+'</strong></p><hr>'
+ '<h3>'+hasil+'</h3></div>'
).fadeIn();
}Saya sengaja menggunakan form tanpa tombol submit.. Jadi agar nanti ketika ada perubahan nilai input, maka akan langsung menghitung.. Saya gunakan event listener change dan keyup.. namun saat menggunakan keduanya, bisa terjadi double firing, sehingga perlu dicek apakah perubahan nya berasal dari mouse atau dari keyboard..
var tinggi = $('#tinggi').val(),
berat = $('#berat').val();
$('#tinggi, #berat').keyup(function(){
tinggi = $('#tinggi').val();
berat = $('#berat').val();
validate();
});
$('#tinggi, #berat').change(function(){
// Untuk menghindari dobel proses karena pengaruh keyup, maka perlu diset kondisi
var change = true,
tinggiSaatIni = $('#tinggi').val(),
beratSaatIni = $('#berat').val();
if(
($(this).attr('id') == 'tinggi' && tinggiSaatIni == tinggi)
|| ($(this).attr('id') == 'berat' && beratSaatIni == berat)
) {
change = false;
}
if(change){
validate()
}
});Saya menggunakan validasi untuk nilai minimum dari tinggi & berat badan..
function validate(){
$('#tinggi').val() > 50 && $('#berat').val() > 30 ? hitung() : $('#hasil').html('');
}Untuk script lengkap nya bisa dilihat di github.com/reggarantai/kalkulator-bmi..
Semoga ada manfaat nya ya..
Wassalaamu’alaikum..
