[VanillaJS] 투두리스트 구현하기(上)

1. html에 투두리스트 뼈대 생성하기

1. html 파일에 투두리스트 틀 만들기 (input부분, 리스트 부분)

index.html

    <form id="todo-form">
        <input type="text" placeholder="Write a To Do and Press Enter.">
    </form>
    <ul id="todo-list"></ul>

1. 새로운 할 일을 입력할 Form태그를 생성하고 그 안에 input 태그를 생성한다.

2. 아래에 투두리스트를 보이게 하도록 ul 태그를 생성한다.

3. ul 안의 li 태그는 자바스크립트로 동적으로 생성할 것이다.

 

 

2. 자바스크립트에서 투두리스트 요소 가져오기

todo.js

const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

 

input태그 요소를 자바스크립트에서 가져올 때 아래 두 가지 방법으로 가져올 수 있다.

 

const todoInput = document.querySelector("#todo-form input");

= id가 todo-form인 form 안에서 input을 찾기.

const todoInput = todoForm.querySelector("input");

document가 아닌 todoForm 에서 input 찾기.

 

위 두 가지 방법은 같은 동작을 함

 

 

2. 새로운 할일 입력하기

1. input에 할 일 입력하면 input칸 비워지게 만들기

todo.js

function handleToDOSubmit(event) {
    event.preventDefault();
}

todoForm.addEventListener("submit", handleToDOSubmit);

먼저 form의 submit 발생시 새로고침 현상 막기

 

function handleToDOSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";

.value = "" 로 submit 될 때마다 input 칸 비우기

그리고 newToDo에 input 에 입력된 값 저장

 

2. 입력한 할 일 list에 추가되도록 하기 _ paintToDo 함수

 

function handleToDOSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newToDo);
}

입력칸 비우기 전에 value를 newToDo 변수에 저장

paintToDo함수에 인자로 입력값 전달

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

 

전달받은 입력값을 li 태그 안의 span 태그에 삽입.

span 태그를 굳이 사용하는 이유는 li 태그 안에 span, button 두개를 사용해서

button으로 할 일 삭제하기 버튼을 생성하기 위함임

 

 

3. 할일 삭제하기 버튼 만들기

1. 삭제하기 버튼 형태 만들기

function paintToDo(newTodo) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    li.appendChild(span);
    li.appendChild(button);
    span.innerText = newTodo;
    button.innerText = "X";
    toDoList.appendChild(li);
}

 

2. X 버튼을 클릭하면 deleteToDo 함수가 실행되도록 하기

    button.addEventListener("click", deleteToDo);

 

3. 삭제할 요소 찾기

function deleteToDo(event) {
    console.log(event.target.parentNode.innerText);
}

X버튼을 클릭하면 여러 li 요소들중 어떤 span 요소가 클릭되었는지 찾아야 한다. 어떻게?

 

js의 배려를 이용해서.

 

js가 친절히 기본으로 전달해주는 정보가 많다. 이 정보를 사용하려면 우리는 생성한 함수에 인자만 추가해주면 된다. 

위의 event 인자처럼 인자를 넣어서 콘솔에 띄워보면 클릭된 것에 무수히 많은 정보가 담겨있음을 알 수 있다.

우리는 그 중에서 클릭된 요소의 부모노드를 알아내는 parentNode를 사용할 것이다.

 

parentNode를 사용하면 세번째 요소를 클릭했으면 그 요소의 부모노드인 li를 찾아준다.

우리는 그 요소를 받아서 remove()만 해주면 되는 것이다.

 

function deleteToDo(event) {
    const li = event.target.parentNode;
    li.remove();
}

How cool.