グループ健康管理ツール
メンバー一覧
体重登録フォーム
最新の体重
「ダイエットは楽しい！でもフォークは歯に当たるから実質２回食べている気がする」
以下は、JavaScriptを用いて実装したグループ健康管理ツールの一例です。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>グループ健康管理ツール</title>
</head>
<body>
<h1>グループ健康管理ツール</h1>
<h2>メンバー一覧</h2>
<ul id="members"></ul>
<h2>体重登録フォーム</h2>
<form>
<label for="name">名前：</label>
<input type="text" id="name" name="name" required><br>
<label for="weight">体重：</label>
<input type="number" id="weight" name="weight" required><br>
<label for="date">日付：</label>
<input type="date" id="date" name="date" required><br>
<button type="button" onclick="registerWeight()">登録</button>
</form>
<h2>最新の体重</h2>
<ul>
<li id="latest_name"></li>
<li id="latest_weight"></li>
<li id="latest_date"></li>
</ul>
<script>
// メンバー一覧の初期化
let members = ["山田", "田中", "鈴木", "高橋"];
let membersList = document.getElementById("members");
for (let i = 0; i < members.length; i++) {
let listItem = document.createElement("li");
listItem.textContent = members[i];
membersList.appendChild(listItem);
}
// 体重登録フォームの処理
function registerWeight() {
let name = document.getElementById("name").value;
let weight = document.getElementById("weight").value;
let date = document.getElementById("date").value;
if (members.includes(name)) {
let key = name + "_weight";
localStorage.setItem(key, weight);
key = name + "_date";
localStorage.setItem(key, date);
alert("体重を登録しました！");
} else {
alert("その名前は登録されていません。");
}
}
// 最新の体重を表示
let latestName = document.getElementById("latest_name");
let latestWeight = document.getElementById("latest_weight");
let latestDate = document.getElementById("latest_date");
let latest = getLatestWeight();
if (latest) {
latestName.textContent = latest.name;
latestWeight.textContent = latest.weight + " kg";
latestDate.textContent = latest.date;
}
function getLatestWeight() {
let latest = null;
for (let i = 0; i < members.length; i++) {
let key = members[i] + "_weight";
let weight = localStorage.getItem(key);
if (weight !== null) {
if (latest === null || latest.date < localStorage.getItem(members[i] + "_date")) {
latest = {
name: members[i],
weight: weight,
date: localStorage.getItem(members[i] + "_date")
};
}
}
}
return latest;
}
</script>
<p>「ダイエットは楽しい！でもフォークは歯に当たるから実質２回食べている気がする」</p>
</body>
</html>
```
このアプリでは、メンバーの体重を管理することができます。初期状態では、山田、田中、鈴木、高橋の4人が登録されています。体重登録フォームから名前、体重、日付を入力し、登録することができます。登録された情報はlocalStorageに保存され、最新の体重はページの表示時に表示されます。また、アプリの下部には、ダイエットに関するジョークが含まれています。