Kategoriler
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Vücut kitle indeksi nasıl hesaplanır </title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
#vki{
transition: 1s all;
}
</style>
</head>
<body>
<div class="container">
<form>
</br>
<div class="form-group">
<label for="boy">Boyunuzu Giriniz(cm)</label>
<input type="text" class="form-control" id="boy" placeholder="173">
</div>
<div class="form-group">
<label for="kilo">Kilonuzu Giriniz(kg)</label>
<input type="text" class="form-control" id="kilo" placeholder="73">
</div>
</form>
<div class="alert alert-primary" role="alert" id="vki">
Endeks Hesaplama
</div>
</div>
<script>
const boy =document.querySelector("#boy")
const kilo =document.querySelector("#kilo")
const vki =document.querySelector("#vki")
boy.addEventListener('input',vkiHesapla);
kilo.addEventListener('input',vkiHesapla);
function vkiHesapla()
{
b=boy.value/100
k=kilo.value
endeks = k/(b*b)
endeks=endeks.toFixed(2)
vki.setAttribute("class","")
if(endeks <18)
{
vki.innerHTML="ZAYIF vki: " + endeks
vki.setAttribute("class","alert alert-secondary")
}
else if(endeks >= 18 && endeks <25)
{
vki.innerHTML="NORMAL vki: "+endeks
vki.setAttribute("class","alert alert-success")
}
else if(endeks >= 25 && endeks <30)
{
vki.innerHTML="KİLOLU vki: "+endeks
vki.setAttribute("class","alert alert-warning")
}
else if(endeks >= 30 && endeks <35)
{
vki.innerHTML="OBEZ vki: "+endeks
vki.setAttribute("class","alert alert-danger")
}
else
{
vki.innerHTML="CİDDİ OBEZ vki: "+endeks
vki.setAttribute("class","alert alert-danger")
}
}
</script>
</body>
</html>