[Vanilla-JS] 5. Making a To Do List part One

To-do 리스트를 빌드해볼거다.

greetings했던것과 비슷하다.

 

todo.js 생성 후 html에 추가해보자.

 

 

그리고 toDoList를 입력 할 Form을 만들고,

그 아래에는 입력한 내용을 리스트 형태로 출력하기 위해 ul태그를 생성할거다.

---

만약에 toDos가 null이면 아무것도 하지 않을거다.

왜냐하면 greeting form과 다르게 이 form은 항상 입력창을 활성화 할것이므로(showing)

---

여기도 submit 했을 때 문제점을 해결하기 위해

이벤트를 가져올 때 event.preventDefault를 넣어줄거다.

 

---

엔터를 누르면 입력칸에 입력 내용이 그대로 남아있는데,

다음 내용을 입력할수있게 엔터를 누르면 공백이 되도록 만들어 줄거다.

 

---

이제 ul태그안에 li 를 만들어보자.

PaintToDo에 ul을 만들꺼다.

 

삭제버튼을 누르면 리스트를 지워주기 위해서 리스트, 텍스트, 버튼을 묶어서 관리할거다.

empty li를 만든 다음에 버튼, span을 만들어주고,

span과 삭제버튼을 li에 넣는다.

마지막으로 ul태그인 toDoList에 li를 집어주면된다. ( toDoList.appendChild(li) )

 

부모인 li안에 appendChild를 통해서 span 과 delBtn을 넣은것

 

---

<코드기록>

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = "toDos";

function loadToDos() {
    const toDos = localStorage.getItem(TODOS_LS);
    if (toDos !== null) {

    }
}

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

function paintToDo(text) {
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    delBtn.innerText = "✖";
    const span = document.createElement("span");
    span.innerText = text;
    li.appendChild(span);
    li.appendChild(delBtn);
    toDoList.appendChild(li); //ul태그

}

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

init();

<실행화면>

 

---

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.