Javascript-07.todo list추가하기

우선 html에 영역을 만들어준다.

 <form id="todo-form">
        <input required type="text" placeholder="write todos">
    </form>
    <ul id="todo-list"></ul>

그다음에 todo.js에서 해당영역을 선택해 준다.

const todoForm = document.getElementById("todo-form");
const todoList = document.getElementById("todo-list");
const todoInput = todoForm.querySelector("input");

form에 대한 event를 listen하기 위해 다음 코드를 추가해준다.

todoForm.addEventListener("submit", handleSubmit);

그다음 함수에 대해 정의해준다.
자동으로 새로고침되는 것을 막고,
인풋에 추가되는 밸류를 newTodo로 할당한다. 그리고 밸류는 비운다.
그리고 newTodo 리스트는 새로운 함수로 만든다.

function handleSubmit(event) {
  event.preventDefault();
  const newTodo = todoInput.value;
  todoInput.value = "";
  paintTodos(newTodo);
}

새로운 함수를 정의한다.
html에 li, span을 만들고, li의 차일드로 span을 지정한다.
span에 내부 텍스트로 newTodo를 할당하고,
todoList 영역에 li를 차일드로 지정해준다.

function paintTodos(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  li.appendChild(span);
  span.innerText = newTodo;
  todoList.appendChild(li);
}