JavaScriptでのチェックリスト

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

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

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

始めましょう

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

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

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

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

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

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

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

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

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

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