[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - to do list만들기 / 20.06.08

출처

- Nomad Academy

 www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK

 

//1. 변수 작성 : 스크립트 파일이 따로 있어도 같은 변수를 정의하지 말자..
const toDoForm = document.querySelector(".js-toDoForm"),
  //form태그 뭐하는지 좀 봐라.. : 새로운 li추가해야 해서 정의한것.
  toDoInput = toDoForm.querySelector("input"),
  toDoList = document.querySelector(".js-toDoList");


//2. Function 실행
function init() {
  loadToDos();
  toDoForm.addEventListener("submit", handleSubmit);
}
init();


//2.1. Funtion value불러오기, If value값이 있으면 . . .
// 음.. 여기 이렇게 단어를 비슷한 단어로 굳이(?) 정의해야 하는 이유를 잘 모르겠다. 주목.

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


//2.2. Function 기본값 제거(input text에선 일단 무조건 넣어줌), 값 입력
function handleSubmit(event) {
  event.preventDefault();
  const currentValue = toDoInput.value;
  paintToDo(currentValue);
  toDoInput.value = "";
} //이건 왜 쓰는건가...TODO를 생성하고 삭제하는 기능


//2.2.1. Function li 생성 버튼
function paintToDo(text) {
  const li = document.createElement("li"); //li를 생성하는 태그
  const delBtn = document.createElement("button");
  delBtn.innerText = "❌";
  const span = document.createElement("span");
  span.innerText = text;

  li.appendChild(delBtn); //father (li) 안에 놓는 태그를 괄호안에 써주면 된다.
  li.appendChild(span);
  toDoList.appendChild(li);
}

const TODOS_LS = "toDos";

의 위치를 옮기니까 작동된다.

아니 쌤은 잘만 작동시키는데 왜 나만 이런거???

함수 위치는 아무데나 보내도 잘만 작동한다고 배웠는데

함수는 그런거고 객체정의하는건 별개라는건가?

그래두 위계는 다 갖춰서 적었는데 이해불가.