TO DO LISTの追加

11346 ワード
preventDefault テキストリンク
Htmlファイルの変更
同様に、to do listもhtmlにスペースを作成します.
<head>
  <meta charset="utf-8" />
  charset을 추가해줘서 이모지를 인식할 수 있게 해준다.
</head>
<form class="js-toDoForm">
  <input type="text" placeholder="Write a to do" />
</form>
<ul class="js-toDoList"></ul>
<script src="todo.js"></script>
<!--그리고 리스트만 취급하는 파일인 todo.js을 추가해준다. -->
todo.jsファイルを作成します.
const toDoForm = document.querySelector(".js-toDoForm"),
  toDoInput = toDoForm.querySelector("input"),
  toDoList = document.querySelector(".js-toDoList");
// 역시나 다뤄야할 부품에다 이름을 붙여준다.

const TODOS_LS = "toDos";

function paintToDo(text) {
  // 아래의 코드는 뼈대를 만드는 작업.
  const li = document.createElement("li"); // 말그대로 <li> 태그를 자바스크립트로 만드는 거다.
  const delBtn = document.createElement("button"); //이 버튼을 눌러서 삭제하게 만들거다 나중에.
  delBtn.innerText = "💢"; // 이모지가 깨진다면 index.html 에들어가서 head 태그 안에 <meta charset="UTF-8" /> 를 추가해주자.
  const span = document.createElement("span"); // todolist 에 입력된 정보가 담기는 태그이다.
  span.innerText = text; // input의 값이 나옴. span을 쓰는 이유는 더 좁은 범위의 text값을 수정할때 span(inline)태그를 사용한다. 참고로 div 태그는 더 큰 범위를 수정할때 block element의 형태로 사용됨
  // P.S: innertext 와 innerhtml 의 차이는? innerText는 말그대로 코드까지 텍스트로 읽어버리는거고 innerHtml은 코드는 코드로 읽고 적용해준다.
  li.appendChild(delBtn); // li(리스트 태그) 안에다가 delbtn을 넣은것임
  li.appendChild(span); // li(리스트 태그) 안에다가 span을 넣은것임

  toDoList.appendChild(li);
} // to do list 에 데이터를 입력했을때 담을 수 있는 틀(parent, chile 태그)들을 만드는 과정이다.

function handlesubmit(event) {
  event.preventDefault();
  const currentValue = toDoInput.value;
  paintToDo(currentValue); //input의 값을 currentvalue에 집어넣는것임.
  toDoInput.value = ""; // input에 값을 입력하고나서 엔터누르면 초기화되면서 다시 입력가능하게 함.
}

// 요약: todolist 값을 입력하게 함.

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

function init() {
  loadToDos();
  toDoForm.addEventListener("submit", handlesubmit); // 이벤트 기능을 써서 엔터를 누르고 submit 하면 handlesubmit으로 가게끔 해놓았다.
}

init();

//p.s: father, children 이란 용어는 hierarchy 를 가리키는 것. nested 된 태그가 당연 children 이고 nest 하는 태그가 parent 이다.
//p.s: 함수안에 저장된 변수나 리스트는 함수밖에서 사용불가능. is not defined 라고 뜰것임. 그렇지 않으면 나도 모르는 사이 그 변수같은게 실행될 수 있음.
//p.s: 사용된 이벤트가 어떤 기능을 하는지 까먹었을 경우 사용된 이벤트를 변수에 저장하고 그 변수를 console.log 해서 보면 이해가능 ex)event.target
//만약 변수를 모든곳에 적용가능하게 하고 싶다고 하면 함수 밖에서 그냥 변수를 지정.
Ruby zip:zipfileに圧縮して複数のファイルをダウンロード
ASP.NETフィルタHTMLラベル改行とスペースのみを保持する方法