woowacourse · bperhaps · Mar 22, 2021 · Mar 23, 2021 · Mar 23, 2021 · Mar 23, 2021
diff --git a/README.md b/README.md
@@ -1,104 +1,17 @@
-<p align="middle" >
-  <img width="200px;" src="./src/images/check_list.png"/>
-</p>
-<h2 align="middle">JS 투두리스트 스텝1</h2>
-<p align="middle">자바스크립트로 구현 하는 투두리스트</p>
-<p align="middle">
-  <img src="https://img.shields.io/badge/version-1.0.0-blue?style=flat-square" alt="template version"/>
-  <img src="https://img.shields.io/badge/language-html-red.svg?style=flat-square"/>
-  <img src="https://img.shields.io/badge/language-css-blue.svg?style=flat-square"/>
-  <img src="https://img.shields.io/badge/language-js-yellow.svg?style=flat-square"/>
-  <a href="https://github.com/daybrush/moveable/blob/master/LICENSE" target="_blank">
-    <img src="https://img.shields.io/github/license/woowacourse/javascript-lotto.svg?style=flat-square&label=license&color=08CE5D"/>
-  </a>
-</p>
-
 ## 🔥 Projects!
 
-<p align="middle">
-  <img width="400" src="./src/images/sample.gif">
-</p>
-
-<p align="middle">
-  <a href="https://next-step.github.io/js-todo-list-step1/">🖥️ 데모 링크</a>
-</p>
-
-<br/>
+todo list 만들기!
 
 ## 🎯 요구사항
 
