JavaScriptでのチェックリスト

このレッスンでは、チェックリストを実装します。チェックリストとは、計画しているタスクのリストを作成し、その後、それらのタスクを完了したものとしてマークできるプログラムのことです。

タスクを追加、削除、編集、および完了済みとしてマークできるようにしましょう。

以下に、完成予定のサンプルを示します（新しいタスクを入力するには、入力フィールドにテキストを入力して Enter を押してください。編集するには、タスクのテキストをダブルクリックしてください）：

始めましょう

それでは、説明したタスクの実装に取り掛かりましょう。

まず、チェックリストのHTMLコードを書きましょう。新しいタスクは入力フィールドで入力され、リスト ul に追加されるようにします：

<input id="input">
<ul id="list"></ul>

すぐに、チェックリストにいくつかの見栄えを追加する CSSコードを追加しましょう：

body {
	text-align: center;
}
#input, #list {
	display: inline-block;
}
#list {
	padding: 0;
	list-style-type: none;
}

いつものように、複雑なタスクをシンプルな段階に分けましょう。

最初の段階として、入力フィールドにテキストを入力し、 Enter を押すと、入力したテキストを持つ li が ul の末尾に追加されるようにしましょう。

以下は、説明した内容を実装するためのコードのひな型です：

let input = document.querySelector('#input');
let list = document.querySelector('#list');

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// ここに、新しいliをリストに追加するコードが入ります
	}
});

説明されたタスクを解決するために、不足しているコード部分を記述してください。

前のタスクを変更して、Enter キーを押した後に入力フィールドのテキストがクリアされるようにしてください。