Select topic 2 project

eb08a15c · Supharoek Sudadet · 79f933d1 · eb08a15c
Commit eb08a15c authored Feb 27, 2018 by Supharoek Sudadet
Hide whitespace changes
Inline Side-by-side

Showing with 139 additions and 0 deletions

index.html Project/index.html +139 -0

No files found.
--- a/Project/index.html
+++ b/Project/index.html
+<!DOCTYPE html>
+<html>
+<title>Home Page</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<head>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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>