-- [ ] todo list에 todoItem을 키보드로 입력하여 추가하기
-- [ ] todo list의 체크박스를 클릭하여 complete 상태로 변경. (li tag 에 completed class 추가, input 태그에 checked 속성 추가)
-- [ ] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
-- [ ] todo list를 더블클릭했을 때 input 모드로 변경. (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
-- [ ] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
-- [ ] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기
-- [ ] localStorage에 데이터를 저장하여, TodoItem의 CRUD를 반영하기. 따라서 새로고침하여도 저장된 데이터를 확인할 수 있어야 함
-
-<br/>
-
-## 🔔 참고사항
-`TodoItem`을 추가할 시 아래 템플릿을 활용하면 됩니다.
-```html
-<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>
-```
-
-<br/>
-
-## ⚙️ Before Started
-
-#### <img alt="Tip" src="https://img.shields.io/static/v1.svg?label=&message=Tip&style=flat-square&color=673ab8"> 로컬에서 서버 띄워서 손쉽게 static resources 변경 및 확인하는 방법
-
-로컬에서 웹서버를 띄워 html, css, js 등을 실시간으로 손쉽게 테스트해 볼 수 있습니다. 이를 위해서는 우선 npm이 설치되어 있어야 합니다. 구글에 `npm install` 이란 키워드로 각자의 운영체제에 맞게끔 npm을 설치해주세요. 이후 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있습니다.
-
-```
-npm install -g live-server
-```
-
-실행은 아래의 커맨드로 할 수 있습니다.
-
-```
-live-server 폴더명
-```
-
-<br>
-
-## 👏 Contributing
-
-만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요.
-
-<br>
-
-## 🐞 Bug Report
-
-버그를 발견한다면, [Issues](https://github.com/woowacourse/js-todo-list-step1/issues)에 등록해주세요.
-
-<br>
+- [x] todo list에 todoItem을 키보드로 입력하여 추가하기(엔터키를 누르면 아이템이 추가되야함)
+- [x] todo list의 체크박스를 클릭하여 complete 상태로 변경.
+- [x] li tag 에 completed class 추가, input 태그에 checked 속성 추가
+    - todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제
+- [x] todo list를 더블클릭했을 때 input 모드로 변경. (li tag 에 editing class 추가)
+    - 단, 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀
+- [x] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기
+- [x]todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기
 
 ## 📝 License
 

diff --git a/index.html b/index.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>이벤트 - TODOS</title>
     <link rel="stylesheet" href="./src/css/style.css" />
+
+    <script type="module" src="./src/js/app.js"></script>
   </head>
   <body>
     <div class="todoapp">
@@ -22,7 +24,7 @@ <h1>TODOS</h1>
           <span class="todo-count">총 <strong>0</strong> 개</span>
           <ul class="filters">
             <li>
-              <a class="all selected" href="/#">전체보기</a>
+              <a class="all selected" href="#">전체보기</a>
             </li>
             <li>
               <a class="active" href="#active">해야할 일</a>

diff --git a/src/js/app.js b/src/js/app.js
@@ -0,0 +1,30 @@
+import {InputItemCommand} from "./view/command/InputItemCommand.js";
+import {TodoController} from "./controller/TodoController.js";
+import {EditCommand} from "./view/command/EditCommand.js";
+import {EditCancelCommand} from "./view/command/EditCancleCommand.js";
+
+class App {
+    #controller = new TodoController()
+    #commands = [
+        new InputItemCommand(this.#controller),
+        new EditCommand(this.#controller),
+        new EditCancelCommand(this.#controller)
+    ]
+
+    run() {
+        this.#addKeyBoardEvent()
+    }
+
+    #addKeyBoardEvent() {
+        document.addEventListener('keyup', e => {
+            let cmd = this.#commands.find(cmd => cmd.isUsable(e))
+            if (cmd !== undefined) {
+                cmd.execute()
+            }
+        })
+    }
+
+}
+
+const app = new App()
+app.run()
diff --git a/src/js/controller/TodoController.js b/src/js/controller/TodoController.js
@@ -0,0 +1,61 @@
+import {Item} from "../model/Item.js"
+import {Todos} from "../model/Todos.js"
+import {Count} from "../model/Count.js";
+import {Filter} from "../model/Filter.js";
+
+
+export class TodoController {
+
+    constructor() {
+        this.eventHandler()
+    }
+
+
+    addItem(value) {
+        const todos = new Todos()
+
+        const item = new Item(value)
+        todos.addItem(item)
+
+        new Count().setCount()
+    }
+
+    editItem(id, value) {
+        const todos = new Todos()
+
+        todos.editItem(id, value)
+
+        new Count().setCount()
+    }
+
+    cancelEditing(id) {
+        const todos = new Todos()
+
+        todos.cancelEditing(id)
+
+        new Count().setCount()
+    }
+
+    eventHandler() {
+        let filters = document.getElementsByClassName('filters')[0];
+        let filter = new Filter()
+        filters.addEventListener('click', e => {
+            filter.filterHandler(e)
+
+            new Count().setCount(e.target)
+        })
+
+        let todoList =document.getElementById("todo-list")
+        let todos = new Todos()
+
+        todoList.addEventListener('click', e => {
+            todos.completeEventHandler(e)
+            todos.removeEventHandler(e)
+
+            new Count().setCount()
+        })
+
+        todoList.addEventListener('dblclick', e => todos.editEventHandler(e))
+    }
+
+}
diff --git a/src/js/model/Count.js b/src/js/model/Count.js
@@ -0,0 +1,31 @@
+import {Todos} from "./Todos.js";
+
+export class Count {
+
+    static #TODOS = new Todos()
+    #dom = document.getElementsByClassName('todo-count')[0]
+
+    setCount(e) {
+        const hash = this.#getHash(e)
+        let cnt = 0;
+
+        if(hash === '#' || hash == '') {
+            cnt = Count.#TODOS.getSizeByFilter(n => true)
+        }
+
+        if(hash === '#active') {
+            cnt = Count.#TODOS.getSizeByFilter(n => n.className !== 'completed')
+        }
+
+        if(hash === '#completed') {
+            cnt = Count.#TODOS.getSizeByFilter(n => n.className === 'completed')
+        }
+
+        this.#dom.querySelector('strong').textContent = cnt.toString()
+    }
+
+    #getHash(e) {
+        return e ? e.href.substring(e.href.indexOf('#')) : location.hash
+    }
+
+}
diff --git a/src/js/model/Filter.js b/src/js/model/Filter.js
@@ -0,0 +1,42 @@
+import {Todos} from "./Todos.js";
+
+export class Filter {
+    static #DOM = document.getElementsByClassName('filters')[0]
+
+    filterHandler(e) {
+        if(!(e.target && e.target.nodeName === 'A')) {
+            return
+        }
+
+        this.#setAllNodesToNoneSelected()
+
+        e.target.classList.add('selected')
+
+        this.#setItemsByFilter(e.target)
+    }
+
+    #setItemsByFilter(e) {
+        const hash = e.href.substring(e.href.indexOf('#'))
+
+        if(hash === '#') {
+            new Todos().setFilter((n => true))
+        }
+
+        if(hash === '#active') {
+            new Todos().setFilter((n => n.dom.className !== 'completed'))
+        }
+
+        if(hash === '#completed') {
+            new Todos().setFilter((n => n.dom.className === 'completed'))
+        }
+
+    }
+
+    #setAllNodesToNoneSelected() {
+        const nodes = [...Filter.#DOM.querySelectorAll('a')]
+
+        nodes.forEach(n => n.classList.remove('selected'))
+    }
+
+
+}
diff --git a/src/js/model/Item.js b/src/js/model/Item.js
@@ -0,0 +1,48 @@
+export class Item {
+
+    #dom
+    #value
+    #id
+
+    constructor(value) {
+        this.#value = value
+        this.#id = Date.now()
+        this.#dom = Item.#createDom(this.#id, this.#value)
+    }
+
+    static #createDom(id, value) {
+        return document
+            .createRange()
+            .createContextualFragment(`
+            <li id="${id}">
+                <div class="view">
+                    <input class="toggle" type="checkbox"/>
+                    <label class="label">${value}</label>
+                    <button class="destroy"></button>
+                </div>
+                <input class="edit" value="${value}" />
+            </li>`.trim()).firstElementChild;
+    }
+
+    toHidden() {
+        this.#dom.setAttribute('hidden', '')
+    }
+
+    toNoneHidden() {
+        this.#dom.removeAttribute('hidden')
+    }
+
+
+    get value() {
+        return this.#value
+    }
+
+    get id() {
+        return this.#id
+    }
+
+    get dom() {
+        return this.#dom
+    }
+
+}