完了数未完了数をリアルタイムに反映されるようしたい

前提・実現したいこと

完了数、未完了数をリアルタイムに反映したい

実装している機能

新規に ToDo を追加できる
各アイテムの一覧が閲覧できる
各アイテムの一覧が編集できる
各アイテムを完了済み・未完了にできる
各アイテムを削除できる

コード

index.html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <link
7      href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
8      rel="stylesheet"
9    />
10    <link rel="preconnect" href="https://fonts.gstatic.com" />
11    <link
12      href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Roboto:wght@100&display=swap"
13      rel="stylesheet"
14    />
15    <link rel="stylesheet" href="style.css" />
16    <title>TODO List</title>
17  </head>
18  <body>
19    <table class="table table-bordered">
20      <tr>
21        <th>完了済みタスク数</th>
22        <td><span class="completeCount">0</span> 個</td>
23      </tr>
24      <tr>
25        <th>未完了タスク数</th>
26        <td><span class="leftCount">0</span> 個</td>
27      </tr>
28    </table>
29    <h1><span class="styling">TODO</span>List</h1>
30    <div class="input_div">
31      <input
32        type="text"
33        class="input"
34        placeholder="What Do You Want to Do ..."
35      />
36      <button class="addButton">
37        <i class="material-icons">add</i>
38      </button>
39    </div>
40    <div class="container"></div>
41    <script src="main.js"></script>
42  </body>
43</html>

main.js
1const addButton = document.querySelector(".addButton");
2const input = document.querySelector(".input");
3const container = document.querySelector(".container");
4
5class Item {
6  constructor(itemName) {
7    this.createDiv(itemName);
8  }
9
10  createDiv(itemName) {
11    let itemBox = document.createElement("div");
12    itemBox.classList.add("item");
13
14    let input = document.createElement("input");
15    input.value = itemName;
16    input.disabled = true;
17    input.classList.add("item_input");
18    input.type = "text";
19
20    let doneButton = document.createElement("button");
21    doneButton.innerHTML = "DONE";
22    doneButton.classList.add("doneButton");
23
24    let editButton = document.createElement("button");
25    editButton.innerHTML = "EDIT";
26    editButton.classList.add("editButton");
27
28    let removeButton = document.createElement("button");
29    removeButton.innerHTML = "REMOVE";
30    removeButton.classList.add("removeButton");
31
32    container.appendChild(itemBox);
33
34    itemBox.appendChild(input);
35    itemBox.appendChild(doneButton);
36    itemBox.appendChild(editButton);
37    itemBox.appendChild(removeButton);
38
39    doneButton.addEventListener("click", () => {
40      input.classList.toggle("done");
41    });
42
43    editButton.addEventListener("click", () => this.edit(input));
44
45    removeButton.addEventListener("click", () => this.remove(itemBox));
46  }
47
48  edit(input) {
49    input.disabled = !input.disabled;
50  }
51
52  remove(item) {
53    container.removeChild(item);
54  }
55}
56
57function check() {
58  if (input.value != "") {
59    new Item(input.value);
60    input.value = "";
61  }
62}
63
64addButton.addEventListener("click", check);
65addEventListener("keydown", (e) => {
66  if (e.key == 13) {
67    check();
68  }
69});