<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>簡易タスク管理システム</title>
<link rel="stylesheet" href="tasuku.css">
</head>
<body>
<h1>簡易タスク管理システム</h1>
<div id="taskForm">
<h2>新規タスク追加</h2>
<input type="text" id="taskTitle" placeholder="タイトル" required>
<input type="text" id="taskDescription" placeholder="説明">
<input type="date" id="taskDueDate">
<select id="taskStatus">
<option value="学校">学校</option>
<option value="家庭">家庭</option>
<option value="その他">その他</option>
</select>
<select id="taskPriority">
<option value="1">低</option>
<option value="2">中</option>
<option value="3">高</option>
</select>
<button onclick="addTask()">タスク追加</button>
</div>
<div id="taskList">
<h2>タスク一覧</h2>
<button onclick="sortTasks()">期限でソート</button>
<select id="filterPriority" onchange="filterTasks()">
<option value="">優先度でフィルタ</option>
<option value="1">低</option>
<option value="2">中</option>
<option value="3">高</option>
</select>
<select id="filterStatus" onchange="filterTasks()">
<option value="">区分でフィルタ</option>
<option value="学校">学校</option>
<option value="家庭">家庭</option>
<option value="その他">その他</option>
</select>
<table id="tasksTable">
<thead>
<tr>
<th>タイトル</th>
<th>説明</th>
<th>期限</th>
<th>区分</th>
<th>優先度</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script src="tasuku.js"></script>
</body>
</html>
