[mission002] TODOS 시스템에 비동기/온오프라인을 고려하여 업데이트하기

mission002/kimjieun/components/TodoCheck.js

@@ -0,0 +1,22 @@
+import { ACTIVE, COMPLETED, ALLSELECTED } from '../utils/constants.js'
+
+export default class TodoCheck {
+  constructor({ $selector }) {
+    this.$selector = $selector
+
+    this.init()
+  }
+
+  init = () => {
+    this.$selector.addEventListener('click', (e) => {
+      switch (e.target.className) {
+        case ACTIVE:
+          return this.onTodoCheck(ACTIVE)
+        case COMPLETED:
+          return this.onTodoCheck(COMPLETED)
+        default:
+          return this.onTodoCheck(ALLSELECTED)
+      }
+    })
+  }
+}

mission002/kimjieun/components/TodoCount.js

@@ -0,0 +1,13 @@
+export default class TodoCount {
+  constructor({ $selector }) {
+    this.$selector = $selector
+  }
+
+  createHtmlString = (data) => {
+    return `총 <strong>${data.length}</strong> 개`
+  }
+
+  createTodoCount = (data) => {
+    this.$selector.innerHTML = this.createHtmlString(data)
+  }
+}

mission002/kimjieun/components/TodoInput.js

@@ -0,0 +1,13 @@
+export default class TodoInput {
+  constructor({ $selector }) {
+    this.$selector = $selector
+
+    this.init()
+  }
+
+  init() {
+    this.$selector.addEventListener('keydown', (e) => {
+      this.onKeyDown(e)
+    })
+  }
+}

mission002/kimjieun/components/TodoList.js

@@ -0,0 +1,33 @@
+import { DESTROY, TOGGLE } from '../utils/constants.js'
+
+export default class TodoList {
+  constructor({ $selector }) {
+    this.$selector = $selector
+    this.init()
+  }
+
+  init = () => {
+    this.$selector.addEventListener('click', (e) => {
+      if (e.target.className === DESTROY) return this.onDeleteTodo(e.target.parentNode.dataset.idx)
+      if (e.target.className === TOGGLE) return this.onToggleTodo(e.target.parentNode.dataset.idx)
+    })
+  }
+
+  createLiClassName = (isCompleted) => isCompleted ? 'completed' : 'view'
+
+  createTodoListHtmlString = ({ content, isCompleted, _id }) => {
+    return `<li class=${this.createLiClassName(isCompleted)}>
+              <div data-idx=${_id} class="view">
+                <input class="toggle" type="checkbox" ${isCompleted === true && 'checked'}>
+                <label class="label">${content}</label>
+                <button class="destroy"></button>
+              </div>
+              <input class="edit" value="${content}">
+            </li>`
+  }
+
+  render = (data) => {
+    const $todoList = document.querySelector('#todo-list')
+    $todoList.innerHTML = data.map(this.createTodoListHtmlString).join('')
+  }
+}