カブトムシ管理アプリ

カブトムシの生育状況を管理することができるアプリです。
カブトムシの名前：

カブトムシの年齢：

カブトムシの性別： ♂ ♀

カブトムシの体重(kg)：

カブトムシの活動量：
<!DOCTYPE html>
<html>
	<head>
		<title>カブトムシ管理アプリ</title>
		<meta charset="UTF-8">
	</head>
	<body>
		<h1>カブトムシ管理アプリ</h1>
		<p>カブトムシの生育状況を管理することができるアプリです。</p>
		<label for="name">カブトムシの名前：</label>
		<input type="text" id="name" name="name"><br><br>
		<label for="age">カブトムシの年齢：</label>
		<input type="number" id="age" name="age"><br><br>
		<label for="sex">カブトムシの性別：</label>
		<input type="radio" id="male" name="sex" value="male">
		<label for="male">♂</label>
		<input type="radio" id="female" name="sex" value="female">
		<label for="female">♀</label><br><br>
		<label for="weight">カブトムシの体重(kg)：</label>
		<input type="number" id="weight" name="weight"><br><br>
		<label for="activity">カブトムシの活動量：</label>
		<select id="activity" name="activity">
			<option value="low">低い</option>
			<option value="normal">普通</option>
			<option value="high">高い</option>
		</select><br><br>
		<button onclick="storeData()">データを保存する</button><br><br>
		<button onclick="showData()">保存されたデータを表示する</button><br><br>
		<p id="result"></p>
		<script>
			function storeData() {
				var name = document.getElementById("name").value;
				var age = document.getElementById("age").value;
				var sex = document.querySelector('input[name="sex"]:checked').value;
				var weight = document.getElementById("weight").value;
				var activity = document.getElementById("activity").value;
				var data = {
					name: name,
					age: age,
					sex: sex,
					weight: weight,
					activity: activity
				};
				localStorage.setItem("kabutomushi_data", JSON.stringify(data));
				alert("データを保存しました。");
			}

			function showData() {
				var data = JSON.parse(localStorage.getItem("kabutomushi_data"));
				if (data == null) {
                    document.getElementById("result").innerHTML = "保存されたデータはありません。";
                } else {
                    var ageType = "";
                    if (data.age < 2){
                        ageType = "子供";
                    } else if (data.age < 4) {
                        ageType = "若者";
                    } else if (data.age < 6) {
                        ageType = "成熟";
                    } else {
                        ageType = "老成";
                    }
                    var weightType = "";
                    if (data.weight < 0.02){
                        weightType = "やせすぎ";
                    } else if (data.weight < 0.04) {
                        weightType = "やせ気味";
                    } else if (data.weight < 0.06) {
                        weightType = "普通体型";
                    } else {
                        weightType = "肥満";
                    }
                    var result = "【カブトムシ情報】<br>";
                    result += "名前：" + data.name + "<br>";
                    result += "年齢：" + data.age + "歳（" + ageType + "）<br>";
                    result += "性別：" + data.sex + "<br>";
                    result += "体重：" + data.weight + "kg（" + weightType + "）<br>";
                    result += "活動量：" + data.activity + "<br>";
                    document.getElementById("result").innerHTML = result;
                }
			}
		</script>
	</body>
</html>