以下が求められるアプリのコード例です。詳細はコメントを参照してください。
```html
<!DOCTYPE html>
<html>
<head>
<title>ライフログツール</title>
</head>
<body>
<h1>ライフログツール</h1>
<!-- ボタン作成用フォーム -->
<form id="createForm">
<label for="text">ボタン名：</label>
<input type="text" id="text" required>
<button type="submit">ボタン作成</button>
</form>
<!-- ここに作成したボタンを追加 -->
<div id="buttons"></div>
<script>
// ユーザーが作成したボタンを格納する配列
const buttons = [];
// ボタン作成用フォームのサブミットイベント
document.getElementById("createForm").addEventListener("submit", (e) => {
e.preventDefault();
// ボタン名を取得
const text = document.getElementById("text").value;
if (text.trim() === "") {
alert("ボタン名を入力してください。");
return;
}
// ボタン要素の作成
const button = document.createElement("button");
button.textContent = text;
// 奇数回目の押下の開始を示す変数
let start = true;
// イベントリスナの登録
button.addEventListener("click", () => {
// 奇数回目の押下
if (start) {
console.log(`${text}の開始`);
start = false;
}
// 偶数回目の押下
else {
console.log(`${text}の終了`);
start = true;
}
});
// 作成したボタンを配列に格納
buttons.push(button);
// 作成したボタンを表示する
const buttonsDiv = document.getElementById("buttons");
buttonsDiv.append(button);
});
</script>
</body>
</html>
```
アプリの特徴は、ボタン作成フォームから任意のボタンを作成し、クリックすることで、奇数回目のクリックであれば「開始」、偶数回目のクリックであれば「終了」と表示することです。
ジョークとしては、「一度作成したボタンは二度と削除できません。人生と同じですね。」といったところでしょうか。
