```html
<!DOCTYPE html>
<html>
<head>
<title>TODOアプリ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: sans-serif;
}
h1 {
text-align: center;
}
table {
margin: auto;
}
th, td {
padding: 0.5em;
text-align: center;
border: 1px solid black;
}
form {
text-align: center;
margin: 2em 0;
}
input[type="text"], input[type="date"] {
padding: 0.5em;
margin: 0.5em;
}
input[type="submit"], input[type="reset"] {
padding: 0.5em;
margin: 0.5em;
background-color: #0077b6;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover, input[type="reset"]:hover {
background-color: #0496FF;
}
input[type="submit"]:active, input[type="reset"]:active {
background-color: #015F88;
}
</style>
<script>
function addTodo() {
var title = document.getElementById("title").value;
var detail = document.getElementById("detail").value;
var dueDate = document.getElementById("dueDate").value;
if (title != "" && detail != "" && dueDate != "") {
var table = document.getElementById("todoTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML = title;
var cell2 = row.insertCell(1);
cell2.innerHTML = detail;
var cell3 = row.insertCell(2);
cell3.innerHTML = dueDate;
var cell4 = row.insertCell(3);
var button = document.createElement("button");
button.innerHTML = "削除";
button.onclick = function() {
var i = this.parentNode.parentNode.rowIndex;
document.getElementById("todoTable").deleteRow(i);
}
cell4.appendChild(button);
document.getElementById("title").value = "";
document.getElementById("detail").value = "";
document.getElementById("dueDate").value = "";
} else {
alert("全ての項目を入力してください。");
}
}
</script>
</head>
<body>
<h1>TODOアプリ</h1>
<form>
<label for="title">タイトル:</label>
<input type="text" id="title" name="title" required><br>
<label for="detail">詳細:</label>
<input type="text" id="detail" name="detail" required><br>
<label for="dueDate">期限日:</label>
<input type="date" id="dueDate" name="dueDate" required><br>
<input type="button" value="追加" onclick="addTodo()">
<input type="reset" value="リセット">
</form>
<table id="todoTable">
<thead>
<tr>
<th>タイトル</th>
<th>詳細</th>
<th>期限日</th>
<th>削除</th>
</tr>
</thead>
<tbody>
<!--TODOが追加されたらここに挿入される-->
</tbody>
</table>
</body>
</html>
```
ジョーク:
ユーザーが入力ミスをしても優しいエラーメッセージを出してあげましょう。
「あなたのTODOが未選択です。」
