Week1/3/check box

src/css/style.css

@@ -171,6 +171,7 @@ main {
   border: none;
   -webkit-appearance: none;
   appearance: none;
+  cursor: pointer;
 }
 
 .todo-list li .toggle {

src/js/TodoApp.js

@@ -4,23 +4,47 @@ import TodoList from './TodoList.js';
 
 export default function TodoApp($app) {
   this.state = {
-    todoes: ["hi I'm Tami"],
-    count: 0,
+    todoes: [
+      {
+        idx: 0,
+        content: 'hi EveryOne',
+        state: '',
+        edit: '',
+      },
+      {
+        idx: 2,
+        content: "I'm Tami",
+        state: '',
+        edit: '',
+      },
+    ],
   };
 
   this.setState = (nextState) => {
     this.state = nextState;
     todoList.setState(this.state.todoes);
-    todoCount.setState(this.state.count);
+    todoCount.setState(this.state.todoes);
   };
 
   new TodoInput({
     $app,
     onAdd: (contents) => {
-      this.state.todoes.push(contents);
-      this.setState(this.state);
+      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,
+      });
     },
   });
+
   const todoList = new TodoList({
     $app,
     initialState: this.state.todoes,

src/js/TodoInput.js

@@ -6,6 +6,11 @@ export default function TodoInput({ $app, onAdd }) {
   this.$target.autofocus;
   $app.appendChild(this.$target);
 
+  this.setState = (nextState) => {
+    this.setState = nextState;
+    this.render();
+  };
+
   this.$target.addEventListener('keydown', (e) => {
     this.addTodoItem(e);
   });
@@ -18,10 +23,6 @@ export default function TodoInput({ $app, onAdd }) {
       $newTodoTarget.value = '';
     }
   };
-  this.setState = (nextState) => {
-    this.setState = nextState;
-    this.render();
-  };
 
   this.render = () => {};
 }

src/js/TodoItem.js

@@ -1,12 +1,21 @@
-// export default TodoItem = ({ $app, content }) => {
-//     this.state = content
-//     this.$target = document.createElement('li')
+export default TodoItem = ({ $app, content }) => {
+  this.state = content;
+  this.$target = document.createElement('li');
+  $app.appendChild(this.$target);
+  this.setState = (nextState) => {
+    this.state = nextState;
+    this.render();
+  };
+  this.render = () => {
+    const todoItemTemplate = `
+        <div class="view">
+          <input class="toggle" type="checkbox"/>
+          <label class="label">${this.state}</label>
+          <button class="destroy"></button>
+        </div>
+        <input class="edit" value=${this.state}/>
+      `;
 
-//     this.setState = (nextState) => {
-//         this.state = nextState;
-//         this.render()
-//     }
-//     this.render = () => {
-//         const todoItemTemplate = `<li>${this.state</li>`
-//     }
-// }
+    this.$target.innerHTML = todoItemTemplate;
+  };
+};

src/js/TodoList.js

@@ -12,18 +12,28 @@ 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 { nodeId } = $node.dataset;
+    console.log('nodeid', nodeId);
+  });
+  this.toggleTodo = (e) => {};
 
   this.render = () => {
     const todoTemplate = `${this.state
       .map(
         (todo, idx) =>
-          `<li>
+          `<li >
           <div class="view">
-            <input class="toggle" type="checkbox"/>
-            <label class="label">${todo}</label>
+            <input class="toggle" type="checkbox" data-node-id=${todo.idx} />
+            <label class="label">${todo.content}</label>
             <button class="destroy"></button>
           </div>
-          <input class="edit" value=${todo}/>
+          <input class="edit " value=${todo.content}/>
         </li>`
       )
       .join('')}`;