챗GPT를 이용해 만든 비만도 계산기 코드입니다. 복사해서 참고하셔서 본인만의 웹 비만도 계산기를 만들어보세요.
워드프레스에 사용할 때에는 head 태그 부분의 style 태그 부분과 body 태그 내부의 script 태그 부분은 분리해서 구현하셔야 합니다. 관련 내용은 유튜브 영상 풀버전에 소개해 놨으니 여기 참고하세요.
<!DOCTYPE html>
<html>
<head>
<title>BMI 계산기 (비만도 계산기)</title>
<style>
body {
margin: 0;
padding: 20px;
background-color: #f2f2f2;
}
h1 {
text-align: center;
}
.container {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 10px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.result {
margin-top: 20px;
font-weight: bold;
text-align: center;
}
.result span {
margin-top: 10px;
}
.underweight {
color: #007bff;
}
.normal-weight {
color: #28a745;
}
.overweight {
color: #ffc107;
}
.obese {
color: #dc3545;
}
</style>
</head>
<body>
<div class=“container”>
<h1>BMI Calculator<br>비만도 계산기</h1>
<div class=“form-group”>
<label for=“height”>키(cm):</label>
<input type=“number” id=“height” step=“0.1”>
</div>
<div class=“form-group”>
<label for=“weight”>몸무게(kg)):</label>
<input type=“number” id=“weight” step=“0.1”>
</div>
<div class=“form-group”>
<button onclick=“calculateBMI()”>비만도 계산</button>
</div>
<div class=“result” id=“result”></div>
</div>
<script>
function calculateBMI() {
var weightInput = document.getElementById(“weight”);
var heightInput = document.getElementById(“height”);
var resultDiv = document.getElementById(“result”);
var weight = parseFloat(weightInput.value);
var height = parseFloat(heightInput.value) / 100; // cm를 m로 변환
if (isNaN(weight) || isNaN(height) || weight <= 0 || height <= 0) {
resultDiv.innerHTML = “<span>올바른 키와 몸무게를 입력하세요.</span>”;
return;
}
var bmi = weight / (height * height);
var category = “”;
var description = “”;
if (bmi < 18.5) {
category = “저체중”;
description = “이 범주에 속하는 경우, 식이요법이나 건강적인 체중증가를 위한 조치가 필요할 수 있습니다. 저체중은 영양 부족이나 기타 건강 문제의 일부일 수 있으므로, 의사 또는 영양사와 상담하는 것이 좋습니다.”;
resultDiv.innerHTML = “<p>당신의 비만도 지수는 <span class=’underweight’>” + bmi.toFixed(2) + “</span> “ + category + ” 입니다.</p>” + description;
} else if (bmi < 25) {
category = “정상체중”;
description = “정상 범주에 속하는 경우, 체중과 키의 균형이 잘 맞는 것으로 간주됩니다. 하지만 다른 건강 요인도 고려해야 합니다. 올바른 식단과 꾸준한 신체 활동은 건강을 유지하기 위해 중요합니다.”;
resultDiv.innerHTML = “<p>당신의 비만도 지수는 <span class=’normal-weight’>” + bmi.toFixed(2) + “</span> “ + category + ” 입니다.</p>” + description;
} else if (bmi < 30) {
category = “과체중”;
description = “과체중 범주에 속하는 경우, 심혈관 질환, 당뇨병, 고혈압 등의 위험 요소가 증가할 수 있습니다. 건강한 식습관과 규칙적인 운동을 통해 체중을 조절하는 것이 중요합니다.”;
resultDiv.innerHTML = “<p>당신의 비만도 지수는 <span class=’overweight’>” + bmi.toFixed(2) + “</span> “ + category + ” 입니다.</p>” + description;
} else {
category = “비만”;
description = “비만 범주에 속하는 경우, 심각한 건강 문제의 위험이 높아질 수 있습니다. 비만은 심혈관 질환, 당뇨병, 고혈압, 관절 문제 등을 초래할 수 있으며, 건강 전문가와의 상담이 필요합니다. 체중 감량을 위해 의료적 지원과 영양 조절, 체력 운동이 필요할 수 있습니다.”;
resultDiv.innerHTML = “<p>당신의 비만도 지수는 <span class=’obese’>” + bmi.toFixed(2) + “</span> “ + category + ” 입니다.</p>” + description;
}
}
</script>
</body>
</html>비만도 계산기 코드 작성하기 풀버전 유튜브
