챗GPT로 만들었던 BMI 계산기의 학습용 코드입니다. 복사했을 때 실행되지 않던 곡선 따옴표를 고치고, 입력 검증과 결과 읽기 알림을 추가했습니다. 건강 분류와 치료 조언은 제외하고 수치 계산만 남겼습니다.
아래는 독립 HTML 파일용 예제입니다. 워드프레스 본문에 통째로 붙이는 방법과는 다릅니다. 편집기와 사용자 권한에 따라 스크립트가 제거될 수 있고 기존 테마와도 충돌할 수 있으므로 별도 테스트 환경에서 확인하세요. 과거 제작 영상과 현재 코드는 일부 다릅니다.
계산식은 몸무게(kg) ÷ 키(m)의 제곱입니다. 예를 들어 170cm와 65kg을 넣으면 약 22.49가 나옵니다. 이 숫자만으로 건강 상태를 판정하지 않습니다.
<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>BMI 계산 연습</title>
<style>.bmi-demo{max-width:28rem;margin:2rem auto;padding:1.5rem;font-family:sans-serif;line-height:1.7}.bmi-demo label{display:block;margin-top:1rem}.bmi-demo input,.bmi-demo button{box-sizing:border-box;width:100%;padding:.7rem;font:inherit}.bmi-demo button{margin-top:1rem}</style></head>
<body><main class="bmi-demo"><h1>BMI 계산 연습</h1>
<p>키와 몸무게로 수치를 계산하는 학습 예제입니다. 건강 상태를 진단하거나 치료 방법을 제안하지 않습니다.</p>
<form id="bmi-form"><label for="height">키(cm)</label><input id="height" type="number" min="0.1" step="any" required><label for="weight">몸무게(kg)</label><input id="weight" type="number" min="0.1" step="any" required><button type="submit">계산하기</button></form>
<p id="result" role="status" aria-live="polite"></p></main>
<script>
document.getElementById('bmi-form').addEventListener('submit', function(event) {
event.preventDefault();
const height = Number(document.getElementById('height').value) / 100;
const weight = Number(document.getElementById('weight').value);
const result = document.getElementById('result');
if (!Number.isFinite(height) || !Number.isFinite(weight) || height <= 0 || weight <= 0) {
result.textContent = '0보다 큰 키와 몸무게를 입력하세요.'; return;
}
const bmi = weight / (height * height);
result.textContent = Number.isFinite(bmi) ? 'BMI 계산값: ' + bmi.toFixed(2) : '입력값을 다시 확인하세요.';
});
</script></body></html>