해야 할 일 list 만들기.

목표

해야 할 일을 입력해서 화면에 띄운다.

그리고 삭제 버튼을 눌러서 없앨 수 있다.

작동원리 파악

1. html에 ul태그를 만들어 놓고 submit 할 때마다 li태그가 생성.
2. li안에 삭제 button 태그와 입력값이 들어갈 span태그를 만들어서 넣자.
3. span에 input에 입력값을 넣고 span을 화면에 띄우고 localStorage에 저장.
4. 삭제 버튼을 누르면 해당 li태그 포함하는 화면과 저장 값 둘 다 지워진다. 
5. 저장 값이 있다면 꺼내서 화면에 띄움.

※ 여러 리스트를 추가한다는 것을 잊지 말기. 생성하고 지울 수 있어야 한다.

1. 필요한 태그 만들기.

<div class="todo_list">
  <form class="todo_form">
    <div>오늘의 할 일</div>
    <input type="text">
  </form>
  <ul class="today_list">
  </ul>
</div>

const toDoForm = document.querySelector(".todo_form");
const toDoInput = document.querySelector(".todo_form input");
const todayList = document.querySelector(".today_list");

function handleToDoSubmit(event) {
  event.preventDefault();
  const li = document.createElement("li");
  const span = document.createElement("span");
  const btn = document.createElement("button");
  btn.innerText = "삭제";
  todayList.appendChild(li);
  li.appendChild(span);
  li.appendChild(btn);
}

toDoForm.addEventListener("submit", handleToDoSubmit);

2. 입력값 나오게 하고 localStorage에 저장

여러 개의 리스트를 어떻게 저장할 것인가?

localStorage value값을 배열로 만든다. 이유는 한 가지 key에 여러 개의 value를 가져야 선택하거나 볼 때 편하다.

입력값을 대상으로 하면 값이 중복될 때 지정할 수 없으니 object로 받아와서 고유 id를 주자.

고유 id는 매 번 변경되는 현재 date 값으로 지정하자.

const toDoForm = document.querySelector(".todo_form");
const toDoInput = document.querySelector(".todo_form input");
const todayList = document.querySelector(".today_list");

let toDos = [];

function handleToDoSubmit(event) {
  event.preventDefault();
  const li = document.createElement("li");
  const span = document.createElement("span");
  const btn = document.createElement("button");
  btn.innerText = "삭제";
  todayList.appendChild(li);
  li.appendChild(span);
  li.appendChild(btn);
  const newTodo = toDoInput.value;
  toDoInput.value = "";
  const newTodoObj = {
        text : newTodo,
        id : Date.now(),
  }
  toDos.push(newTodoObj)
  span.innerText = newTodo.text;
  localStorage.setItem("todos", JSON.stringify(toDos));
}

toDoForm.addEventListener("submit", handleToDoSubmit);

text와 id object를 가진 배열을 toDos배열에 넣어준다.

localStorage에는 string만 들어갈 수 있다. 배열을 string으로 변경해준다.

JSON.stringify()

어떤 javaScript code든 string으로 만들어준다. 

3. 삭제 버튼 기능

여러 가지 삭제 버튼을 만들면 그 모든 버튼이 같은 이벤트, 같은 함수로 작동한다는 것을 주의한다.

1. 삭제 이벤트와 함수를 생성하자.

  toDos.push(newTodoObj);
  span.innerText = newTodoObj.text;
  localStorage.setItem("todos", JSON.stringify(toDos));
  li.id = newTodoObj.id;
  btn.addEventListener("click",deleteToDo); // add delete event
}

li 태그의 id를 newTodoObj에 있는 id와 일치하게 해 li태그를 고유하게 만든다.

2. delete 함수

대상 설정

function deleteToDo(event) {
  console.dir(event);
}

클릭해도 어느 버튼이 클릭되었는지 모른다. 어느 리스트인지 대상을 지정하자.

event를 상세히 보면 target안 parentElement에서 부모를 볼 수 있다. 이걸 대상으로 지정하자.

function deleteToDo(event) {
  const a = event.target.parentElement;
  a.remove();
  toDos = toDos.filter((b) => b.id !== parseInt(a.id));
  localStorage.setItem("todos", JSON.stringify(toDos));
}

클릭하면 

remove()를 사용해 대상 부모를 화면에서 제거.

