Merge pull request #5 from ink-0/week1/3/checkBox

[week1] checkBox 구현

Author: ink-0

src/js/TodoApp.js

@@ -12,7 +12,7 @@ export default function TodoApp($app) {
         edit: '',
       },
       {
-        idx: 2,
+        idx: 1,
         content: "I'm Tami",
         state: '',
         edit: '',
@@ -28,26 +28,13 @@ export default function TodoApp($app) {
 
   new TodoInput({
     $app,
-    onAdd: (contents) => {
-      const prevIdx = this.state.todoes[this.state.todoes.length - 1].idx;
-
-      const newTodo = {
-        idx: prevIdx + 1,
-        content: contents,
-        state: '',
-        edit: '',
-      };
-      this.state.todoes.push(newTodo);
-
-      this.setState({
-        ...this.state,
-      });
-    },
+    onAdd: (contents) => addTodo(contents),
   });
 
   const todoList = new TodoList({
     $app,
     initialState: this.state.todoes,
+    onToggle: (idx) => toggleTodo(idx),
   });
   const todoCount = new TodoCount({
     $app,
@@ -60,4 +47,34 @@ export default function TodoApp($app) {
     });
   };
   init();
+
+  const addTodo = (contents) => {
+    const todos = this.state.todoes;
+    const nextIdx = Math.max(0, ...todos.map((todo) => todo.idx)) + 1;
+    console.log('next', nextIdx);
+    const newTodo = {
+      idx: nextIdx,
+      content: contents,
+      state: '',
+      edit: '',
+    };
+    this.state.todoes.push(newTodo);
+
+    this.setState({
+      ...this.state,
+    });
+  };
+
+  const toggleTodo = (idx) => {
+    const todos = this.state.todoes;
+
+    todos.map((todo) => {
+      if (todo.idx === parseInt(idx)) {
+        todo.state = todo.state === '' ? 'complete' : '';
+      }
+    });
+    this.setState({
+      ...this.state,
+    });
+  };
 }

src/js/TodoCount.js

@@ -12,7 +12,8 @@ export default function TodoCount({ $app, initialState }) {
 
   this.render = () => {
     const todoCountTemplate = `
-      <span class="todo-count">총 <strong>${this.state}</strong> 개</span><ul class="filters">
+      <span class="todo-count">총 <strong>${this.state}</strong> 개</span>
+      <ul class="filters">
         <li>
           <a class="all selected" href="#">전체보기</a>
         </li>

src/js/TodoList.js

@@ -1,4 +1,4 @@
-export default function TodoList({ $app, initialState }) {
+export default function TodoList({ $app, initialState, onToggle }) {
   //렌더링할 DOM 생성
 
   this.state = initialState;
@@ -12,22 +12,23 @@ export default function TodoList({ $app, initialState }) {
     this.state = nextState;
     this.render();
   };
-  this.$target.addEventListener('click', (e) => {});
 
   this.$target.addEventListener('click', (e) => {
-    console.log(e.target.className);
-    console.log(e);
-    const $node = e;
+    const $node = e.target;
     const { nodeId } = $node.dataset;
-    console.log('nodeid', nodeId);
+    if (nodeId) {
+      this.toggleTodoItem(nodeId);
+    }
   });
-  this.toggleTodo = (e) => {};
+  this.toggleTodoItem = (nodeId) => {
+    onToggle(nodeId);
+  };
 
   this.render = () => {
     const todoTemplate = `${this.state
       .map(
         (todo, idx) =>
-          `<li >
+          `<li class="${todo.state === 'complete' ? 'completed' : ''}">
           <div class="view">
             <input class="toggle" type="checkbox" data-node-id=${todo.idx} />
             <label class="label">${todo.content}</label>