以下がグループ健康管理ツールの実装例です。このツールを使えば、グループ全体の健康状態を簡単に管理できます。
```html
<!DOCTYPE html>
<html>
<head>
<title>グループ健康管理ツール</title>
</head>
<body>
<h1>グループ健康管理ツール</h1>
<form>
<label>名前:</label>
<input type="text" id="name_input"></input>
<br>
<label>体重(kg):</label>
<input type="number" id="weight_input"></input>
<br>
<label>身長(cm):</label>
<input type="number" id="height_input"></input>
<br>
<label>年齢:</label>
<input type="number" id="age_input"></input>
<br>
<button type="button" onclick="addData()">データを追加</button>
</form>
<hr>
<h2>グループ全体の健康状態</h2>
<div id="group_health"></div>
<script>
let groupData = [];
function addData() {
const name = document.getElementById("name_input").value;
const weight = document.getElementById("weight_input").value;
const height = document.getElementById("height_input").value;
const age = document.getElementById("age_input").value;
groupData.push({name, weight, height, age});
updateGroupData();
}
function updateGroupData() {
let avgWeight = 0;
let avgHeight = 0;
let avgAge = 0;
let numMembers = groupData.length;
groupData.forEach((member) => {
avgWeight += Number(member.weight);
avgHeight += Number(member.height);
avgAge += Number(member.age);
});
if (numMembers > 0) {
avgWeight /= numMembers;
avgHeight /= numMembers;
avgAge /= numMembers;
}
const groupHealthDiv = document.getElementById("group_health");
const groupHealthHTML = `
<p>グループ全体の平均体重: ${avgWeight.toFixed(1)} kg</p>
<p>グループ全体の平均身長: ${(avgHeight/100).toFixed(2)} m</p>
<p>グループ全体の平均年齢: ${avgAge.toFixed(0)} 歳</p>
`;
groupHealthDiv.innerHTML = groupHealthHTML;
}
</script>
</body>
</html>
```
ジョークを入れた結果、以下のようになりました。
```html
<!DOCTYPE html>
<html>
<head>
<title>グループ健康管理ツール</title>
</head>
<body>
<h1>グループ健康管理ツール</h1>
<form>
<label>名前:</label>
<input type="text" id="name_input"></input>
<br>
<label>体重(kg):</label>
<input type="number" id="weight_input"></input>
<br>
<label>身長(cm):</label>
<input type="number" id="height_input"></input>
<br>
<label>年齢:</label>
<input type="number" id="age_input"></input>
<br>
<button type="button" onclick="addData()">データを追加</button>
</form>
<hr>
<h2>グループ全体の健康状態</h2>
<div id="group_health"></div>
<script>
let groupData = [];
function addData() {
const name = document.getElementById("name_input").value;
const weight = document.getElementById("weight_input").value;
const height = document.getElementById("height_input").value;
const age = document.getElementById("age_input").value;
// 以下、ジョークを追加
if (name === "") {
alert("名前を入力してください");
}
else if (weight <= 0 || height <= 0 || age <= 0) {
alert("数字をちゃんと入力してください！");
}
else {
groupData.push({name, weight, height, age});
updateGroupData();
}
}
function updateGroupData() {
let avgWeight = 0;
let avgHeight = 0;
let avgAge = 0;
let numMembers = groupData.length;
groupData.forEach((member) => {
avgWeight += Number(member.weight);
avgHeight += Number(member.height);
avgAge += Number(member.age);
});
if (numMembers > 0) {
avgWeight /= numMembers;
avgHeight /= numMembers;
avgAge /= numMembers;
}
const groupHealthDiv = document.getElementById("group_health");
const groupHealthHTML = `
<p>グループ全体の平均体重: ${avgWeight.toFixed(1)} kg</p>
<p>グループ全体の平均身長: ${(avgHeight/100).toFixed(2)} m</p>
<p>グループ全体の平均年齢: ${avgAge.toFixed(0)} 歳</p>
`;
groupHealthDiv.innerHTML = groupHealthHTML;
}
</script>
</body>
</html>
```
