<!DOCTYPE html>
<html>
<title>Home Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
<script src="./js/jquery.min.js"></script>
</head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
.fa-male,.fa-female {font-size:200px}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-red w3-card w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
</div>
</div>
<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:128px 16px">
<h1 class="w3-margin w3-jumbo">My Little Project</h1>
<p class="w3-xlarge">Supharoek Sudadet</p>
</header>
<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-twothird">
<h1>เครื่องคำนวณหาค่าดัชนีมวลกาย (BMI)</h1>
<h5 class="w3-padding-32">ค่า BMI คือค่าดัชนีที่ใช้ชี้วัดความสมดุลของน้ำหนักตัว(กิโลกรัม) และส่วนสูง(เซนติเมตร)
<strong>Body Mass Index (BMI)</strong> มีสูตรการคำนวณ = น้ำหนักตัว[Kg] / (ส่วนสูง[m] ยกกำลังสอง) สูตรคำนวณเหมาะสำหรับใช้ประเมินผู้ที่มีอายุตั้งแต่ 20 ปีขึ้นไป
ประโยชน์ของการวัดค่า BMI เพื่อดูอัตราเสี่ยงต่อการเกิดโรคต่างๆ ตรวจสอบภาวะไขมันและความอ้วน
ดังนั้นการทำให้ร่างกายอยู่ในเกณฑ์ปกติ จึงมีความสำคัญอย่างยิ่งกับผู้ที่ต้องการรักษาสุขภาพในระยะยาว
</h5>
<p class="w3-center"><font size="4"> <strong>น้ำหนัก(kg.): <input type="number" id="weight"></strong>
<strong>ส่วนสูง(cm.): <input type="number" id="height"></strong></font> </p>
<div class="w3-center">
<button id="calculate" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">
<font size="5">คำนวณค่า BMI</font>
</button>
</div>
<div class="w3-margin-top w3-center">
<font size="5">
<strong>
<div id="result">
ผลลัพธ์ = N/A
</div>
</strong>
</font>
</div>
<div class="w3-margin-top w3-center">
<font size="5">
<strong>
<div id="index">
เกณฑ์ของคุณอยู่ในระดับ: N/A
</div>
</strong>
</font>
</div>
</div>
<div class="w3-third w3-center">
<i class="fa fa-male w3-padding-64 w3-text-red"></i>
<i class="fa fa-female w3-padding-64 w3-text-red"></i>
</div>
</div>
</div>
<div class="w3-container w3-black w3-center w3-opacity w3-padding-64">
<h1 class="w3-margin w3-xlarge">อยากเห็นทุกคนสุขภาพดี</h1>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-opacity">
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</footer>
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
<!-- calculate function -->
<script>
$("#calculate").click(function(){
var weight = $("#weight").val();
var height = $("#height").val();
var sum = weight/(Math.pow(height/100 , 2));
var bmi = sum.toFixed(2);
var result = document.getElementById("result");
var index = document.getElementById("index");
if (bmi != "NaN"){
result.innerHTML = ("ผลลัพธ์ = " + bmi);
if(bmi >= 30.0){
index.innerHTML = "เกณฑ์ของคุณอยู่ในระดับ: อ้วนมาก";
}else if(bmi >= 25.0 && bmi < 30.0){
index.innerHTML = "เกณฑ์ของคุณอยู่ในระดับ: อ้วน";
}else if(bmi >=23.0 && bmi < 25.0){
index.innerHTML = "เกณฑ์ของคุณอยู่ในระดับ: น้ำหนักเกิน";
}else if(bmi >= 18.6 && bmi < 23.0){
index.innerHTML = "เกณฑ์ของคุณอยู่ในระดับ: ปกติ";
}else{
index.innerHTML = "เกณฑ์ของคุณอยู่ในระดับ: ผอมเกินไป";
}
}else{
result.innerHTML = "กรุณาใส่ตัวเลข";
}
});
</script>
<!-- end of block -->
</html>