From 3e5c577c7234eac8a53ed23f1a6354b264328a6d Mon Sep 17 00:00:00 2001 From: NaLeum Date: Sun, 11 Jul 2021 22:05:54 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=EC=9E=A1=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + src/App.js | 0 src/component/index.js | 0 src/service/index.js | 0 src/storage/index.js | 0 5 files changed, 1 insertion(+) create mode 100644 src/App.js create mode 100644 src/component/index.js create mode 100644 src/service/index.js create mode 100644 src/storage/index.js diff --git a/index.html b/index.html index 13a02fdb..9d7a9289 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ 이벤트 - TODOS +
diff --git a/src/App.js b/src/App.js new file mode 100644 index 00000000..e69de29b diff --git a/src/component/index.js b/src/component/index.js new file mode 100644 index 00000000..e69de29b diff --git a/src/service/index.js b/src/service/index.js new file mode 100644 index 00000000..e69de29b diff --git a/src/storage/index.js b/src/storage/index.js new file mode 100644 index 00000000..e69de29b From 3d523dd0fd2d79eff15cdc82309a598fb19b4d1f Mon Sep 17 00:00:00 2001 From: NaLeum Date: Mon, 12 Jul 2021 00:40:25 +0900 Subject: [PATCH 2/8] =?UTF-8?q?fix:=20import=20=ED=99=95=EC=9E=A5=EC=9E=90?= =?UTF-8?q?=20=EC=84=A4=EC=A0=95=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- {src/css => css}/style.css | 0 index.html | 8 ++++---- src/App.js | 10 ++++++++++ src/component/ToDoInput.js | 6 ++++++ src/component/ToDoList.js | 17 +++++++++++++++++ src/component/index.js | 2 ++ 6 files changed, 39 insertions(+), 4 deletions(-) rename {src/css => css}/style.css (100%) create mode 100644 src/component/ToDoInput.js create mode 100644 src/component/ToDoList.js diff --git a/src/css/style.css b/css/style.css similarity index 100% rename from src/css/style.css rename to css/style.css diff --git a/index.html b/index.html index 9d7a9289..162d063e 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,10 @@ - + 이벤트 - TODOS - - +
@@ -23,7 +22,7 @@

TODOS

