[노마드코더-바닐라 JS로 크롬 앱 만들기]todo.js (1)

★html 코드 작성

<form action="" class="js-toDoForm">

     <input type="text" placeholder="Write a to do">

</form>

<ul class="js-toDoList">

</ul>

Greeting 부분 아래에 to-do list가 들어갈 form을 만든다.

 

★Todo.js 작성

const toDoform = document.querySelector(".js-toDoForm"),

    toDoInput = toDoForm.querySelector("input");

    toDoList = document.querySelector(".js-toDoList");

todo.js 파일에서 이렇게 객체를 가져온다.

 

★Init() 함수

function init(){

 

}

 

init();

니콜라스의 방식으로 init() 함수를 만들어서 init()를 실행시키는 코드를 먼저 작성해주고

 

function init(){

    loadToDos();

}

 

init();

init 함수안에 들어갈 코드는 loadToDos()라는 함수이다. 왜냐하면 뭔가를 load해야 하는데, 그건 로컬 스토리지에서 온 것임, 그리고 loadToDos()를 선언해준다.

 

★loadToDos 함수 선언

function loadToDos(){

    const loadedToDos = localStorage.getItem(TODOS_LS); //TODOS_LS = 'toDos'

    if(loadedToDos !== null){

 

    }

}

일단은 이렇게 짜준다. loadToDos함수는 실행되면 로컬스토리지에서 TODOS_LS(=’toDos’)를 불러오고, toDos가 null이랑 같으면 아무것도 하지 않을 것이다. 왜냐하면 이 form은 항상 showing일 것이므로 사실 할 게 없음. 그리고 이건 좀 이따가 할 것이다 왜냐하면 우리가 로컬 스토리지에서 할 일을 알면 그것들은 좀 이상한 걸 하면서 추가해줘야 함

 

function init(){

    loadToDos();

    toDoForm.addEventListener("submit",handleSubmit);

}

다시 init() 함수로 와서, toDoForm에 이벤트를 하나 추가한다. Submit(제출)했을 때 handleSubmit라는 함수를 실행하도록 하는 코드를 작성, 그리고 handleSubmit함수를 선언해야 한다.

 

★handleSubmit 함수 작성

function handleSubmit(event){

    event.preventDefault();

    const currentValue = toDoInput.value;

    paintToDo(currentValue);

 

}

handleSubmit라는 함수는, event 객체를 받아와서 event의 디폴트 행동을 취소시키는 메소드를 포함하고 있다.

그리고 현재 값(currentValue)은 toDoInput에 입력된 값으로 선언해준다.

그리고 paintToDo함수를 호출한다. 이따가 paintToDo라는 function을 만들 것이다.

 

function handleSubmit(event){

    event.preventDefault();

    const currentValue = toDoInput.value;

    paintToDo(currentValue);

    toDoInput.value="";

}

 

또 내가 하고싶은 건, 누군가 엔터를 눌렀을 때 todo를 생성하고 삭제하고 싶다.

그러려면 handleSubmit 아래에 toDoInput.value=””; 코드 한줄을 추가한다.

 

★ paintToDo 함수 작성

function paintToDo(text){

    const li = document.createElement("li");

    const span = document.createElement("span");

    const delBtn = document.createElement("button");

 

    delBtn.innerText = "❌";

    span.innerText = text;

 

    li.appendChild(span);

    li.appendChild(delBtn);

    toDoList.appendChild(li);

 

}

(paintToDo 함수의 전체 모습)

 

const li = document.createElement("li");

우리는 paintToDo함수 안에서 ul 아래에 li항목을 만들것이다. 평소에 우리가 한 querySelector라는 메소드는 그 말인 즉, 우리가 HTML에서 필요한 것들을 얻었다는 뜻이다. 이거랑은 다르게 우리가 만약에 뭔가를 생성하기를 원한다면? document.createElement(“생성할태그이름”) 를 이용한다.

 

const li = document.createElement("li");

const span = document.createElement("span"); // todo 항목의 텍스트

const delBtn = document.createElement("button"); //삭제 버튼

li의 자식으로는 to-do 항목을 나타내는 텍스트(span)와 그것을 삭제하는 버튼(button)이 있을 것이다. 이것들 각각을 createElement를 이용해 생성하는 코드를 작성해준다.

 

delBtn.innerText = "❌";

span.innerText = text;

delBtn(삭제버튼)의 값은 이모티콘X를 넣어주고 span의 innerText로는 text를 넣어준다. Text는 handleSubmit함수 안에서 paintToDo(currentValue)로 호출했을 때의 currentValue가 text가 되고, 즉 input text창에 텍스트를 입력한 후 submit 동작을 했을 때 전달된 값인 것이다.

 

li.appendChild(span);

li.appendChild(delBtn);

toDoList.appendChild(li);

li안에는 span(텍스트)과 delBtn(삭제버튼)을 자식으로 넣고, 그런 li를 ul의 자식으로 넣어야 하므로 toDoList의 자식으로 넣는다. (toDoList = ul의 클래스)

부모.appendChild(DOM객체); << DOM 객체를 부모의 마지막 자식으로 삽입하는 메소드