20191107. to-do list 웹사이트 js 부분

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

    toDoInput = toDoForm.querySelector("input"),

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

const TODOS_LS = "toDos";

/* 우선 변수 입력부터 한다. form태그와 input, list 의 변수를 입력한다. */

 

function init(){

    loadToDos();

    toDoForm.addEventListener("submit", handleSubmit);

};

 

init();

 

/* const toDos = localStorage.getItem(TODOS_LS); - TODOS_LS(=toDos)의 값을 toDos변수에 저장한다,

  toDoForm.addEventListener("submit", handleSubmit); - todo리스트입력부분에 submit가 되면 handleSubmit함수가 작동하도록 한다. handleSubmit함수는 이벤트를 초기화하고, currentValue값에 입력값을 받으며, painToDog함수를 실행하게 한다. */

 

function handleSubmit(event){

    event.preventDefault();

    const currentValue = toDoInput.value;

    paintToDo(currentValue);

    toDoInput.value = "";

 

};

 

*/ handleSubmit 함수는 이벤트 초기화, currentValue변수에 inputvalue 값을 넣고, paintToDo함수를 실행하여 li,button,span 을 생성시키며 li > button > span 식으로 위치를 지정해주도록한다. 

 toDoInput.value = ""; - 이 구문은 toDoInput.vlaue 값을 받아서 currentValue변수에 넣어줬기때문에 받은 값을 초기화 시켜주는 부분이다.  */

 

function paintToDo(text){

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

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

    delBtn.innerText = "X";

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

    span.innerText = text;

    li.appendChild(span);

    li.appendChild(delBtn);

    toDoList.appendChild(li);

};

 

/* 여기서 const li = document.createElement("li"); - 이러한 구문은 li태그를 생성시켜주는 것이다. 즉, li를 생성하여 li변수에 저장한것이다.

  const delBtn = document.createElement("button"); - button을 만들어서 delBtn 변수에 저장한것이다.

  delBtn.innerText = "X"; - button이 저장되어있는 delBtn변수에 "X"라는 텍스트를 삽입한다. 

   const span = document.createElement("span"); - span을 생성하여 span 변수에 저장한 것이다. 

  span.innerText = text;  span 변수안에 text(argument)를 넣어준다 즉, 입력된 값이 span에 들어가게 된다 .

   li.appendChild(span); - li변수 안에 span변수가 들어간다. 

   li.appendChild(delBtn); - li변수 안에 delBtn변수가 들어간다. 

  toDoList.appendChild(li); - toDoList는 html에서 ul변수의 class이다. 즉, ul 안에 li 변수를 넣어준다.  */

 

 

 

 

 

출처는 아카데미 니콜라스 강사의 수업