<!DOCTYPE html>
<html>
<head>
<title>คำนวณน้ำหนักที่เหมาะสม</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
</head>
<style>
form{
font-size: 24px;
}
font{
color:darkcyan;
font-size: 26px;
font-weight:500;
}
button{
background: teal;
color:white;
}
</style>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar3SupportedContent" aria-controls="navbar3SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="home.php">
<h5>หน้าแรก</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="BMI.html">
<h5>คำนวณหาดัชนีมวลกาย</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="Weight.html">
<h5>คำนวณน้ำหนักที่เหมาะสม</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Cal.html">
<h5>คำนวนอัตราการเผาผลาญพลังงาน</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="search.php">
<h5>ตารางแคลอรี่</h5>
</a>
</li>
<a class="ml-3 btn navbar-btn btn-warning text-dark" href="About.html">
<h5>Team</h5>
</a>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-7 align-self-center text-lg-left text-center">
<h1 class="mb-0 mt-4 display-4">
<div class="primary shadowed">Ideal weight calculator<br>คำนวณน้ำหนักที่เหมาะสมของคุณ </div>
</h1><br>
<h2>ค่าน้ำหนักที่เหมาะสมคืออะไร?</h2>
<h4><p>การคำนวณคำนวณค่าน้ำหนักที่เหมาะสม คือการแสดงผลช่วงน้ำหนัก 2 ตัวเลข ที่เป็นค่าน้ำหนักเหมาะสม เพื่อดูน้ำหนักที่ควรจะเป็นให้เหมาะกับส่วนสูงของแต่ละคนอย่างคร่าวๆ ค่าน้ำหนักที่สมส่วน และ สุขภาพดี จึงควรอยู่ระหว่าง ตัวเลขสองช่วงดังกล่าว</p>
<li> หากคุณหนักน้อยกว่าช่วงน้ำหนักที่แนะนำ แปลว่าคุณน้ำหนักน้อยเกินเกณฑ์ ควรเพิ่มน้ำหนัก</li>
<li> หากคุณหนักมากกว่าช่วงน้ำหนักที่แนะนำ แปลว่าคุณน้ำหนักมากเกินเกณฑ์ ควรลดน้ำหนัก</li>
</h4>
</div>
<div class="col-lg-5 p-3">
<form class="p-4" method="post">
เพศ :
<label>
<input id="female" type="radio" name="gender" onclick="calsWeight()"/> หญิง
</label>
<label>
<input id="male" type="radio" name="gender" onclick="calsWeight()"/> ชาย
</label>
<div class="form-group">
<label for="Inputhight">ความสูง ( cm./เซนติเมตร )</label>
<input type="text" id="height" placeholder="" oninput="calsWeight()"> </div>
<font>
ค่าน้ำหนักที่เหมาะสมคือ <span id="totalCals"></span> กิโลกรัม
</font>
</br>
<button type = "reset" class="btn" onclick="clearr()"><h5>ตั้งค่าใหม่</h5></button>
</form>
<div class="embed-responsive embed-responsive-4by3 rounded">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/yoQlfPnW9M0" allowfullscreen=""> </iframe>
</div>
</div>
</div>
</div>
<script>
function find(id) {
return document.getElementById(id)
}
function calsWeight() {
var height = find("height").value
var result = "";
if (find("male").checked)
result = (height-100)*0.9
else if (find("female").checked)
result = (height-100)*0.8
find("totalCals").innerHTML = Math.round(result)+" - "+Math.round(result+10)
}
function clearr(){
find("totalCals").innerHTML = ''
}
</script>
</body>
</html>