이전 파트에서 handle.ToDoSubmit() 함수를 만들었다.
- event.preventDefault(); 새로고침을 막는다.
- const newTodo = toDoInput.value; submit 하는 text를 저장한다.
- toDoInput.value = "";text 상자 안의 text를 초기화 시킨다.
이제 방금 전 입력한 텍스트가 페이지에서 보여지는 것을 원하기 때문에
그에 맞는 코드를 작성할 것이다.
1. html 돌아보기
html에 todo-list라는 id를 가진 ul태그를 작성해 놓았고,
새로운 text가 입력 될 때 마다 그 안에 li 태그를 생성하여 나열한다.
이것을 JS에서 관여 할수 있도록 코드를 짜는 것이 필요하다.
2. JavaScript todo list를 웹페이지에서 시각화 하기
- const li = document.createElement("li");
li를 입력했을 때 html 에서 li 태그를 생성하게 명령한다.
- const span = document.createElement("span");
span이 정확히 왜 필요한지는 현 시점에서는 알수 없으나
강의를 유추해보면 나중에 리스트 삭제시 필요한것 같다.
span이라는 const가 html내에서 span 태그를 만들게 한다.
- li.appendChild(span);
li 태그안에 자식을 span 태그로 하게 한다.
- span.innerText = newTodo;
span이라는 태그 안의 텍스트가 앞에서 설정한 new Todo 라는 객체가 되도록 한다.
newTodo는 text에 입력한 value값
ex:) text 상자 안에 "안녕하세요" 라고 입력 하면
newTodo는 "안녕하세요" 이므로 span 안의 text 는 "안녕하세요"가 된다.
- toDoList.appendChild(li);
html의 ul 태그 안에 li 속하게 한다.
(span을 li에 속하게 한 것과 동일)
3. 함수 paintTodo(newTodo) 를 함수 handleTodoSubmit()에 추가
text를 기입하고 submit 할 때마다 원하던 기능들을 실행시키기 위해 위에서 만든 함수
paintTodo(newTodo) 를 함수handleTodoSubmit() 에 추가 한다.
기존 함수 handleTodoSubmit()가 text 상자 안의 text를 초기화 하는 기능까지만 했다면
paintTodo(newTodo) 추가 후에는 제출한 text를 매번 html의 ul 안에서 li 태그와
그 안에 속하는 span태그를 만들고
span에 text로 남겨 웹 화면에서 보일 수 있는 것 까지 되 게 한다.
4. todo list
현재 만든 todo list는 아직 삭제를 하지 못하고,새로 고침시 초기화 되어 화면의 todo list가 날아가 버린다.
