[10기 박은혜] TodoList with CRUD

index.html

@@ -17,7 +17,32 @@ <h1>TODOS</h1>
       />
       <main>
         <input class="toggle-all" type="checkbox" />
-        <ul id="todo-list" class="todo-list"></ul>
+        <ul id="todo-list" class="todo-list">
+          <!-- <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> -->
+        </ul>
         <div class="count-container">
           <span class="todo-count">총 <strong>0</strong> 개</span>
           <ul class="filters">
@@ -34,5 +59,6 @@ <h1>TODOS</h1>
         </div>
       </main>
     </div>
+    <script type="module" src="./src/js/index.js"></script>
   </body>
 </html>

src/js/component/TodoApp.js

@@ -0,0 +1,67 @@
+import TodoInput from '../component/TodoInput.js'
+import TodoList from '../component/TodoList.js'
+import TodoCount from '../component/TodoCount.js'
+
+import { storage } from '../util/Storage.js'
+
+function TodoApp () {
+  this.TODOS_KEY = "todos"
+  this.todos = (localStorage.getItem(this.TODOS_KEY)) ? storage.get(this.TODOS_KEY) : []
+
+  this.handleAddTodo = (todoItem) => {
+    const newTodos = this.todos.slice()
+    newTodos.push(todoItem)
+    this.setState(newTodos)
+    storage.set(this.TODOS_KEY, this.todos)
+  }
+
+  this.handleToggleTodo = (target) => {
+    const liItem = target.closest("li")
+    this.todos.map(item => {
+      if(item.id == target.id) {
+        if(item.status == "completed") {
+          item.status = "active"
+          liItem.classList.remove("completed")
+        } else if(item.status == "active") {
+          item.status = "completed"
+          liItem.classList.add("completed")
+        }
+      }
+    })
+    storage.set(this.TODOS_KEY, this.todos)
+  }
+
+  this.handleRemoveTodo = (target) => {
+    this.todos = this.todos.filter(item => {
+      if(item.id !== target.id) {
+        return item
+      }
+    })
+    this.setState(this.todos)
+    storage.set(this.TODOS_KEY, this.todos)
+  }
+
+  this.render = () => {
+    this.todoInput = new TodoInput({
+      onAddTodo: this.handleAddTodo.bind(this)
+    })
+    this.todoCount = new TodoCount({
+      todos: this.todos
+    })
+    this.todoList = new TodoList({
+      todos: this.todos,
+      onToggleTodo: this.handleToggleTodo.bind(this),
+      onRemoveTodo: this.handleRemoveTodo.bind(this)
+    })
+  }
+
+  this.setState = (nextState) => {
+    this.todos = nextState
+    this.todoList.setState(nextState)
+    this.todoCount.setState(nextState)
+  }
+
+  this.render()
+}
+
+export default TodoApp

src/js/component/TodoCount.js

@@ -0,0 +1,26 @@
+import $ from '../util/QuerySelector.js'
+
+function TodoCount({
+  todos
+}) {
+  this.todos = todos
+  this.todoCountGroup = $('.todo-count') 
+  this.todoCount = this.todoCountGroup.querySelector("strong") 
+
+  this.handleCountTodo = () => {
+    this.todoCount.textContent = this.todos.length
+  }
+
+  this.render = () => {
+    this.handleCountTodo()
+  }
+
+  this.setState = (nextState) => {
+    this.todos = nextState
+    this.render()
+  }
+
+  this.render()
+}
+
+export default TodoCount

src/js/component/TodoInput.js

@@ -0,0 +1,30 @@
+import $ from '../util/QuerySelector.js'
+
+function TodoInput({
+  onAddTodo
+}) {
+  this.onAddTodo = onAddTodo
+
+  this.newTodo = $('.new-todo')
+
+  this.handleAddTodo = () => {
+    this.newTodo.addEventListener("keyup", (e) => {
+      if(e.keyCode === 13) {
+        const todoItem = {
+          id: String(Date.now()),
+          todo : this.newTodo.value,
+          status: "active"
+        }
+        this.onAddTodo(todoItem)
+      }
+    })
+  }
+
+  this.render = () => {
+    this.handleAddTodo()
+  }
+
+  this.render()
+}
+
+export default TodoInput

src/js/component/TodoList.js

