スケジュール管理と提出締切管理

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>スケジュール管理と提出締切管理</title>
	<script>
		// 提出締切までの残り日数を計算して表示する関数
		function calculateDaysLeft() {
			// ユーザーが入力した提出締切日を取得
			var deadline = new Date(document.getElementById("deadline").value);
			// 今日の日付を取得
			var today = new Date();
			// 提出締切までの残り日数を計算
			var daysLeft = Math.ceil((deadline - today) / (1000 * 60 * 60 * 24));
			
			// 提出締切までの残り日数を表示
			document.getElementById("daysLeft").innerHTML = daysLeft;
		}
		
		// 提出締切までの残り日数を計算するボタンをクリックした時の処理
		document.getElementById("calculateButton").addEventListener("click", calculateDaysLeft);
		
		// スケジュールを追加するフォームを送信した時の処理
		document.getElementById("addScheduleForm").addEventListener("submit", function(event) {
			// フォームが自動で送信されないようにする
			event.preventDefault();
			
			// ユーザーが入力したスケジュール名と日付を取得
			var scheduleName = document.getElementById("scheduleName").value;
			var scheduleDate = new Date(document.getElementById("scheduleDate").value);
			
			// 新しく行を作成して、スケジュール名と日付を表示する
			var table = document.getElementById("scheduleTable");
			var row = table.insertRow(-1);
			var nameCell = row.insertCell(0);
			var dateCell = row.insertCell(1);
			nameCell.innerHTML = scheduleName;
			dateCell.innerHTML = scheduleDate.toLocaleDateString();
			
			// フォームをリセットする
			document.getElementById("addScheduleForm").reset();
		});
	</script>
</head>
<body>
	<h1>スケジュール管理と提出締切管理</h1>
	<p>提出締切まであと <span id="daysLeft"></span> 日です。</p>
	<label for="deadline">提出締切日：</label>
	<input type="date" id="deadline">
	<button id="calculateButton">計算する</button>
	
	<h2>スケジュール</h2>
	<table id="scheduleTable">
		<tr>
			<th>スケジュール</th>
			<th>日付</th>
		</tr>
		<tr>
			<td>講義</td>
			<td>2022/02/01</td>
		</tr>
		<tr>
			<td>課題の提出</td>
			<td>2022/02/03</td>
		</tr>
	</table>
	<h3>スケジュールを追加する</h3>
	<form id="addScheduleForm">
		<label for="scheduleName">スケジュール名：</label>
		<input type="text" id="scheduleName"><br>
		<label for="scheduleDate">日付：</label>
		<input type="date" id="scheduleDate"><br>
		<button type="submit">追加する</button>
	</form>
	<p>ジョーク：スケジュール管理は、時間を管理することが目的ですが、実は時間は私たちを管理しているのではないでしょうか。</p>
</body>
</html>