[10기 soonysoo] TodoList with CRUD

src/app.js

@@ -1,7 +1,7 @@
 import Component from "./core/component.js";
 import Filter from "./components/Filter.js"
-import Input from "./components/Filter.js"
-import TodoList from "./components/Filter.js"
+import Input from "./components/Input.js"
+import TodoList from "./components/TodoList.js"
 
 class App extends Component{ 
     setup(){
@@ -15,9 +15,9 @@ class App extends Component{
             <input id="new-todo-title" class="new-todo"
                 placeholder="할일을 추가해주세요"autofocus
             />
-            <main id="todo-list">
+            <main id="todos">
                 <input class="toggle-all" type="checkbox" />
-                <ul id="todo-list" class="todo-list">
+                <ul id="todo-list" class="todo-list"></ul>
                 <div id="todo-filter" class="count-container"></div>
             </main>
         `

src/components/Filter.js

@@ -1 +1,26 @@
-import Component from "../core/component.js";
+import Component from "../core/component.js";
+
+class Filter extends Component{
+    setup(){
+
+    }
+
+    template(){
+        return `
+        <span class="todo-count">총 <strong>0</strong> 개</span>
+        <ul class="filters">
+          <li>
+            <a class="all selected" href="#">전체보기</a>
+          </li>
+          <li>
+            <a class="active" href="#active">해야할 일</a>
+          </li>
+          <li>
+            <a class="completed" href="#completed">완료한 일</a>
+          </li>
+        </ul>
+        `
+    }
+}
+
+export default Filter;

src/components/Input.js

@@ -1 +1,13 @@
-import Component from "../core/component.js";
+import Component from "../core/component.js";
+
+class Input extends Component{
+    setup(){
+
+    }
+
+    template(){
+
+    }
+}
+
+export default Input;

src/components/TodoList.js

@@ -1 +1,38 @@
-import Component from "../core/component.js";
+import Component from "../core/component.js";
+
+class TodoList extends Component{
+    setup(){
+
+    }
+
+    template(){
+        return `
+          <li>
+            <div class="view">
+              <input class="toggle" type="checkbox"/>
+              <label class="label">새로운 타이틀</label>
+              <button class="destroy"></button>
+            </div>
+            <input class="edit" value="새로운 타이틀" />
+          </li>
+          <li class="editing">
+            <div class="view">
+              <input class="toggle" type="checkbox" />
+              <label class="label">완료된 타이틀</label>
+              <button class="destroy"></button>
+            </div>
+            <input class="edit" value="완료된 타이틀" />
+          </li>
+          <li class="completed">
+            <div class="view">
+              <input class="toggle" type="checkbox" checked/>
+              <label class="label">완료된 타이틀</label>
+              <button class="destroy"></button>
+            </div>
+            <input class="edit" value="완료된 타이틀" />
+          </li>
+        `
+    }
+}
+
+export default TodoList;