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
//만약 변수를 모든곳에 적용가능하게 하고 싶다고 하면 함수 밖에서 그냥 변수를 지정.
'과연 이게 최선일까?' 끊임없이 생각하기