BMI 계산기
체질량지수는 자신의 몸무게(kg)를 키의 제곱(m)으로 나눈 값입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI 계산기</title>
<!-- 부트스트랩 CSS 및 JS 라이브러리 추가 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center my-4">BMI 계산기</h1>
<div class="row">
<div class="col-md-6 offset-md-3">
<form id="bmiForm">
<div class="mb-3">
<label for="weight" class="form-label">몸무게 (kg)</label>
<input type="number" class="form-control" id="weight" required>
</div>
<div class="mb-3">
<label for="height" class="form-label">키 (cm)</label>
<input type="number" class="form-control" id="height" required>
</div>
<button type="submit" class="btn btn-primary">계산하기</button>
</form>
<div id="result" class="text-center mt-4" style="display: none;">
<h2>결과: <span id="bmiValue"></span></h2>
<h3 id="bmiCategory"></h3>
</div>
</div>
</div>
</div>
<script>
document.getElementById("bmiForm").addEventListener("submit", function (event) {
event.preventDefault();
const weight = parseFloat(document.getElementById("weight").value);
const height = parseFloat(document.getElementById("height").value);
const bmi = (weight / ((height * 0.01) ** 2)).toFixed(1);
let category = "";
if (bmi < 18.5) {
category = "저체중";
} else if (bmi >= 18.5 && bmi < 25) {
category = "정상체중";
} else if (bmi >= 25 && bmi < 30) {
category = "과체중";
} else {
category = "비만";
}
document.getElementById("bmiValue").innerText = bmi;
document.getElementById("bmiCategory").innerText = category;
document.getElementById("result").style.display = "block";
});
</script>
</body>
</html>