[10기 김장후] TodoList with CRUD

src/App.js

@@ -1,5 +1,25 @@
-export default class App {
-  constructor($target) {
-    console.log($target);
+import NewTodoInput from './components/NewTodoInput.js';
+import Component from './core/component.js';
+import State from './core/State.js';
+import { $ } from './utils/utils.js';
+
+export default class App extends Component {
+  setState() {
+    this.todoList = new State([]);
+  }
+
+  render() {
+    this.mountChildren();
+  }
+
+  mountChildren() {
+    new NewTodoInput($('#new-todo-title'), {
+      todoList: this.todoList,
+      onSubmitTodo: this.onSubmitTodo,
+    });
+  }
+
+  onSubmitTodo() {
+    console.log(this.todoList);
   }
 }

src/components/NewTodoInput.js

@@ -0,0 +1,20 @@
+import Component from '../core/component.js';
+
+export default class NewTodoInput extends Component {
+  render() {}
+
+  bindEvents() {
+    this.$target.addEventListener('keyup', ({ key }) => {
+      if (key !== 'Enter') return;
+      this.addTodo(this.$target.value);
+      this.$target.value = '';
+      this.props.onSubmitTodo();
+    });
+  }
+
+  addTodo(todo) {
+    const todoList = this.props.todoList.get();
+    todoList.push(todo);
+    this.props.todoList.set(todoList);
+  }
+}