diff --git a/README.md b/README.md index 502436de..78eb3d80 100644 --- a/README.md +++ b/README.md @@ -39,9 +39,9 @@ ## ๐ŸŽฏ ์š”๊ตฌ์‚ฌํ•ญ -- [ ] todo list์— todoItem์„ ํ‚ค๋ณด๋“œ๋กœ ์ž…๋ ฅํ•˜์—ฌ ์ถ”๊ฐ€ํ•˜๊ธฐ -- [ ] todo list์˜ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ํด๋ฆญํ•˜์—ฌ complete ์ƒํƒœ๋กœ ๋ณ€๊ฒฝ (li tag ์— completed class ์ถ”๊ฐ€, input ํƒœ๊ทธ์— checked ์†์„ฑ ์ถ”๊ฐ€) -- [ ] todo list์˜ x๋ฒ„ํŠผ์„ ์ด์šฉํ•ด์„œ ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์‚ญ์ œ +- [x] todo list์— todoItem์„ ํ‚ค๋ณด๋“œ๋กœ ์ž…๋ ฅํ•˜์—ฌ ์ถ”๊ฐ€ํ•˜๊ธฐ +- [x] todo list์˜ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ํด๋ฆญํ•˜์—ฌ complete ์ƒํƒœ๋กœ ๋ณ€๊ฒฝ (li tag ์— completed class ์ถ”๊ฐ€, input ํƒœ๊ทธ์— checked ์†์„ฑ ์ถ”๊ฐ€) +- [x] todo list์˜ x๋ฒ„ํŠผ์„ ์ด์šฉํ•ด์„œ ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์‚ญ์ œ - [ ] todo list๋ฅผ ๋”๋ธ”ํด๋ฆญํ–ˆ์„ ๋•Œ input ๋ชจ๋“œ๋กœ ๋ณ€๊ฒฝ (li tag ์— editing class ์ถ”๊ฐ€) ๋‹จ ์ด๋•Œ ์ˆ˜์ •์„ ์™„๋ฃŒํ•˜์ง€ ์•Š์€ ์ƒํƒœ์—์„œ escํ‚ค๋ฅผ ๋ˆ„๋ฅด๋ฉด ์ˆ˜์ •๋˜์ง€ ์•Š์€ ์ฑ„๋กœ ๋‹ค์‹œ view ๋ชจ๋“œ๋กœ ๋ณต๊ท€ - [ ] todo list์˜ item๊ฐฏ์ˆ˜๋ฅผ countํ•œ ๊ฐฏ์ˆ˜๋ฅผ ๋ฆฌ์ŠคํŠธ์˜ ํ•˜๋‹จ์— ๋ณด์—ฌ์ฃผ๊ธฐ - [ ] todo list์˜ ์ƒํƒœ๊ฐ’์„ ํ™•์ธํ•˜์—ฌ, ํ•ด์•ผํ•  ์ผ๊ณผ, ์™„๋ฃŒํ•œ ์ผ์„ ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹น ์ƒํƒœ์˜ ์•„์ดํ…œ๋งŒ ๋ณด์—ฌ์ฃผ๊ธฐ 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 13a02fdb..162d063e 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,10 @@ - + ์ด๋ฒคํŠธ - TODOS - +
@@ -22,7 +22,7 @@

TODOS

์ด 0 ๊ฐœ
+ diff --git a/src/App.js b/src/App.js new file mode 100644 index 00000000..993f530b --- /dev/null +++ b/src/App.js @@ -0,0 +1,18 @@ +import { ToDoInput,ToDoList } from "./component/index.js"; +class App { + $todoInput; + $todoList; + constructor(){ + const toDoInputTarget = document.querySelector("#new-todo-title"); + const toDoListTarget = document.querySelector('#todo-list'); + 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 new file mode 100644 index 00000000..615d275a --- /dev/null +++ b/src/component/ToDoInput.js @@ -0,0 +1,37 @@ +export class ToDoInput { + state; + $target; + props; + constructor(target,props){ + this.$target = target; + this.props = props; + this.state = { + toDoItem : "" + } + this.initEventListener(); + } + + render () { + + } + + initEventListener () { + this.$target.addEventListener('input',({target})=>{ + this.setState({toDoItem: target.value}) + }) + this.$target.addEventListener('keydown',({key})=>{ + if(key === "Enter") { + this.props.addToDoItem(this.state.toDoItem); + this.reset(); + }; + }) + } + + 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 new file mode 100644 index 00000000..bc1b3aa4 --- /dev/null +++ b/src/component/ToDoList.js @@ -0,0 +1,74 @@ +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(){ + this.addToggleEvent(); + this.removeToggleEvent(); + + } + + addToggleEvent(){ + const toggleComponents = this.$target.querySelectorAll('.toggle'); + const {items} = this.state; + toggleComponents.forEach((element,idx) => { + element.addEventListener('change',(({target})=>{ + const todoItem = items[idx]; + 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(); + this.initEventListener(); + } + addItem(itemTitle){ + this.setState({ + items: [...this.state.items, + { + title:itemTitle, state: TODO_STATE.TODO + }] + }) + } +} + diff --git a/src/component/index.js b/src/component/index.js new file mode 100644 index 00000000..6b33ca06 --- /dev/null +++ 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 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 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