✏️ TIL

To Do List는 이전에 만든 greetings와 비슷하다.
다른 점은, To Do List이기 때문에 Hide 와 show기능이 따로 없을 예정.

📚 Algorithm

0. HTML에 아래 코드들을 추가한다

< script >
< form class = "js-toDoForm" >
< input type = "text" placeholder="Write a to do" / >
< ul class = "js-toDoList >

1. html의 .js-toDoForm(toDoForm), input(toDoInput), .js-toDoList(toDoList)을 querySelector로 불러온다.

2. 함수를 재생할 Function init를 생성한다.

3. Function loadToDos를 생성한다. (실행 : init)

뭔가를 로컬스토리지에서 load하는 역할이다.

const toDos = localStorage.getItem(TODOS_LS);

3-1. if문을 만들어서, toDos ≠ null 일경우 localStorage에 저장된 toDos를 불러오는 구문을 넣는다.
(ToDoList part2 참고)

4. init에서 toDoForm의 submit 이벤트를 감지하는 이벤트리스너를 실행한다.

toDoForm.addEventListener("submit", handleSubmit)

5. Function handleSubmit을 생성한다.

function handleSubmit(event){
  event.preventDefault(); 
  	//submit시 새로고침 및 리셋방지
  const currentValue = toDoInput.value;
  	// 상수에 input text 값 넣기
  paintToDo(currnetValue);
  	// input Text 값을 받아 화면에 띄우는 함수 실행
  toDoInput.value = "";
  	// input text box 비우기
}

6. Function paintToDo를 생성한다.

To Do List를 작성하고 submit 하면 화면에 리스트가 생성되도록 한다.
화면에 띄워질 toDoList는 각각 li와 id를 가지도록 한다.

function paintToDo(text){
  const li = document.createElement("li");
  	// HTML에 리스트 생성
  const delBtn = document.createElement("button");
  	// HTML에 버튼 생성
  delBtn.innerText = "X";
  	// 버튼 안에 X표시 삽입
  const span = document.createElement("span")
  	// HTML에 span 생성
  span.innerText = text;
  	// handleSubmit을 통해 제출된 값 span에 삽입
  li.appendChild(span);
  	// span을 list에 종속
  li.appentChild(delBtn);
  	// button을 list에 종속
  toDoList.appendchild(li);
  	// list를 toDoList(ul)에 종속
}

💡 Node.appendChild()
: Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니다.)