[1주차] 오대균 미션 제출합니다.

script.js

@@ -1,3 +1,4 @@
+// ############################## init ##############################
 // localStorage에서 todo elements 가져오기
 const unparsedTODOS = localStorage.getItem('todos');
 const TODOS = unparsedTODOS
@@ -12,17 +13,27 @@ const TODOS = unparsedTODOS
 let nextIdx = TODOS.length; // idx값을 중복되지 않게 설정하도록 초기값 지정
 const ul = document.querySelector('.todoList'); // child node를 추가/제거 하기 위해 변수에 저장
 
+// in memory에 저장된 todo list를 view에 display
+for (const todo of TODOS) {
+  addNewTodoLi(todo);
+}
+
+const addBtn = document.querySelector('.addBtn');
+addBtn.addEventListener('click', handleClickAddBtn);
+
+// ############################## core functions ##############################
 // view update
-const updateView = () => {
+function updateView() {
   while (ul.hasChildNodes()) {
     ul.removeChild(ul.firstChild);
   }
   for (const todo of TODOS) {
     addNewTodoLi(todo);
   }
-};
+}
 
-const addNewTodoLi = (todo) => {
+// ul에 list들을 삽입
+function addNewTodoLi(todo) {
   const newLi = document.createElement('li');
   const contentDiv = document.createElement('div');
   const fromDateDiv = document.createElement('div');
@@ -41,63 +52,81 @@ const addNewTodoLi = (todo) => {
   deleteBtn.innerHTML = 'delete';
   deleteBtn.className = 'deleteBtn';
 
+  doneBtn.addEventListener('click', handleClickDoneBtn);
+  deleteBtn.addEventListener('click', handleClickDeleteBtn);
+
   newLi.appendChild(contentDiv);
   newLi.appendChild(fromDateDiv);
   newLi.appendChild(toDateDiv);
   newLi.appendChild(doneBtn);
   newLi.appendChild(deleteBtn);
 
-  doneBtn.addEventListener('click', (e) => {
-    const idx = e.currentTarget.parentNode.id;
-    const clickedLi = document.getElementById(idx);
-    if (clickedLi.classList.contains('done'))
-      clickedLi.classList.remove('done');
-    else clickedLi.classList.add('done');
-
-    let i;
-    for (i = 0; i < TODOS.length; i++) {
-      if (TODOS[i].idx == idx) {
-        TODOS[i].isDone = !TODOS[i].isDone;
-        break;
-      }
-    }
-    const todo = TODOS[i];
-    TODOS.splice(i, 1);
-
-    pushTodo(todo);
-    updateView();
-    localStorage.setItem('todos', JSON.stringify(TODOS));
-  });
-
-  deleteBtn.addEventListener('click', (e) => {
-    const idx = e.currentTarget.parentNode.id;
-    const clickedLi = document.getElementById(idx);
-    ul.removeChild(clickedLi);
-
-    let i;
-    for (i = 0; i < TODOS.length; i++) {
-      if (TODOS[i].idx == idx) break;
-    }
-    TODOS.splice(i, 1);
-
-    localStorage.setItem('todos', JSON.stringify(TODOS));
-  });
-
   newLi.id = todo.idx;
   if (todo.priority === 3) newLi.classList.add('high');
   else if (todo.priority === 2) newLi.classList.add('mid');
   else newLi.classList.add('low');
 
   if (todo.isDone) newLi.classList.add('done');
   ul.appendChild(newLi);
-};
+}
 
-for (const todo of TODOS) {
-  addNewTodoLi(todo);
+// 기준에 따라 정렬되어 memory에 저장되도록 push
+function pushTodo(todo) {
+  if (todo.isDone) {
+    TODOS.splice(TODOS.length, 0, todo);
+    return;
+  }
+  let i = 0;
+  for (; i < TODOS.length; i++) {
+    if (TODOS[i].isDone) break;
+    if (TODOS[i].priority < todo.priority) break;
+    else if (TODOS[i].priority === todo.priority) {
+      if (TODOS[i].fromDate >= todo.fromDate) break;
+    }
+  }
+  TODOS.splice(i, 0, todo);
 }
 
-const addBtn = document.querySelector('.addBtn');
-addBtn.addEventListener('click', () => {
+// ############################## click handlers ##############################
+// done button click event handler
+function handleClickDoneBtn(e) {
+  const idx = e.currentTarget.parentNode.id;
+  const clickedLi = document.getElementById(idx);
+  if (clickedLi.classList.contains('done')) clickedLi.classList.remove('done');
+  else clickedLi.classList.add('done');
+
+  let i;
+  for (i = 0; i < TODOS.length; i++) {
+    if (TODOS[i].idx == idx) {
+      TODOS[i].isDone = !TODOS[i].isDone;
+      break;
+    }
+  }
+  const todo = TODOS[i];
+  TODOS.splice(i, 1);
+
+  pushTodo(todo);
+  updateView();
+  localStorage.setItem('todos', JSON.stringify(TODOS));
+}
+
+// delete button click event handler
+function handleClickDeleteBtn(e) {
+  const idx = e.currentTarget.parentNode.id;
+  const clickedLi = document.getElementById(idx);
+  ul.removeChild(clickedLi);
+
+  let i;
+  for (i = 0; i < TODOS.length; i++) {
+    if (TODOS[i].idx == idx) break;
+  }
+  TODOS.splice(i, 1);
+
+  localStorage.setItem('todos', JSON.stringify(TODOS));
+}
+
+// add button click event handler
+function handleClickAddBtn() {
   const newTodo = {};
   const content = document.querySelector('.content');
   const priorities = document.querySelectorAll("input[name='priority']");
@@ -117,27 +146,11 @@ addBtn.addEventListener('click', () => {
   newTodo.isDone = false;
 
   pushTodo(newTodo);
-  localStorage.setItem('todos', JSON.stringify(TODOS));
   updateView();
+  localStorage.setItem('todos', JSON.stringify(TODOS));
 
   content.value = null;
   priorities[0].checked = true;
   fromDate.value = null;
   toDate.value = null;
-});
-
-const pushTodo = (todo) => {
-  if (todo.isDone) {
-    TODOS.splice(TODOS.length, 0, todo);
-    return;
-  }
-  let i = 0;
-  for (; i < TODOS.length; i++) {
-    if (TODOS[i].isDone) break;
-    if (TODOS[i].priority < todo.priority) break;
-    else if (TODOS[i].priority === todo.priority) {
-      if (TODOS[i].fromDate >= todo.fromDate) break;
-    }
-  }
-  TODOS.splice(i, 0, todo);
-};
+}