총 0 개
+ diff --git a/src/App.js b/src/App.js index e69de29b..f69c621b 100644 --- a/src/App.js +++ b/src/App.js @@ -0,0 +1,10 @@ +import { ToDoInput } from "./component/index.js"; +class App { + $todoInput; + constructor(){ + console.log("asd") + this.$todoInput = new ToDoInput(); + } +} + +const app = new App(); \ No newline at end of file diff --git a/src/component/ToDoInput.js b/src/component/ToDoInput.js new file mode 100644 index 00000000..f757b78a --- /dev/null +++ b/src/component/ToDoInput.js @@ -0,0 +1,6 @@ +export class ToDoInput { + constructor(){ + + } +} + diff --git a/src/component/ToDoList.js b/src/component/ToDoList.js new file mode 100644 index 00000000..12bcd8ef --- /dev/null +++ b/src/component/ToDoList.js @@ -0,0 +1,17 @@ +export class ToDoList { + state; + target; + constructor(){ + + } + render(){ + + } + initEventListener(){ + + } + setState(){ + + } +} + diff --git a/src/component/index.js b/src/component/index.js index e69de29b..6b33ca06 100644 --- a/src/component/index.js +++ b/src/component/index.js @@ -0,0 +1,2 @@ +export {ToDoList} from "./ToDoList.js" +export {ToDoInput} from "./ToDoInput.js" \ No newline at end of file From 086f6adba8fc22781cac0b2aa5675a09f74b1682 Mon Sep 17 00:00:00 2001 From: NaLeum Date: Mon, 12 Jul 2021 00:45:38 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20target=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 9 ++++++--- src/component/ToDoInput.js | 19 ++++++++++++++++--- src/component/ToDoList.js | 6 +++--- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index f69c621b..3ff38b12 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,12 @@ -import { ToDoInput } from "./component/index.js"; +import { ToDoInput,ToDoList } from "./component/index.js"; class App { $todoInput; + $todoList; constructor(){ - console.log("asd") - this.$todoInput = new ToDoInput(); + const toDoInputTarget = document.querySelector("#new-todo-title"); + const toDoListTarget = document.querySelector('div'); + this.$todoInput = new ToDoInput(toDoInputTarget); + this.$todoList = new ToDoList(toDoListTarget); } } diff --git a/src/component/ToDoInput.js b/src/component/ToDoInput.js index f757b78a..4fcafa94 100644 --- a/src/component/ToDoInput.js +++ b/src/component/ToDoInput.js @@ -1,6 +1,19 @@ export class ToDoInput { - constructor(){ - + state; + $target; + constructor(target){ + this.$target = target; } -} + + render () { + + } + + initEventListener () { + + } + + setState () { + } +} \ No newline at end of file diff --git a/src/component/ToDoList.js b/src/component/ToDoList.js index 12bcd8ef..51d63abb 100644 --- a/src/component/ToDoList.js +++ b/src/component/ToDoList.js @@ -1,8 +1,8 @@ export class ToDoList { state; - target; - constructor(){ - + $target; + constructor(target){ + this.$target = target; } render(){ From 214419e533e56094a9416f0d9116c0b68a06d619 Mon Sep 17 00:00:00 2001 From: NaLeum Date: Mon, 12 Jul 2021 00:46:43 +0900 Subject: [PATCH 4/8] =?UTF-8?q?fix=20:=20=ED=83=80=EA=B2=9F=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 3ff38b12..f9a1415b 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,7 @@ class App { $todoList; constructor(){ const toDoInputTarget = document.querySelector("#new-todo-title"); - const toDoListTarget = document.querySelector('div'); + const toDoListTarget = document.querySelector('#todo-list'); this.$todoInput = new ToDoInput(toDoInputTarget); this.$todoList = new ToDoList(toDoListTarget); } From 08a6ee43691bacd1aa9e8afac6bf48d143ede23e Mon Sep 17 00:00:00 2001 From: NaLeum Date: Mon, 12 Jul 2021 01:06:42 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20todoItem=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 7 ++++++- src/component/ToDoInput.js | 26 ++++++++++++++++++++++---- src/component/ToDoList.js | 34 ++++++++++++++++++++++++++++++++-- src/constant/index.js | 5 +++++ 4 files changed, 65 insertions(+), 7 deletions(-) create mode 100644 src/constant/index.js diff --git a/src/App.js b/src/App.js index f9a1415b..993f530b 100644 --- a/src/App.js +++ b/src/App.js @@ -5,9 +5,14 @@ class App { constructor(){ const toDoInputTarget = document.querySelector("#new-todo-title"); const toDoListTarget = document.querySelector('#todo-list'); - this.$todoInput = new ToDoInput(toDoInputTarget); + this.$todoInput = new ToDoInput(toDoInputTarget,{ + addToDoItem: itemTitle => this.addToDoItem(itemTitle) + }); this.$todoList = new ToDoList(toDoListTarget); } + addToDoItem(itemTitle){ + this.$todoList.addItem(itemTitle); + } } const app = new App(); \ No newline at end of file diff --git a/src/component/ToDoInput.js b/src/component/ToDoInput.js index 4fcafa94..ec163bef 100644 --- a/src/component/ToDoInput.js +++ b/src/component/ToDoInput.js @@ -1,8 +1,14 @@ export class ToDoInput { state; $target; - constructor(target){ + props; + constructor(target,props){ this.$target = target; + this.props = props; + this.state = { + toDoItem : "" + } + this.initEventListener(); } render () { @@ -10,10 +16,22 @@ export class ToDoInput { } initEventListener () { - + this.$target.addEventListener('input',({target})=>{ + this.setState({toDoItem: target.value}) + }) + this.$target.addEventListener('keydown',({key,target})=>{ + if(key === "Enter") { + this.props.addToDoItem(this.state.toDoItem); + this.reset(); + }; + }) } - setState () { - + setState (payload) { + this.state={...this.state,...payload} + } + reset(){ + this.setState({toDoItem:""}); + this.$target.value = ""; } } \ No newline at end of file diff --git a/src/component/ToDoList.js b/src/component/ToDoList.js index 51d63abb..513959dc 100644 --- a/src/component/ToDoList.js +++ b/src/component/ToDoList.js @@ -1,17 +1,47 @@ +import { TODO_STATE } from "../constant/index.js"; +const getStateClass = (state) => { + return state === TODO_STATE.COMPLETED ? 'class="completed"' : + state === TODO_STATE.EDITING ? 'class="editing"' : + ''; + } export class ToDoList { state; $target; constructor(target){ this.$target = target; + this.setState({ + items:[] + }) } render(){ + const {items} = this.state; + this.$target.innerHTML = items.map(({state,title})=>` +
  • +
    + + + +
    + ${ state === TODO_STATE.EDITING ? `` : '' } +
    • + `).join('') } initEventListener(){ } - setState(){ - + setState(payload){ + this.state = {...this.state, ...payload}; + this.render(); + this.initEventListener(); + } + addItem(itemTitle){ + this.setState({ + items: [...this.state.items, + { + title:itemTitle, state: TODO_STATE.TODO + }] + }) } } diff --git a/src/constant/index.js b/src/constant/index.js new file mode 100644 index 00000000..2c071e84 --- /dev/null +++ b/src/constant/index.js @@ -0,0 +1,5 @@ +export const TODO_STATE = { + TODO: 0, + COMPLETED: 1, + EDITING: 2, + } \ No newline at end of file From 3edd007cc7f32cdbdd756ef998374e2383105bf9 Mon Sep 17 00:00:00 2001 From: NaLeum Date: Mon, 12 Jul 2021 01:17:23 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EC=99=84=EB=A3=8C=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 502436de..70ace787 100644 --- a/README.md +++ b/README.md @@ -39,8 +39,8 @@ ## 🎯 요구사항 -- [ ] todo list에 todoItem을 키보드로 입력하여 추가하기 -- [ ] todo list의 체크박스를 클릭하여 complete 상태로 변경 (li tag 에 completed class 추가, input 태그에 checked 속성 추가) +- [x] todo list에 todoItem을 키보드로 입력하여 추가하기 +- [x] 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한 갯수를 리스트의 하단에 보여주기 From 980c439b7db108ca6b968b4dd3e6aca8e2d093d5 Mon Sep 17 00:00:00 2001 From: NaLeum Date: Mon, 12 Jul 2021 01:17:31 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EC=99=84=EB=A3=8C=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/ToDoInput.js | 2 +- src/component/ToDoList.js | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/component/ToDoInput.js b/src/component/ToDoInput.js index ec163bef..615d275a 100644 --- a/src/component/ToDoInput.js +++ b/src/component/ToDoInput.js @@ -19,7 +19,7 @@ export class ToDoInput { this.$target.addEventListener('input',({target})=>{ this.setState({toDoItem: target.value}) }) - this.$target.addEventListener('keydown',({key,target})=>{ + this.$target.addEventListener('keydown',({key})=>{ if(key === "Enter") { this.props.addToDoItem(this.state.toDoItem); this.reset(); diff --git a/src/component/ToDoList.js b/src/component/ToDoList.js index 513959dc..81c17a3a 100644 --- a/src/component/ToDoList.js +++ b/src/component/ToDoList.js @@ -18,7 +18,7 @@ export class ToDoList { this.$target.innerHTML = items.map(({state,title})=>`
  • - +
    @@ -28,6 +28,16 @@ export class ToDoList { } initEventListener(){ + const toggleComponents = this.$target.querySelectorAll('.toggle'); + const {items} = this.state; + toggleComponents.forEach((element,idx) => { + element.addEventListener('change',(()=>{ + const todoItem = items[idx]; + todoItem.state = element.checked ? TODO_STATE.COMPLETED : TODO_STATE.TODO + items[idx] = {...todoItem}; + this.setState({items:[...items]}); + }) + )}); } setState(payload){ From 915fc8ce40502656ced9b8ebd305fe0e144a06f6 Mon Sep 17 00:00:00 2001 From: NaLeum Date: Mon, 12 Jul 2021 01:24:21 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=EC=82=AD=EC=A0=9C=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/component/ToDoList.js | 21 +++++++++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 70ace787..78eb3d80 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ - [x] todo list에 todoItem을 키보드로 입력하여 추가하기 - [x] todo list의 체크박스를 클릭하여 complete 상태로 변경 (li tag 에 completed class 추가, input 태그에 checked 속성 추가) -- [ ] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제 +- [x] todo list의 x버튼을 이용해서 해당 엘리먼트를 삭제 - [ ] todo list를 더블클릭했을 때 input 모드로 변경 (li tag 에 editing class 추가) 단 이때 수정을 완료하지 않은 상태에서 esc키를 누르면 수정되지 않은 채로 다시 view 모드로 복귀 - [ ] todo list의 item갯수를 count한 갯수를 리스트의 하단에 보여주기 - [ ] todo list의 상태값을 확인하여, 해야할 일과, 완료한 일을 클릭하면 해당 상태의 아이템만 보여주기 diff --git a/src/component/ToDoList.js b/src/component/ToDoList.js index 81c17a3a..bc1b3aa4 100644 --- a/src/component/ToDoList.js +++ b/src/component/ToDoList.js @@ -28,18 +28,35 @@ export class ToDoList { } initEventListener(){ + this.addToggleEvent(); + this.removeToggleEvent(); + + } + + addToggleEvent(){ const toggleComponents = this.$target.querySelectorAll('.toggle'); const {items} = this.state; toggleComponents.forEach((element,idx) => { - element.addEventListener('change',(()=>{ + element.addEventListener('change',(({target})=>{ const todoItem = items[idx]; - todoItem.state = element.checked ? TODO_STATE.COMPLETED : TODO_STATE.TODO + todoItem.state = target.checked ? TODO_STATE.COMPLETED : TODO_STATE.TODO items[idx] = {...todoItem}; this.setState({items:[...items]}); }) )}); + } + removeToggleEvent(){ + const destroyComponents = this.$target.querySelectorAll('.destroy'); + const {items} = this.state; + destroyComponents.forEach((element,idx)=>{ + element.addEventListener('click',()=>{ + items.splice(idx,1); + this.setState({items:[...items]}) + }) + }) } + setState(payload){ this.state = {...this.state, ...payload}; this.render();