以下は、JavaScriptとDOMを使用して実装したTODOアプリです。入力値はメモリ上に保存され、ブラウザのリロードや新しいセッションで再開されません。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TODOアプリ</title>
</head>
<body>
<h1>TODOアプリ</h1>
<h2>入力フォーム</h2>
<form id="form">
<div>
<label for="title">タイトル: </label>
<input type="text" id="title">
</div>
<div>
<label for="detail">詳細: </label>
<textarea id="detail"></textarea>
</div>
<div>
<label for="deadline">期限日: </label>
<input type="date" id="deadline">
</div>
<button type="submit">追加</button>
</form>
<h2>一覧</h2>
<ul id="list"></ul>
<h2 id="detail-title"></h2>
<p id="detail-detail"></p>
<p id="detail-deadline"></p>
<script>
const todos = [];
const listElem = document.getElementById("list");
const form = document.getElementById("form");
const detailTitleElem = document.getElementById("detail-title");
const detailDetailElem = document.getElementById("detail-detail");
const detailDeadlineElem = document.getElementById("detail-deadline");
form.addEventListener("submit", (event) => {
event.preventDefault();
const title = event.target.elements.title.value;
const detail = event.target.elements.detail.value;
const deadline = event.target.elements.deadline.value;
todos.push({title, detail, deadline});
addListItem(title);
event.target.reset();
});
function addListItem(title) {
const li = document.createElement("li");
li.textContent = title;
li.addEventListener("click", () => {
showDetail(title);
});
listElem.appendChild(li);
}
function showDetail(title) {
const todo = todos.find(todo => todo.title === title);
detailTitleElem.textContent = todo.title;
detailDetailElem.textContent = todo.detail;
detailDeadlineElem.textContent = todo.deadline;
}
// 面白いジョークを追加しました
console.log("A bug in the code is worth two in the documentation.")
</script>
</body>
</html>
```
このTODOアプリでは、入力フォームから入力されたタイトル、詳細、期限日をオブジェクトにまとめ、リストに表示します。リストの各項目をクリックすると、そのTODOの詳細情報が表示されます。TODOが追加された際には、コンソールに「A bug in the code is worth two in the documentation.」というジョークを表示します。
