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,contents}로 구성되어있고, 새로 newTodo{}를 만들어서 데이터에 push하도록 하였다.
newTodo의 id는 findIndex를 사용하여 마지막 index번호를 찾았으며, id넘버는 1부터 시작하게 만들었기 때문에 +2를 하면 다음 번호를 지정할 수 있다.

2.html에 새 리스트를 추가하고 인풋창을 비우자.

  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 = ""으로 클릭 후 비워지게 구현하였다.