ToDoApp (JS 조작) 만들기

Todo 새로운 요소 추가하기

- addEventListener : 요소에 이벤트 추가

- 배열.unshift : 배열의 앞에 아이템 추가

- 요소.prepend : 요소안에 생성한 새로운 요소 앞에 추가

const list = document.getElementById("list");
const createBtn = document.getElementById("create-btn");

let todos = [];

createBtn.addEventListener("click", createNewTodo);

function createNewTodo() {
  const item = { id: new Date().getTime(), text: "", compelete: false };

  todos.unshift(item);

  const { itemEl, inputEl, editBtnEl, removeBtnEl } = createTodoElement(item);

  list.prepend(itemEl);

  inputEl.removeAttribute("disabled");

  inputEl.focus();
  saveToLocalStorage();
}

list 요소 만들기

- document.createElement : 요소 만들기

- 요소.classList.add : 클래스에 더하기

- input.type : 체크박스, 버튼, 날짜 등 여러 타입 존재

- checkbox.checked : 체크박스가 체크 되있는지 true / false

- 요소.setAttribute : 요소에 속성 추가

- disabled : input 요소 비활성화

- input.focus :  input 요소에 포커스 보내기

- 요소.remove : 요소 삭제

- 요소.append : 컨텐츠를 선택된 요소의 끝부분에 추가

- 요소.innerText : 요소 안에 글자

function createTodoElement(item) {
  const itemEl = document.createElement("div");
  itemEl.classList.add("item");

  const checkboxEl = document.createElement("input");
  checkboxEl.type = "checkbox";
  checkboxEl.checked = item.compelete

  if (item.compelete) {
    itemEl.classList.add("complete");
  }

  const inputEl = document.createElement("input");
  inputEl.type = "text";
  inputEl.value = item.text;
  inputEl.setAttribute("disabled", " ");

  const actionEl = document.createElement("div");
  actionEl.classList.add("actions");

  const editBtnEl = document.createElement("button");
  editBtnEl.classList.add("material-icons");
  editBtnEl.innerText = "edit";

  const removeBtnEl = document.createElement("button");
  removeBtnEl.classList.add("material-icons", "remove-btn");
  removeBtnEl.innerText = "remove_circles";

  checkboxEl.addEventListener("change", () => {
    item.compelete = checkboxEl.checked;

    if (item.compelete) {
      itemEl.classList.add("complete");
    } else {
      itemEl.classList.remove("complete");
    }
    saveToLocalStorage();
  });

  inputEl.addEventListener("blur", () => {
    inputEl.setAttribute("disabled", "");
    saveToLocalStorage()
  });

  inputEl.addEventListener("input", () => {
    item.text = inputEl.value;
  });

  editBtnEl.addEventListener("click", () => {
    inputEl.removeAttribute("disabled");
    inputEl.focus();
  });

  removeBtnEl.addEventListener("click", () => {
    todos = todos.filter((t) => t.id !== item.id);

    itemEl.remove();
    saveToLocalStorage();
  });

  actionEl.append(editBtnEl);
  actionEl.append(removeBtnEl);

  itemEl.append(checkboxEl);
  itemEl.append(inputEl);
  itemEl.append(actionEl);

  return { itemEl, inputEl, editBtnEl, removeBtnEl };
}

기록 저장 및 로딩 (localStorage)

- JSON.stringfy :  JavaScript 값이나 객체를 JSON 문자열로 변환

- setItem : 키와 값을 localStorage에 저장

- getItem : localStorage에서 값 가져오기

- JSON.parse : JSON 문자열의 구문을 분석하고,  결과에서 JavaScript 값이나 객체를 생성

function saveToLocalStorage() {
  const data = JSON.stringify(todos);

  localStorage.setItem("my_todos", data);
}

function loadFromLocalStorage() {
  const data = localStorage.getItem("my_todos");

  if (data) {
    todos = JSON.parse(data);
  }
}

화면에 보여주기

function displayTodos() {
  loadFromLocalStorage();

  for (let i = 0; i < todos.length; i++) {
    const item = todos[i];
    const { itemEl } = createTodoElement(item);

    list.append(itemEl);
  }
}
displayTodos();​

실행 결과

GitHub

GitHub - jeongdong99/TodoApp