todoListアイテムの追加

todoListにアイテムを追加してみます。

1.作成したリストをデータに入れる

const inputAddButtonElement = document.querySelector("#todo-add-container>i");

  inputAddButtonElement.addEventListener("click", () => {
    const todoInputElement = document.querySelector(
      "#todo-add-container > input"
    );
    
    const contents = todoInputElement.value;
    const id = TODOS.findIndex((TODO) => {
      return TODO.id === TODOS[TODOS.length - 1].id;
    });

    const isYear = thisYear;
    const isMonth = thisMonth;
    const isDate = thisDate;
    const newTodo = {
      id: id + 2,
      month: isMonth,
      date: isDate,
      year: isYear,
      contents,
    };

    //TODOS로 추가
    TODOS.push(newTodo);
  });
};

データのarray名はTODOSです.
TODOSのオブジェクトは{id,month,date,year,content}からなり、新しいNewToDo{}を作成してデータを推進します.
newTodoのidはfindIndexを使用して最後のインデックス番号を検索します.id番号は1から始まるので、+2は次を指定できます.

2.htmlに新しいリストを追加し、Inputウィンドウを空にします。

  const inputAddButtonElement = document.querySelector("#todo-add-container>i");
  inputAddButtonElement.addEventListener("click", () => {
    const todoInputElement = document.querySelector(
      "#todo-add-container > input"
    );
    const contents = todoInputElement.value;
    const id = TODOS.findIndex((TODO) => {
      return TODO.id === TODOS[TODOS.length - 1].id;
    });

    const isYear = thisYear;
    const isMonth = thisMonth;
    const isDate = thisDate;
    const newTodo = {
      id: id + 2,
      month: isMonth,
      date: isDate,
      year: isYear,
      contents,
    };

    //TODOS로 추가
    TODOS.push(newTodo);

    //HTML로 추가
    createTodoElement(
      newTodo.contents,
      newTodo.id,
      newTodo.year,
      newTodo.month,
      newTodo.date
    );

    //클릭 후 인풋창 empty하기
    todoInputElement.value = "";
  });
};

htmlのtodoListラベルはcssを作成するためにいくつかの複雑な仕事をしたので、createToDoElement関数を事前に作成しました.
関数に新しいnewTodoを挿入し、inputウィンドウをvalue=""でクリックして空にします.