@@ -0,0 +1,105 @@
+import $ from '../util/QuerySelector.js'
+import { 
+  STATUS_ALL,
+  STATUS_ACTIVE,
+  STATUS_COMPLETED
+} from '../util/Constant.js'
+
+function TodoList ({
+  todos,
+  onToggleTodo,
+  onRemoveTodo
+}) {
+  this.todoList = $('.todo-list')
+  this.filters = $('.filters')
+
+  this.onToggleTodo = onToggleTodo
+  this.onRemoveTodo = onRemoveTodo
+  this.todos = todos
+
+  this.todoTemplate = (item) => {
+    return `<li id=${item.id} ${item.status === 'completed' ? "class=completed" : ""}>
+              <div class="view">
+                <input class="toggle" type="checkbox" id=${item.id} ${item.status === 'completed' ? "class=completed" : "class=checked"} />
+                <label class="label">${item.todo}</label>
+                <button class="destroy" id="${item.id}"></button>
+              </div>
+            </li>`
+  }
+
+  this.handleMapAllTodo = () => {
+    this.todos.map(item => {
+      this.todoList.insertAdjacentHTML('beforeend', this.todoTemplate(item))
+    })
+  }
+
+  this.handleMapActiveTodo = () => {
+    const todos = this.todos.filter(item => item.status === 'active')
+    todos.map(item => {
+      this.todoList.insertAdjacentHTML('beforeend', this.todoTemplate(item))
+    })
+  }
+
+  this.handleMapCompletedTodo = () => {
+    const todos = this.todos.filter(item => item.status === 'completed')
+    todos.map(item => {
+      this.todoList.insertAdjacentHTML('beforeend', this.todoTemplate(item))
+    })
+  }
+
+  this.mapTodos = (option = STATUS_ALL) => {
+    this.todoList.innerHTML = '';
+
+    switch(option) {
+      case STATUS_ALL :
+        this.handleMapAllTodo()
+        break;
+      case STATUS_ACTIVE :
+        this.handleMapActiveTodo()
+        break;
+      case STATUS_COMPLETED :
+        this.handleMapCompletedTodo()
+        break;
+    }
+  }
+
+  this.handleBindEvents = () => {
+    this.filters.addEventListener("click", e => {
+      if(e.target.nodeName === 'A') {
+        e.target.closest('ul')
+                .querySelectorAll('a')
+                .forEach((target) => target.classList.remove('selected'))
+        e.target.classList.add('selected')
+      }
+      if(e.target.classList.contains("active")) {
+        this.mapTodos(STATUS_ACTIVE)
+      } else if(e.target.classList.contains("completed")) {
+        this.mapTodos(STATUS_COMPLETED)
+      } else if(e.target.classList.contains("all")) {
+        this.mapTodos(STATUS_ALL)
+      }
+    })
+
+    this.todoList.addEventListener("click", e => {
+      if(e.target.classList.contains("destroy")) {
+        this.onRemoveTodo(e.target)
+      } else if(e.target.classList.contains("toggle")) {
+        this.onToggleTodo(e.target)
+      }
+    })
+  }
+
+  this.render = () => {
+    this.handleBindEvents()
+    this.mapTodos()
+  }
+
+  this.setState = (nextState) => {
+    this.todos = nextState
+    this.render()
+  }
+
+  this.render()
+}
+
+export default TodoList

src/js/index.js

@@ -0,0 +1,3 @@
+import TodoApp from "./component/TodoApp.js";
+
+const todo = new TodoApp()

src/js/util/Constant.js

@@ -0,0 +1,3 @@
+export const STATUS_ALL = "is-all"
+export const STATUS_ACTIVE = "is-active"
+export const STATUS_COMPLETED = "is-completed"

src/js/util/QuerySelector.js

@@ -0,0 +1,3 @@
+const $ = (selector) => document.querySelector(selector)
+
+export default $

src/js/util/Storage.js

@@ -0,0 +1,12 @@
+export const storage = {
+  get: (TODOS_DATA) => {
+    try {
+      return JSON.parse(localStorage.getItem(TODOS_DATA))
+    } catch(error) {
+      console.log(error)
+    }
+  },
+  set: (key, value) => {
+    localStorage.setItem(key, JSON.stringify(value))
+  }
+}