filter를 이용해 toDos배열 안에 id값과 클릭된 a의 id가 일치하지 않는 값만 toDos 배열에 반환한다.

새로운 toDos를 localStorage에 설정한다.

클릭된 요소를 localStorage에서 삭제한 것이 아니라 제외시키고 다시 배열을 생성한 것.

(헷갈린다면 (b) => b.id == parseInt(a.id)으로 해볼 것)

4. 저장 값 불러오기.

localStorage.getItem("todos")로 불러와야 한다.

const savedToDos = localStorage.getItem("todos")
console.log(savedToDos)

localstorage가 비어있는 상태에서 실행하면 null이 나온다.

그래서 if savedTodos가 localStorage에 있다면 혹은 null이 아니라면 savedTodos를 JSONparse 한다.

if (savedToDos !== null) {
 const parsedToDos = JSON.parse(savedToDos);
 console.log(parsedToDos);
}

parseTodos를 console.log 하면 값이 array로 나온다.

이 array에 있는 각각의 아이템에 대해서 함수를 실행할 수 있게 해 준다.

.forEach() 사용.

실행될 함수는 localStorage에 저장된 값을 화면에 불러와야 한다. 

  const li = document.createElement("li");
  const span = document.createElement("span");
  const btn = document.createElement("button");
  btn.innerText = "삭제";
  todayList.appendChild(li);
  li.appendChild(span);
  li.appendChild(btn);
  btn.addEventListener("click",deleteToDo);
  li.id = newTodoObj.id;
  span.innerText = newTodo.text;

해당 코드를 따로 함수로 만들어 준다.

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value = "";
  const newTodoObj = {
        text : newTodo,
        id : Date.now(),
  }
  toDos.push(newTodoObj);
  localStorage.setItem("todos", JSON.stringify(toDos));
  paintToDo(newTodoObj);
}

function paintToDo(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  const btn = document.createElement("button");
  btn.innerText = "삭제";
  todayList.appendChild(li);
  li.appendChild(span);
  li.appendChild(btn);
  btn.addEventListener("click",deleteToDo);
  li.id = newTodo.id;
  span.innerText = newTodo.text;
}

newTodoObj.id -> newTodo.id로 변경.

localStorage에 저장하는 함수와 화면에 값을 띄우는 함수로 나눴다.

이제 forEach()와 화면에 값을 띄우는 함수를 연결한다.

if (savedToDos !== null) {
  const parsedToDos = JSON.parse(savedToDos);
  toDos = parsedToDos;
  parsedToDos.forEach(paintToDo)
}

 

중복되는 값을 정리한다.

function saveToDos() {
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

2번 이상 반복되는 값을 함수로 만들어 준다.

완료

    <div class="todo_list">
        <form class="todo_form">
          <div>오늘의 할 일</div>
          <input type="text">
        </form>
        <ul class="today_list">
        </ul>
      </div>
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-3.3.2.js"></script>
    <script src="index.js"></script>

const toDoForm = document.querySelector(".todo_form");
const toDoInput = document.querySelector(".todo_form input");
const todayList = document.querySelector(".today_list");

let toDos = [];

function handleToDoSubmit(event) {
  event.preventDefault();
  const newTodo = toDoInput.value;
  toDoInput.value = "";
  const newTodoObj = {
        text : newTodo,
        id : Date.now(),
  }
  toDos.push(newTodoObj);
  saveToDos();
  paintToDo(newTodoObj);
}

function paintToDo(newTodo) {
  const li = document.createElement("li");
  const span = document.createElement("span");
  const btn = document.createElement("button");
  btn.innerText = "삭제";
  todayList.appendChild(li);
  li.appendChild(span);
  li.appendChild(btn);
  btn.addEventListener("click",deleteToDo);
  li.id = newTodo.id;
  span.innerText = newTodo.text;
}

function deleteToDo(event) {
  const a = event.target.parentElement;
  a.remove();
  toDos = toDos.filter((b) => b.id !== parseInt(a.id));
  saveToDos();
}

function saveToDos() {
  localStorage.setItem("todos", JSON.stringify(toDos));
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos =localStorage.getItem("todos");
if (savedToDos !== null) {
	const parsedToDos = JSON.parse(savedToDos);
  toDos = parsedToDos;
  parsedToDos.forEach(paintToDo);
}