JS로 momentum만들기-3 (To Do List)

To Do List

오늘의 목표 To Do List만들기 입니다.

To Do List는 사용가 form을 이용해 값을 입력하면 해당 값을 Local Storage에 저장하고 이를 화면에 표시하고 X버튼을 눌러 각 To Do를 삭제 할 수 있는 구성으로 이루어져있습니다.

 

우선 HTML파일에 List를 저장할 수 있도록 

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

form과 Ul을 이용해 입력을 받는 곳과 표시할 곳을 만들어 줍니다.

 

그 후 입력에 대해서 어떻게 처리할지 정해야합니다.

우리가 해야 할 것은 크게 3가지 입니다.

 

1. 기존에 저장된 값을 불러와준다.

2. 새로운 입력이 있는 경우 이를 저장하고 화면에 표시한다.

3. X버튼이 눌리는 경우 해당 To Do를 삭제하고 다시 저장한다.

 

여기서 할일목록은 배열로 관리를 하겠습니다.

let toDos = [];

 

그다음 To Do를 화면에 표시하는 것 부터 보겠습니다.

function paintToDo(text) {
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length + 1;
    delBtn.innerText = "❌";
    delBtn.addEventListener("click", deleteToDo);
    span.innerText = text;
    li.appendChild(delBtn);
    li.appendChild(span);
    li.id = newId;
    toDoList.appendChild(li);
    const toDoObj = {
        text: text,
        id: newId
    }
    toDos.push(toDoObj);
    saveToDos();
}

위의 방식은 text값이 들어오면 li객체와 삭제를 위한 버튼을 만들고 값을 저장할 span객체를 만들어줍니다.

그 후 li>delBtn, span의 방식으로 li안에 2가지 객체를 넣어 줌으로 한 줄에 표시 될 수 있도록 해줍니다.

이때 버튼을 클릭시에 삭제를 위해서 deleteToDo함수를 EventListener로 만들어줍니다.

또 한 ID를 만드는 이유는 삭제시 클릭된 li가 어떤 것인지 구분을 하기 위함입니다.

그 뒤 toDo Object를 만들어 배열에 저장하고 만들어진 li를 appendChild를 사용해서 화면 상에 표시 될 수 있도록 만들어 줍니다.

 

이렇게 되면 paintToDo()를 호출함으로 화면에 ToDo 객체를 표시하는 것은 끝났습니다.

그 후 저장된 값을 불러오는 부분을 보겠습니다.

function loadToDos() {
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if (loadedToDos !== null) {
        const parsedToDos = JSON.parse(loadedToDos);
        parsedToDos.forEach(function (toDo) {
            paintToDo(toDo.text);
        })
    }
}

function init() {
    loadToDos();
    toDoForm.addEventListener("submit", handleSubmit);
}

위의 코드는 LocalStorage를 사용하여 저장된 값을 불러와 화면에 paintToDo함수를 이용해 표시해주는 함수를 나타냅니다.

 

그 다음 새로운 To Do를 저장하는 방법을 보겠습니다.

function handleSubmit(event) {
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value = "";
}

function saveToDos() {
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
}

위의 두 함수는 할 일을 입력후 엔터를 누르면 해당값을 paintToDo함수를 이용해 저장하고 saveToDos는 paintToDo함수 안에서 호출이 되면서 해당 내용을 LocalStorage에 저장해줍니다. 이때 JSON을 사용해서 저장을 함으로써 객체를 String화 해줄수 있습니다.

 

마지막으로 삭제 부분을 보겠습니다.

function deleteToDo(event) {
    const btn = event.target;
    const li = btn.parentNode;
    toDoList.removeChild(li);
    const cleanToDos = toDos.filter(function (toDo) {
        return toDo.id !== parseInt(li.id);
    });
    toDos = cleanToDos;
    saveToDos();
}

삭제는 다음과같이 이뤄집니다.

X버튼을 클릭시 클릭한 li의 id를 찾아 삭제하게 되는데 이를 위해서 target을 사용해 해당 li를 ul에서 부터 삭제시키고 filter를 사용해서 클릭된 id를 제외한 나머지 것들만 남도록 하여 이를 배열에 다시 저장하는 방식을 사용했습니다.