HTMLでBMI値計算ページを作成して見ました。結果判定はしていませんので、気になる方は以下を参照してください。
Visual Studio Basic_18 PictureBoxで画像表示と切り替え 2020/09/09
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>BMI計算機</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
margin: 0;
background-color: silver;
}
h2 {
font-size: 28px;
color: gray;
}
.bmi-calculator {
background: white;
padding: 20px;
border-radius: 16px;
text-align: center;
}
input {
padding: 10px;
margin: 10px 0;
width: 30%;
border: 1px solid silver;
border-radius: 4px;
}
button {
padding: 10px;
margin-top: 10px;
background-color: olivedrab;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
width: 59%;
}
button:hover {
background-color: forestgreen;
}
.result {
margin-top: 20px;
font-size: 14px;
color: red;
}
.color_gray {
color: gray;
}
</style>
</head>
<body>
<div class="bmi-calculator">
<h2>BMI Calculator</h2>
<label for="height" class="color_gray">身長 (cm):</label>
<input type="number"
id="height" placeholder="例: 170" required>
<br>
<label for="weight" class="color_gray">体重 (kg):</label>
<input type="number"
id="weight" placeholder="例: 65" required>
<button onclick="calculateBMI()">BMIを計算</button>
<div class="result" id="result"></div>
</div>
<script>
function calculateBMI() {
const height =
document.getElementById('height').value / 100;
// cmをmに変換
const weight =
document.getElementById('weight').value;
const bmi =
(weight / (height * height)).toFixed(2);
const resultElement =
document.getElementById('result');
if (isNaN(bmi) || !height || !weight) {
resultElement.innerText =
"正しい数値を入力してください";
} else {
resultElement.innerText =
"あなたのBMIは " + bmi + " です";
}
}
</script>
</body>
</html>
<!-- index.html -->
実行したら・・・
数値を入力して［BMIを計算］で結果が表示されます。
