.png)
📍 Javascript를 공부했을 때 학습노트에 정리해둔 것을 옮겨왔다.
Making a To Do List (1)
<local storage>
- 작은 정보를 나의 유저 컴퓨터(브라우저)에 저장하는 방법.
- "localStorage.setitem(“Key”, Value)”
브라우저의 Console 창에서 localStorage.setItem을 설정했을 때
브라우저의 application 창에서 Local Storage 페이지를 보면
내가 setItem을 통해 설정한 값인 localStorage.setitem(“min”, true) 값이 저장되어 있는 것을 알 수 있다.
새로 고침을 해도 여전히 저장된 것을 확인할 수 있다.
To Do List를 위한 기본적인 Javascript 로직
const toDoForm = document.querySelector(".js-toDoForm");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.querySelector(".js-toDoList");
const TODOS_LS = "toDos";
function paintToDo(text) {
/* toDoList 가 기본적으로 어떻게 생겼을지 설정하고자 한다면 */
// 1. createElement( )를 사용하여 ul 안에 li를 먼저 생성해본다.
const li = document.createElement("li");
// 2. createElement( )를 사용하여 지우는 버튼도 생성하자.
const delBtn = document.createElement("button");
// 2-1. 지우는 버튼에도 innerText를 사용하여 (“❌”)도 집어넣자.
delBtn.innerText = "❌";
// 3. createElement( )를 사용하여 span도 생성하자.
const span = document.createElement("span");
// 3-1. span 에 innerText를 사용하여 text(submit function에서 온 값)를 집어넣자.
span.innerText = text;
// 3-2. text(submit function에서 온 값)
/* appendChild( ) 를 사용하여 위에서 설정한 값을 부모 element 안에 넣고자 한다면 */
// 1. li 라는 부모 element 안에 appendChild( )를 사용해 (delBtn)을 넣었다.
li.appendChild(delBtn);
// 2. li 라는 부모 element 안에 appendChild( )를 사용해 (span)을 넣었다.
li.appendChild(span);
// 3. 그리고 !최종적으로! toDoList("".js-toDoList") 안에 appendChild( )를 사용하여 (li)를 넣는다.
toDoList.appendChild(li);
}
/* event의 기본동작(preventDefault)을 변경하고자 할때 */
function handleSubmit(event) {
event.preventDefault();
const currentValue = toDoInput.value;
paintToDo(currentValue);
// 엔터를 눌렀을 때 todo를 생성하고 삭제하고 싶다면
toDoInput.value="";
}
/* user가 입력한 to do 를 불러오는 함수 (저장하는게 아님) */
function loadToDos() {
const toDos = localStorage.getItem(TODOS_LS);
if (toDos !== null) {
// user가 아무것도 입력하지 않는다면, 아무것도 하지 않는다.
}
}
function init() {
loadToDos();
toDoForm.addEventListener("submit", handleSubmit);
}
init();html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="js-clock">
<h1 class="js-title">00:00</h1>
</div>
<form class="js-toDoForm">
<input type="text" placeholder="Write a to do" />
</form>
<ul class="js-toDoList">
</ul>
<script src="todo.js"></script>
</body>
</html>
일단 공부가 '적성'에 맞는 개발자. 근성있습니다.