แจก code ระบบบันทึกข้อมูลสุขภาพ BMI
วิธีใช้
1. เลือก เพศ
2. ใส่ข้อมูล น้ำหนัก และส่วนสูง
3. กดบันทึกข้อมูล
4. จะได้ผลดังภาพ
1.ไปที่ google drive สร้าง Folder ชื่อ +BMI
2.สร้าง sheet ชื่อ +BMI
3.ไปที่ ส่วนขpาย เลือก app script
ที่ code.gs ให้นำ ส่วนนี้ไปวาง
function doGet() {
return HtmlService.createTemplateFromFile('Index')
.evaluate()
.setTitle('ระบบบันทึกข้อมูลสุขภาพ')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function appendRow(gender, weight, height) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const date = new Date().toLocaleString("th-TH", {timeZone: "Asia/Bangkok"});
const bmi = calculateBMI(weight, height);
const result = assessBMI(bmi);
sheet.appendRow([date, gender, weight, height, bmi.toFixed(2), result.assessment]);
return {
bmi: bmi.toFixed(2),
assessment: result.assessment,
advice: result.advice
};
}
function calculateBMI(weight, height) {
return weight / Math.pow(height / 100, 2);
}
function assessBMI(bmi) {
if (bmi < 18.5) return {
assessment: "น้ำหนักน้อย / ผอม",
advice: "ควรทานอาหารให้เพียงพอและออกกำลังกายเพื่อเพิ่มมวลกล้ามเนื้อ"
};
if (bmi < 23) return {
assessment: "ปกติ",
advice: "รักษาสุขภาพและน้ำหนักให้คงที่ด้วยการทานอาหารที่มีประโยชน์และออกกำลังกายสม่ำเสมอ"
};
if (bmi < 25) return {
assessment: "ท้วม / โรคอ้วนระดับ 1",
advice: "ควรระวังเรื่องอาหารและเพิ่มการออกกำลังกายเพื่อควบคุมน้ำหนัก"
};
if (bmi < 30) return {
assessment: "อ้วน / โรคอ้วนระดับ 2",
advice: "ควรปรึกษาแพทย์เพื่อวางแผนลดน้ำหนัก ปรับเปลี่ยนพฤติกรรมการกินและเพิ่มการออกกำลังกาย"
};
return {
assessment: "อ้วนมาก / โรคอ้วนระดับ 3",
advice: "ควรพบแพทย์โดยด่วนเพื่อวางแผนลดน้ำหนักอย่างจริงจัง อาจต้องพิจารณาการรักษาทางการแพทย์ร่วมด้วย"
};
}
เพิ่ม Index.html นำส่วนนี้ไปวาง
<!DOCTYPE html>
<html lang="th">
<head>
<base target="_top">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ระบบบันทึกข้อมูลสุขภาพ</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<?!= include('Stylesheet'); ?>
</head>
<body class="min-h-screen flex items-center justify-center p-4 bg-gradient">
<div class="container max-w-md">
<h1 class="text-4xl font-bold text-center text-white mb-8 gradient-text">ระบบบันทึกข้อมูลสุขภาพ</h1>
<div class="card rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-semibold mb-4">บันทึกข้อมูลใหม่</h2>
<form id="healthForm" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">เพศ</label>
<div class="flex justify-start space-x-4">
<div>
<input type="radio" id="male" name="gender" value="ชาย" class="hidden" required>
<label for="male" class="gender-button">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M9 9c1.29 0 2.5.41 3.47 1.11L17.58 5H13V3h8v8h-2V6.41l-5.11 5.09c.7 1 1.11 2.2 1.11 3.5a6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6m0 2a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4z"/>
</svg>
<span>ชาย</span>
</label>
</div>
<div>
<input type="radio" id="female" name="gender" value="หญิง" class="hidden" required>
<label for="female" class="gender-button">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 4a6 6 0 0 1 6 6c0 2.97-2.16 5.44-5 5.92V18h2v2h-2v2h-2v-2H9v-2h2v-2.08c-2.84-.48-5-2.95-5-5.92a6 6 0 0 1 6-6m0 2a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4z"/>
</svg>
<span>หญิง</span>
</label>
</div>
</div>
</div>
<div>
<label for="weight" class="block text-sm font-medium text-gray-700 mb-2">น้ำหนัก (กก.)</label>
<input type="number" id="weight" step="0.1" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 input-gradient">
</div>
<div>
<label for="height" class="block text-sm font-medium text-gray-700 mb-2">ส่วนสูง (ซม.)</label>
<input type="number" id="height" step="0.1" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 input-gradient">
</div>
<div class="flex space-x-2">
<button type="submit" class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition">บันทึกข้อมูล</button>
<button type="button" id="newRecordBtn" class="flex-1 bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 transition">ล้างฟอร์ม</button>
</div>
</form>
<div id="result" class="mt-4"></div>
</div>
<div class="mt-8 text-center">
<a href="https://krunidblogger.blogspot.com/" target="_blank" rel="noopener noreferrer" class="text-white hover:text-gray-200 transition inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-6 h-6 mr-2">
<path fill="#fe6602" d="M162.4 196c4.8-4.9 6.2-5.1 36.4-5.1 27.2 0 28.1 .1 32.1 2.1 5.8 2.9 8.3 7 8.3 13.6 0 5.9-2.4 10-7.6 13.4-2.8 1.8-4.5 1.9-31.1 2.1-16.4 .1-29.5-.2-31.5-.8-10.3-2.9-14.1-17.7-6.6-25.3zm61.4 94.5c-53.9 0-55.8 .2-60.2 4.1-3.5 3.1-5.7 9.4-5.1 13.9 .7 4.7 4.8 10.1 9.2 12 2.2 1 14.1 1.7 56.3 1.2l47.9-.6 9.2-1.5c9-5.1 10.5-17.4 3.1-24.4-5.3-4.7-5-4.7-60.4-4.7zm223.4 130.1c-3.5 28.4-23 50.4-51.1 57.5-7.2 1.8-9.7 1.9-172.9 1.8-157.8 0-165.9-.1-172-1.8-8.4-2.2-15.6-5.5-22.3-10-5.6-3.8-13.9-11.8-17-16.4-3.8-5.6-8.2-15.3-10-22C.1 423 0 420.3 0 256.3 0 93.2 0 89.7 1.8 82.6 8.1 57.9 27.7 39 53 33.4c7.3-1.6 332.1-1.9 340-.3 21.2 4.3 37.9 17.1 47.6 36.4 7.7 15.3 7-1.5 7.3 180.6 .2 115.8 0 164.5-.7 170.5zm-85.4-185.2c-1.1-5-4.2-9.6-7.7-11.5-1.1-.6-8-1.3-15.5-1.7-12.4-.6-13.8-.8-17.8-3.1-6.2-3.6-7.9-7.6-8-18.3 0-20.4-8.5-39.4-25.3-56.5-12-12.2-25.3-20.5-40.6-25.1-3.6-1.1-11.8-1.5-39.2-1.8-42.9-.5-52.5 .4-67.1 6.2-27 10.7-46.3 33.4-53.4 62.4-1.3 5.4-1.6 14.2-1.9 64.3-.4 62.8 0 72.1 4 84.5 9.7 30.7 37.1 53.4 64.6 58.4 9.2 1.7 122.2 2.1 133.7 .5 20.1-2.7 35.9-10.8 50.7-25.9 10.7-10.9 17.4-22.8 21.8-38.5 3.2-10.9 2.9-88.4 1.7-93.9z"/>
</svg>
<span class="text-lg">พัฒนาโดย: นายวัฒนชาต ทัศนศร</span>
</a>
</div>
</div>
<div id="popup" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
<div class="bg-white p-6 rounded-lg shadow-xl">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500 mx-auto"></div>
<p class="mt-4 text-center">กำลังดำเนินการ...</p>
</div>
</div>
<?!= include('JavaScript'); ?>
</body>
</html>
เพิ่ม JavaScript.html
<script>
function showPopup() {
document.getElementById('popup').classList.remove('hidden');
}
function hidePopup() {
document.getElementById('popup').classList.add('hidden');
}
function showResult(result) {
hidePopup();
const bmiClass = getBMIClass(parseFloat(result.bmi));
document.getElementById('result').innerHTML = `
<div class="p-4 mt-4 rounded-lg ${bmiClass}" role="alert">
<p class="font-bold">ค่าดัชนีมวลกาย (BMI): ${result.bmi}</p>
<p>การประเมิน: ${result.assessment}</p>
<p class="mt-2"><strong>คำแนะนำ:</strong> ${result.advice}</p>
</div>
`;
}
function handleError(error) {
hidePopup();
document.getElementById('result').innerHTML = `
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mt-4" role="alert">
<p class="font-bold">เกิดข้อผิดพลาด:</p>
<p>${error.message}</p>
</div>
`;
}
function clearForm() {
document.getElementById('healthForm').reset();
document.getElementById('result').innerHTML = '';
}
function getBMIClass(bmi) {
if (bmi < 18.5) return "bg-blue-200 text-blue-800";
if (bmi < 23) return "bg-green-200 text-green-800";
if (bmi < 25) return "bg-yellow-200 text-yellow-800";
if (bmi < 30) return "bg-orange-200 text-orange-800";
return "bg-red-200 text-red-800";
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('healthForm').addEventListener('submit', function(e) {
e.preventDefault();
showPopup();
const gender = document.querySelector('input[name="gender"]:checked').value;
const weight = parseFloat(document.getElementById('weight').value);
const height = parseFloat(document.getElementById('height').value);
google.script.run
.withSuccessHandler(showResult)
.withFailureHandler(handleError)
.appendRow(gender, weight, height);
});
document.getElementById('newRecordBtn').addEventListener('click', clearForm);
});
</script>
เพิ่ม Stylesheet.html
<style>
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600&display=swap');
body {
font-family: 'Prompt', sans-serif;
}
.bg-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
}
.gradient-text {
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow-text-animation 10s ease infinite;
background-size: 400% 400%;
}
@keyframes rainbow-text-animation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.input-gradient {
background: linear-gradient(to right, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}
.input-gradient:focus {
background: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);
}
.gender-button {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.gender-button svg {
width: 40px;
height: 40px;
transition: all 0.3s ease;
}
.gender-button span {
margin-top: 5px;
font-size: 14px;
font-weight: bold;
}
#male + label {
background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
color: #fff;
}
#female + label {
background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%);
color: #fff;
}
.gender-button:hover {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
input[type="radio"]:checked + label {
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #4facfe;
}
/* เพิ่มสีสำหรับแต่ละระดับ BMI */
.bg-blue-200 { background-color: #BFDBFE; }
.text-blue-800 { color: #1E40AF; }
.bg-green-200 { background-color: #A7F3D0; }
.text-green-800 { color: #065F46; }
.bg-yellow-200 { background-color: #FDE68A; }
.text-yellow-800 { color: #92400E; }
.bg-orange-200 { background-color: #FED7AA; }
.text-orange-800 { color: #9A3412; }
.bg-red-200 { background-color: #FECACA; }
.text-red-800 { color: #991B1B; }
</style>
จากนั้น ดีพลอยเป็นเว็ปแอฟ
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
ร่วมสนับสนุน Zoom เพื่อหารายได้ค่าซูมและกิจกรรมอื่นๆ
ห้องตักศิลา ห้องแห่งการเรียนรู้
สมพงษ์ โพคาศรี
ธนาคารกรุงไทย
เลขบัญชี 305-1-56039-1
สาขา ด่านขุนทด
พร้อมเพย์ 3300800692456
😀😍😁😀😍😃😄😆😀😍😁😀😍😃😄😆😀😍😁😀😍😃😄😆
ติดต่อ นายวัฒนชาต ทัศนศร ©
:
:
เพิ่มเพื่อนด้วย Fb
ร่วมสนับสนุนผู้จัดทำผ่าน พร้อมเพย์ 0892231515 หรือ 3110300648662
นายวัฒนชาต ทัศนศร
