From 9d8edc66abbb0de81132baf889d492f26364b56f Mon Sep 17 00:00:00 2001 From: kim Stella Date: Mon, 23 Dec 2019 14:08:04 +0900 Subject: [PATCH 01/12] create folder directory with mission002 --- mission002/kimjieun/components/TodoList.js | 1 + mission002/kimjieun/index.html | 61 ++++++++++++++++++++++ mission002/kimjieun/js/App.js | 18 +++++++ mission002/kimjieun/js/main.js | 11 ++++ 4 files changed, 91 insertions(+) create mode 100644 mission002/kimjieun/components/TodoList.js create mode 100644 mission002/kimjieun/index.html create mode 100644 mission002/kimjieun/js/App.js create mode 100644 mission002/kimjieun/js/main.js diff --git a/mission002/kimjieun/components/TodoList.js b/mission002/kimjieun/components/TodoList.js new file mode 100644 index 0000000..bf0a250 --- /dev/null +++ b/mission002/kimjieun/components/TodoList.js @@ -0,0 +1 @@ +export default function TodoList() {} diff --git a/mission002/kimjieun/index.html b/mission002/kimjieun/index.html new file mode 100644 index 0000000..a65ff02 --- /dev/null +++ b/mission002/kimjieun/index.html @@ -0,0 +1,61 @@ + + + + + + 이벤트 - TODOS + + + +
+ +
+ + + diff --git a/mission002/kimjieun/js/App.js b/mission002/kimjieun/js/App.js new file mode 100644 index 0000000..c37532b --- /dev/null +++ b/mission002/kimjieun/js/App.js @@ -0,0 +1,18 @@ +import TodoList from '../components/TodoList.js' + +function App({ target }) { + this.data = [] + + const getTodoList = async () => { + try { + const res = await fetch('http://todo-api.roto.codes/kimjieun') + return await res.json() + } catch (error) { + throw new Error(error) + } + } + + console.log(getTodoList()) +} + +export default App diff --git a/mission002/kimjieun/js/main.js b/mission002/kimjieun/js/main.js new file mode 100644 index 0000000..c8adcee --- /dev/null +++ b/mission002/kimjieun/js/main.js @@ -0,0 +1,11 @@ +import App from './App.js' + +document.addEventListener('DOMContentLoaded', () => { + const target = document.querySelector('#app') + + try { + new App(target) + } catch (error) { + new Error(target, error) + } +}) From 702d9646ad5ed6b7a38ad09828673c191714b0bf Mon Sep 17 00:00:00 2001 From: Stellakim1230 Date: Tue, 24 Dec 2019 00:56:43 +0900 Subject: [PATCH 02/12] add todoinput api. --- mission002/kimjieun/components/TodoInput.js | 5 + mission002/kimjieun/css/style.css | 334 ++++++++++++++++++++ mission002/kimjieun/index.html | 10 +- mission002/kimjieun/js/App.js | 19 +- 4 files changed, 362 insertions(+), 6 deletions(-) create mode 100644 mission002/kimjieun/components/TodoInput.js create mode 100644 mission002/kimjieun/css/style.css diff --git a/mission002/kimjieun/components/TodoInput.js b/mission002/kimjieun/components/TodoInput.js new file mode 100644 index 0000000..b833d21 --- /dev/null +++ b/mission002/kimjieun/components/TodoInput.js @@ -0,0 +1,5 @@ +export default function TodoInput({ onKeyDown }) { + document.querySelector('#new-todo-title').addEventListener('keydown', (e) => { + onKeyDown(e) + }) +} diff --git a/mission002/kimjieun/css/style.css b/mission002/kimjieun/css/style.css new file mode 100644 index 0000000..14a905e --- /dev/null +++ b/mission002/kimjieun/css/style.css @@ -0,0 +1,334 @@ +html, +body { + margin: 0; + padding: 10px; +} + +button { + margin: 0; + padding: 0; + border: 0; + background: none; + font-size: 100%; + vertical-align: baseline; + font-family: inherit; + font-weight: inherit; + color: inherit; + -webkit-appearance: none; + appearance: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; + line-height: 1.4em; + background: #f5f5f5; + color: #4d4d4d; + min-width: 230px; + max-width: 550px; + margin: 0 auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 300; +} + +:focus { + outline: 0; +} + +.hidden { + display: none; +} + +.todoapp { + background: #fff; + margin: 130px 0 40px 0; + position: relative; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), + 0 25px 50px 0 rgba(0, 0, 0, 0.1); +} + +.todoapp input::-webkit-input-placeholder { + font-style: italic; + font-weight: 300; + color: #e6e6e6; +} + +.todoapp h1 { + position: absolute; + top: -125px; + width: 100%; + font-size: 60px; + text-align: center; + color: dimgray; + font-weight: 100; + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; +} + +.new-todo, +.edit { + position: relative; + margin: 0; + width: 100%; + font-size: 24px; + font-family: inherit; + font-weight: inherit; + line-height: 1.4em; + border: 0; + color: inherit; + padding: 6px; + box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.new-todo { + padding: 16px 16px 16px 60px; + border: none; + background: rgba(0, 0, 0, 0.003); + box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03); +} + +.main { + position: relative; + z-index: 2; + border-top: 1px solid #e6e6e6; +} + +.toggle-all { + width: 1px; + height: 1px; + border: none; + opacity: 0; + position: absolute; + right: 100%; + bottom: 100%; +} + +.toggle-all + label { + width: 60px; + height: 34px; + font-size: 0; + position: absolute; + top: -52px; + left: -13px; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} + +.toggle-all + label:before { + content: '❯'; + font-size: 22px; + color: #e6e6e6; + padding: 10px 27px 10px 27px; +} + +.toggle-all:checked + label:before { + color: #737373; +} + +.todo-list { + margin: 0; + padding: 0; + list-style: none; +} + +.todo-list li { + position: relative; + font-size: 24px; + border-bottom: 1px solid #ededed; +} + +.todo-list li:last-child { + border-bottom: none; +} + +.todo-list li.editing { + border-bottom: none; + padding: 0; +} + +.todo-list li.editing .edit { + display: block; + width: calc(100% - 43px); + padding: 12px 16px; + margin: 0 0 0 43px; +} + +.todo-list li.editing .view { + display: none; +} + +.todo-list li .toggle { + text-align: center; + width: 40px; + height: auto; + position: absolute; + top: 0; + bottom: 0; + margin: auto 0; + border: none; + -webkit-appearance: none; + appearance: none; +} + +.todo-list li .toggle { + opacity: 0; +} + +.todo-list li .toggle + label { + background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E'); + background-repeat: no-repeat; + background-position: center left; +} + +.todo-list li .toggle:checked + label { + background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E'); +} + +.todo-list li label { + word-break: break-all; + padding: 15px 15px 15px 60px; + display: block; + line-height: 1.2; + transition: color 0.4s; +} + +.todo-list li.completed label { + color: #d9d9d9; + text-decoration: line-through; +} + +.todo-list li .destroy { + display: none; + position: absolute; + top: 0; + right: 10px; + bottom: 0; + width: 40px; + height: 40px; + margin: auto 0; + font-size: 30px; + color: #cc9a9a; + margin-bottom: 11px; + transition: color 0.2s ease-out; + cursor: pointer; +} + +.todo-list li .destroy:hover { + color: #af5b5e; +} + +.todo-list li .destroy:after { + content: '×'; +} + +.todo-list li:hover .destroy { + display: block; +} + +.todo-list li .edit { + display: none; +} + +.todo-list li.editing:last-child { + margin-bottom: -1px; +} + +.count-container { + color: #777; + padding: 10px 15px; + height: 20px; + text-align: center; + border-top: 1px solid #e6e6e6; +} + +.count-container:before { + content: ''; + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 50px; + overflow: hidden; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), + 0 8px 0 -3px #f6f6f6, + 0 9px 1px -3px rgba(0, 0, 0, 0.2), + 0 16px 0 -6px #f6f6f6, + 0 17px 2px -6px rgba(0, 0, 0, 0.2); +} + +.todo-count { + float: left; + text-align: left; +} + +.todo-count strong { + font-weight: 300; +} + +.filters { + margin: 0; + padding: 0; + list-style: none; + position: absolute; + right: 0; + left: 0; +} + +.filters li { + display: inline; +} + +.filters li a { + color: inherit; + margin: 3px; + padding: 3px 7px; + text-decoration: none; + border: 1px solid transparent; + border-radius: 3px; +} + +.filters li a:hover { + border-color: rgba(175, 47, 47, 0.1); +} + +.filters li a.selected { + border-color: rgba(175, 47, 47, 0.2); +} + +.clear-completed, html .clear-completed:active { + float: right; + position: relative; + line-height: 20px; + text-decoration: none; + cursor: pointer; +} + +.clear-completed:hover { + text-decoration: underline; +} + +.info { + margin: 65px auto 0; + color: #bfbfbf; + font-size: 10px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + text-align: center; +} + +.info p { + line-height: 1; +} + +.info a { + color: inherit; + text-decoration: none; + font-weight: 400; +} + +.info a:hover { + text-decoration: underline; +} diff --git a/mission002/kimjieun/index.html b/mission002/kimjieun/index.html index a65ff02..00e8570 100644 --- a/mission002/kimjieun/index.html +++ b/mission002/kimjieun/index.html @@ -4,18 +4,18 @@ 이벤트 - TODOS - +
-
@@ -54,7 +54,7 @@

TODOS

완료한 일 -
--> + diff --git a/mission002/kimjieun/js/App.js b/mission002/kimjieun/js/App.js index c37532b..3545d55 100644 --- a/mission002/kimjieun/js/App.js +++ b/mission002/kimjieun/js/App.js @@ -1,4 +1,5 @@ import TodoList from '../components/TodoList.js' +import TodoInput from '../components/TodoInput.js' function App({ target }) { this.data = [] @@ -12,7 +13,23 @@ function App({ target }) { } } - console.log(getTodoList()) + const onKeyDown = async (e) => { + if (e.key === 'Enter') { + const data = await fetch('http://todo-api.roto.codes/kimjieun', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + content: e.target.value, + }) + }) + } + } + + this.todoInput = new TodoInput({ + onKeyDown, + }) } export default App From aef0908ee33dabbc5a60ef6c66f7878d72f06007 Mon Sep 17 00:00:00 2001 From: kim Stella Date: Tue, 24 Dec 2019 11:20:13 +0900 Subject: [PATCH 03/12] =?UTF-8?q?tododata=20fetch=20api=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20=EC=9E=91=EC=97=85=EC=A4=91.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission002/kimjieun/components/TodoList.js | 11 +++++++- mission002/kimjieun/index.html | 29 ++-------------------- mission002/kimjieun/js/App.js | 29 +++++++++++++++++++--- mission002/kimjieun/utils/api.js | 22 ++++++++++++++++ 4 files changed, 59 insertions(+), 32 deletions(-) create mode 100644 mission002/kimjieun/utils/api.js diff --git a/mission002/kimjieun/components/TodoList.js b/mission002/kimjieun/components/TodoList.js index bf0a250..f641713 100644 --- a/mission002/kimjieun/components/TodoList.js +++ b/mission002/kimjieun/components/TodoList.js @@ -1 +1,10 @@ -export default function TodoList() {} +export default function TodoList({ data }) { + this.setState = (data) => { + this.data = data + this.render() + } + + this.render = () => { + const $todoList = document.querySelector('#todo-list') + } +} diff --git a/mission002/kimjieun/index.html b/mission002/kimjieun/index.html index 00e8570..7150ec5 100644 --- a/mission002/kimjieun/index.html +++ b/mission002/kimjieun/index.html @@ -4,7 +4,7 @@ 이벤트 - TODOS - +
@@ -14,32 +14,7 @@

TODOS

-
    - -
+
    총 0 개 diff --git a/mission002/kimjieun/js/App.js b/mission002/kimjieun/js/App.js index 3545d55..c85531d 100644 --- a/mission002/kimjieun/js/App.js +++ b/mission002/kimjieun/js/App.js @@ -1,19 +1,33 @@ import TodoList from '../components/TodoList.js' import TodoInput from '../components/TodoInput.js' +import { apiHandler } from '../utils/api.js' function App({ target }) { this.data = [] - const getTodoList = async () => { + const fetchTodoData = async () => { try { - const res = await fetch('http://todo-api.roto.codes/kimjieun') - return await res.json() + const data = await apiHandler({ url: 'http://todo-api.roto.codes' }) + + setState(data) } catch (error) { throw new Error(error) } } + fetchTodoData() + + const setState = (updateData) => { + this.todoList.setState(updateData) + } + + this.todoList = new TodoList({ + data: this.data, + }) + const onKeyDown = async (e) => { + const $todoInput = document.querySelector('#new-todo-title') + if (e.key === 'Enter') { const data = await fetch('http://todo-api.roto.codes/kimjieun', { method: 'POST', @@ -22,9 +36,16 @@ function App({ target }) { }, body: JSON.stringify({ content: e.target.value, - }) + }), }) + + if (data) { + $todoInput.value = '' + $todoInput.focus() + } } + + fetchTodoData() } this.todoInput = new TodoInput({ diff --git a/mission002/kimjieun/utils/api.js b/mission002/kimjieun/utils/api.js new file mode 100644 index 0000000..61d6e17 --- /dev/null +++ b/mission002/kimjieun/utils/api.js @@ -0,0 +1,22 @@ +const username = 'kimjieun' + +export const apiHandler = async ({ url, method, body }) => { + const options = { + method, + headers: { + 'Content-Type': 'application/json', + }, + body, + } + + try { + const res = await fetch(`${url}/${username}`, options) + + if (res.ok) { + const data = await res.json() + return data + } + } catch (error) { + throw new Error(error) + } +} From bdaeac87aeb3ee09080b9da9a1c415f50d815bf5 Mon Sep 17 00:00:00 2001 From: kim Stella Date: Tue, 24 Dec 2019 11:36:53 +0900 Subject: [PATCH 04/12] =?UTF-8?q?=ED=95=A8=EC=88=98=ED=91=9C=ED=98=84?= =?UTF-8?q?=EC=8B=9D,=20=EC=84=A0=EC=96=B8=EC=8B=9D=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20=EC=9E=91=EC=97=85=EC=A4=91.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission002/kimjieun/components/TodoList.js | 14 +++++++++++++ mission002/kimjieun/js/App.js | 24 +++++++++++----------- mission002/kimjieun/js/main.js | 6 ++---- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/mission002/kimjieun/components/TodoList.js b/mission002/kimjieun/components/TodoList.js index f641713..a67f368 100644 --- a/mission002/kimjieun/components/TodoList.js +++ b/mission002/kimjieun/components/TodoList.js @@ -1,10 +1,24 @@ export default function TodoList({ data }) { + this.data = data + this.setState = (data) => { this.data = data this.render() } + createTodoListHtmlString = ({ content, isCompleted }, index) => { + return `
  • +
    + + + +
    + +
    • ` + } + this.render = () => { const $todoList = document.querySelector('#todo-list') + $todoList.innerHTML = this.data.map(this.createTodoListHtmlString).join('') } } diff --git a/mission002/kimjieun/js/App.js b/mission002/kimjieun/js/App.js index c85531d..bbe15f6 100644 --- a/mission002/kimjieun/js/App.js +++ b/mission002/kimjieun/js/App.js @@ -2,29 +2,29 @@ import TodoList from '../components/TodoList.js' import TodoInput from '../components/TodoInput.js' import { apiHandler } from '../utils/api.js' -function App({ target }) { +function App() { this.data = [] const fetchTodoData = async () => { - try { - const data = await apiHandler({ url: 'http://todo-api.roto.codes' }) - - setState(data) - } catch (error) { - throw new Error(error) - } + const data = await apiHandler({ url: 'http://todo-api.roto.codes' }) + setState(data) } fetchTodoData() - const setState = (updateData) => { - this.todoList.setState(updateData) - } - this.todoList = new TodoList({ data: this.data, }) + function setState(data) { + this.todoList.setState(data) + } + + // this.setState = (updateData) => { + // console.log(updateData) + // this.todoList.setState(updateData) + // } + const onKeyDown = async (e) => { const $todoInput = document.querySelector('#new-todo-title') diff --git a/mission002/kimjieun/js/main.js b/mission002/kimjieun/js/main.js index c8adcee..b05ec48 100644 --- a/mission002/kimjieun/js/main.js +++ b/mission002/kimjieun/js/main.js @@ -1,11 +1,9 @@ import App from './App.js' document.addEventListener('DOMContentLoaded', () => { - const target = document.querySelector('#app') - try { - new App(target) + new App() } catch (error) { - new Error(target, error) + new Error(error) } }) From a7631bc8cfff100216dc85572028d523eb1a5925 Mon Sep 17 00:00:00 2001 From: kim Stella Date: Tue, 24 Dec 2019 15:23:21 +0900 Subject: [PATCH 05/12] =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=EB=B0=98=EC=98=81?= =?UTF-8?q?=201.=20call=20todo=20api.=202.=20add=20todo=20api.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission002/kimjieun/components/TodoInput.js | 16 ++++-- mission002/kimjieun/components/TodoList.js | 18 ++++--- mission002/kimjieun/js/App.js | 58 +++++++++------------ mission002/kimjieun/js/main.js | 15 +++--- mission002/kimjieun/utils/constants.js | 1 + mission002/kimjieun/utils/url.js | 1 + 6 files changed, 58 insertions(+), 51 deletions(-) create mode 100644 mission002/kimjieun/utils/constants.js create mode 100644 mission002/kimjieun/utils/url.js diff --git a/mission002/kimjieun/components/TodoInput.js b/mission002/kimjieun/components/TodoInput.js index b833d21..d14081d 100644 --- a/mission002/kimjieun/components/TodoInput.js +++ b/mission002/kimjieun/components/TodoInput.js @@ -1,5 +1,13 @@ -export default function TodoInput({ onKeyDown }) { - document.querySelector('#new-todo-title').addEventListener('keydown', (e) => { - onKeyDown(e) - }) +export default class TodoInput { + constructor({ $selector }) { + this.$selector = $selector + + this.init() + } + + init() { + this.$selector.addEventListener('keydown', (e) => { + this.onKeyDown(e) + }) + } } diff --git a/mission002/kimjieun/components/TodoList.js b/mission002/kimjieun/components/TodoList.js index a67f368..2d27ec2 100644 --- a/mission002/kimjieun/components/TodoList.js +++ b/mission002/kimjieun/components/TodoList.js @@ -1,13 +1,15 @@ -export default function TodoList({ data }) { - this.data = data +export default class TodoList { + constructor({ $selector }) { + this.$selector = $selector + } - this.setState = (data) => { - this.data = data - this.render() + createLiClassName = (isCompleted) => { + if (!isCompleted) return 'view' + return 'completed' } createTodoListHtmlString = ({ content, isCompleted }, index) => { - return `
  • + return `
  • @@ -17,8 +19,8 @@ export default function TodoList({ data }) {
    • ` } - this.render = () => { + render = (data) => { const $todoList = document.querySelector('#todo-list') - $todoList.innerHTML = this.data.map(this.createTodoListHtmlString).join('') + $todoList.innerHTML = data.map(this.createTodoListHtmlString).join('') } } diff --git a/mission002/kimjieun/js/App.js b/mission002/kimjieun/js/App.js index bbe15f6..ce4b046 100644 --- a/mission002/kimjieun/js/App.js +++ b/mission002/kimjieun/js/App.js @@ -1,35 +1,36 @@ -import TodoList from '../components/TodoList.js' -import TodoInput from '../components/TodoInput.js' import { apiHandler } from '../utils/api.js' +import { ENTER } from '../utils/constants.js' +import { hostUrl } from '../utils/url.js' -function App() { - this.data = [] +export default class App { + constructor({ todoList, todoInput }) { + this.todoList = todoList + this.todoInput = todoInput - const fetchTodoData = async () => { - const data = await apiHandler({ url: 'http://todo-api.roto.codes' }) - setState(data) + this.init() + this.fetchTodoData() } - fetchTodoData() - - this.todoList = new TodoList({ - data: this.data, - }) + init = () => { + this.todoInput.onKeyDown = this.onKeyDown.bind(this) + } - function setState(data) { - this.todoList.setState(data) + fetchTodoData = async () => { + const data = await apiHandler({ url: hostUrl }) + this.setState(data) } - // this.setState = (updateData) => { - // console.log(updateData) - // this.todoList.setState(updateData) - // } + setState = (data) => { + this.render(data) + } - const onKeyDown = async (e) => { - const $todoInput = document.querySelector('#new-todo-title') + render = (data) => { + this.todoList.render(data) + } - if (e.key === 'Enter') { - const data = await fetch('http://todo-api.roto.codes/kimjieun', { + onKeyDown = async (e) => { + if (e.key === ENTER) { + const data = await fetch(`${hostUrl}/kimjieun`, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -39,18 +40,9 @@ function App() { }), }) - if (data) { - $todoInput.value = '' - $todoInput.focus() - } + if (data) e.target.value = '' } - fetchTodoData() + this.fetchTodoData() } - - this.todoInput = new TodoInput({ - onKeyDown, - }) } - -export default App diff --git a/mission002/kimjieun/js/main.js b/mission002/kimjieun/js/main.js index b05ec48..c89036a 100644 --- a/mission002/kimjieun/js/main.js +++ b/mission002/kimjieun/js/main.js @@ -1,9 +1,12 @@ import App from './App.js' +import TodoList from '../components/TodoList.js' +import TodoInput from '../components/TodoInput.js' -document.addEventListener('DOMContentLoaded', () => { - try { - new App() - } catch (error) { - new Error(error) - } +new App({ + todoList: new TodoList({ + $selector: document.querySelector('#todo-list'), + }), + todoInput: new TodoInput({ + $selector: document.querySelector('#new-todo-title'), + }), }) diff --git a/mission002/kimjieun/utils/constants.js b/mission002/kimjieun/utils/constants.js new file mode 100644 index 0000000..337dece --- /dev/null +++ b/mission002/kimjieun/utils/constants.js @@ -0,0 +1 @@ +export const ENTER = 'Enter' diff --git a/mission002/kimjieun/utils/url.js b/mission002/kimjieun/utils/url.js new file mode 100644 index 0000000..437b305 --- /dev/null +++ b/mission002/kimjieun/utils/url.js @@ -0,0 +1 @@ +export const hostUrl = 'http://todo-api.roto.codes' From e5242fe46a5882fe6d8cb38e297840855a661f34 Mon Sep 17 00:00:00 2001 From: kim Stella Date: Tue, 24 Dec 2019 15:31:19 +0900 Subject: [PATCH 06/12] =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=EB=B0=98=EC=98=81?= =?UTF-8?q?=203.=20remove=20todo=20api=20connect.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission002/kimjieun/components/TodoList.js | 13 +++++++++++-- mission002/kimjieun/js/App.js | 12 ++++++++++++ mission002/kimjieun/utils/constants.js | 1 + 3 files changed, 24 insertions(+), 2 deletions(-) diff --git a/mission002/kimjieun/components/TodoList.js b/mission002/kimjieun/components/TodoList.js index 2d27ec2..b79950b 100644 --- a/mission002/kimjieun/components/TodoList.js +++ b/mission002/kimjieun/components/TodoList.js @@ -1,6 +1,15 @@ +import { DESTROY } from '../utils/constants.js' + export default class TodoList { constructor({ $selector }) { this.$selector = $selector + this.init() + } + + init = () => { + this.$selector.addEventListener('click', (e) => { + if (e.target.className === DESTROY) this.onDeleteTodo(e.target.parentNode.dataset.idx) + }) } createLiClassName = (isCompleted) => { @@ -8,9 +17,9 @@ export default class TodoList { return 'completed' } - createTodoListHtmlString = ({ content, isCompleted }, index) => { + createTodoListHtmlString = ({ content, isCompleted, _id }) => { return `
  • -
    +
    diff --git a/mission002/kimjieun/js/App.js b/mission002/kimjieun/js/App.js index ce4b046..56a6d8e 100644 --- a/mission002/kimjieun/js/App.js +++ b/mission002/kimjieun/js/App.js @@ -13,6 +13,7 @@ export default class App { init = () => { this.todoInput.onKeyDown = this.onKeyDown.bind(this) + this.todoList.onDeleteTodo = this.onDeleteTodo.bind(this) } fetchTodoData = async () => { @@ -45,4 +46,15 @@ export default class App { this.fetchTodoData() } + + onDeleteTodo = async (id) => { + await fetch(`${hostUrl}/kimjieun/${id}`, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + }, + }) + + this.fetchTodoData() + } } diff --git a/mission002/kimjieun/utils/constants.js b/mission002/kimjieun/utils/constants.js index 337dece..8a9d777 100644 --- a/mission002/kimjieun/utils/constants.js +++ b/mission002/kimjieun/utils/constants.js @@ -1 +1,2 @@ export const ENTER = 'Enter' +export const DESTROY = 'destroy' From f314346c57abcf86992c9da196fb8caf2823f188 Mon Sep 17 00:00:00 2001 From: kim Stella Date: Tue, 24 Dec 2019 15:51:04 +0900 Subject: [PATCH 07/12] =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=EB=B0=98=EC=98=81?= =?UTF-8?q?=204.=20add=20toggle=20api=20connect=205.=20add=20all=20todo=20?= =?UTF-8?q?count.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission002/kimjieun/components/TodoCount.js | 13 +++++++++++ mission002/kimjieun/components/TodoList.js | 6 +++-- mission002/kimjieun/index.html | 2 +- mission002/kimjieun/js/App.js | 26 +++++++++++++++++---- mission002/kimjieun/js/main.js | 4 ++++ mission002/kimjieun/utils/constants.js | 2 ++ 6 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 mission002/kimjieun/components/TodoCount.js diff --git a/mission002/kimjieun/components/TodoCount.js b/mission002/kimjieun/components/TodoCount.js new file mode 100644 index 0000000..a76c7ae --- /dev/null +++ b/mission002/kimjieun/components/TodoCount.js @@ -0,0 +1,13 @@ +export default class TodoCount { + constructor({ $selector }) { + this.$selector = $selector + } + + createHtmlString = (data) => { + return `총 ${data.length} 개` + } + + createTodoCount = (data) => { + this.$selector.innerHTML = this.createHtmlString(data) + } +} diff --git a/mission002/kimjieun/components/TodoList.js b/mission002/kimjieun/components/TodoList.js index b79950b..ca5d5d5 100644 --- a/mission002/kimjieun/components/TodoList.js +++ b/mission002/kimjieun/components/TodoList.js @@ -1,4 +1,4 @@ -import { DESTROY } from '../utils/constants.js' +import { DESTROY, TOGGLE } from '../utils/constants.js' export default class TodoList { constructor({ $selector }) { @@ -9,12 +9,14 @@ export default class TodoList { init = () => { this.$selector.addEventListener('click', (e) => { if (e.target.className === DESTROY) this.onDeleteTodo(e.target.parentNode.dataset.idx) + if (e.target.className === TOGGLE) this.onToggleTodo(e.target.parentNode.dataset.idx) }) } createLiClassName = (isCompleted) => { if (!isCompleted) return 'view' - return 'completed' + if (isCompleted) return 'completed' + return '' } createTodoListHtmlString = ({ content, isCompleted, _id }) => { diff --git a/mission002/kimjieun/index.html b/mission002/kimjieun/index.html index 7150ec5..2a9b631 100644 --- a/mission002/kimjieun/index.html +++ b/mission002/kimjieun/index.html @@ -17,7 +17,7 @@

    TODOS

      - 총 0 개 +
      • 전체보기 diff --git a/mission002/kimjieun/js/App.js b/mission002/kimjieun/js/App.js index 56a6d8e..b89b17a 100644 --- a/mission002/kimjieun/js/App.js +++ b/mission002/kimjieun/js/App.js @@ -1,11 +1,12 @@ import { apiHandler } from '../utils/api.js' -import { ENTER } from '../utils/constants.js' +import { ENTER, NAME } from '../utils/constants.js' import { hostUrl } from '../utils/url.js' export default class App { - constructor({ todoList, todoInput }) { + constructor({ todoList, todoInput, todoCount }) { this.todoList = todoList this.todoInput = todoInput + this.todoCount = todoCount this.init() this.fetchTodoData() @@ -14,6 +15,7 @@ export default class App { init = () => { this.todoInput.onKeyDown = this.onKeyDown.bind(this) this.todoList.onDeleteTodo = this.onDeleteTodo.bind(this) + this.todoList.onToggleTodo = this.onToggleTodo.bind(this) } fetchTodoData = async () => { @@ -23,15 +25,20 @@ export default class App { setState = (data) => { this.render(data) + this.createTodoCount(data) } render = (data) => { this.todoList.render(data) } + createTodoCount = (data) => { + this.todoCount.createTodoCount(data) + } + onKeyDown = async (e) => { if (e.key === ENTER) { - const data = await fetch(`${hostUrl}/kimjieun`, { + const data = await fetch(`${hostUrl}/${NAME}`, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -48,7 +55,7 @@ export default class App { } onDeleteTodo = async (id) => { - await fetch(`${hostUrl}/kimjieun/${id}`, { + await fetch(`${hostUrl}/${NAME}/${id}`, { method: 'DELETE', headers: { 'Content-Type': 'application/json', @@ -57,4 +64,15 @@ export default class App { this.fetchTodoData() } + + onToggleTodo = async (id) => { + await fetch(`${hostUrl}/${NAME}/${id}/toggle`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + }) + + this.fetchTodoData() + } } diff --git a/mission002/kimjieun/js/main.js b/mission002/kimjieun/js/main.js index c89036a..0b7be2c 100644 --- a/mission002/kimjieun/js/main.js +++ b/mission002/kimjieun/js/main.js @@ -1,6 +1,7 @@ import App from './App.js' import TodoList from '../components/TodoList.js' import TodoInput from '../components/TodoInput.js' +import TodoCount from '../components/TodoCount.js' new App({ todoList: new TodoList({ @@ -9,4 +10,7 @@ new App({ todoInput: new TodoInput({ $selector: document.querySelector('#new-todo-title'), }), + todoCount: new TodoCount({ + $selector: document.querySelector('.todo-count'), + }), }) diff --git a/mission002/kimjieun/utils/constants.js b/mission002/kimjieun/utils/constants.js index 8a9d777..eccc27c 100644 --- a/mission002/kimjieun/utils/constants.js +++ b/mission002/kimjieun/utils/constants.js @@ -1,2 +1,4 @@ export const ENTER = 'Enter' export const DESTROY = 'destroy' +export const TOGGLE = 'toggle' +export const NAME = 'kimjieun' From c24899b5a12f88848dd0fd1498e929a24b1e1123 Mon Sep 17 00:00:00 2001 From: Stellakim1230 Date: Wed, 25 Dec 2019 16:42:24 +0900 Subject: [PATCH 08/12] =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=EB=B0=98=EC=98=81?= =?UTF-8?q?=201.=20=EC=A0=84=EC=B2=B4=EB=B3=B4=EA=B8=B0,=20=ED=97=A4?= =?UTF-8?q?=EC=95=BC=ED=95=A0=20=EC=9D=BC,=20=EC=99=84=EB=A3=8C=ED=95=9C?= =?UTF-8?q?=20=EC=9D=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0,=20=EC=B4=9D=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=88=98=20=EB=B3=B4=EC=97=AC=EC=A3=BC=EA=B8=B0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission002/kimjieun/components/TodoCheck.js | 17 +++++++++++++++++ mission002/kimjieun/js/App.js | 17 +++++++++++++++-- mission002/kimjieun/js/main.js | 4 ++++ mission002/kimjieun/utils/constants.js | 3 +++ 4 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 mission002/kimjieun/components/TodoCheck.js diff --git a/mission002/kimjieun/components/TodoCheck.js b/mission002/kimjieun/components/TodoCheck.js new file mode 100644 index 0000000..f1a3c81 --- /dev/null +++ b/mission002/kimjieun/components/TodoCheck.js @@ -0,0 +1,17 @@ +import { ACTIVE, COMPLETED, ALLSELECTED } from '../utils/constants.js' + +export default class TodoCheck { + constructor({ $selector }) { + this.$selector = $selector + + this.init() + } + + init = () => { + this.$selector.addEventListener('click', (e) => { + if (e.target.className === ACTIVE) this.onTodoCheck(ACTIVE) + if (e.target.className === COMPLETED) this.onTodoCheck(COMPLETED) + if (e.target.className === ALLSELECTED) this.onTodoCheck(ALLSELECTED) + }) + } +} diff --git a/mission002/kimjieun/js/App.js b/mission002/kimjieun/js/App.js index b89b17a..f60c610 100644 --- a/mission002/kimjieun/js/App.js +++ b/mission002/kimjieun/js/App.js @@ -1,12 +1,13 @@ import { apiHandler } from '../utils/api.js' -import { ENTER, NAME } from '../utils/constants.js' +import { ENTER, NAME, ACTIVE, COMPLETED, ALLSELECTED } from '../utils/constants.js' import { hostUrl } from '../utils/url.js' export default class App { - constructor({ todoList, todoInput, todoCount }) { + constructor({ todoList, todoInput, todoCount, todoCheck }) { this.todoList = todoList this.todoInput = todoInput this.todoCount = todoCount + this.todoCheck = todoCheck this.init() this.fetchTodoData() @@ -16,10 +17,12 @@ export default class App { this.todoInput.onKeyDown = this.onKeyDown.bind(this) this.todoList.onDeleteTodo = this.onDeleteTodo.bind(this) this.todoList.onToggleTodo = this.onToggleTodo.bind(this) + this.todoCheck.onTodoCheck = this.onTodoCheck.bind(this) } fetchTodoData = async () => { const data = await apiHandler({ url: hostUrl }) + this.data = data this.setState(data) } @@ -75,4 +78,14 @@ export default class App { this.fetchTodoData() } + + onTodoCheck = (todoStatus) => { + const todoData = this.data.filter(d => { + if (todoStatus === ACTIVE) return !d.isCompleted + if (todoStatus === COMPLETED) return d.isCompleted + if (todoStatus === ALLSELECTED) return this.data + }) + + this.setState(todoData) + } } diff --git a/mission002/kimjieun/js/main.js b/mission002/kimjieun/js/main.js index 0b7be2c..b93a0d8 100644 --- a/mission002/kimjieun/js/main.js +++ b/mission002/kimjieun/js/main.js @@ -2,6 +2,7 @@ import App from './App.js' import TodoList from '../components/TodoList.js' import TodoInput from '../components/TodoInput.js' import TodoCount from '../components/TodoCount.js' +import TodoCheck from '../components/TodoCheck.js' new App({ todoList: new TodoList({ @@ -13,4 +14,7 @@ new App({ todoCount: new TodoCount({ $selector: document.querySelector('.todo-count'), }), + todoCheck: new TodoCheck({ + $selector: document.querySelector('.filters'), + }) }) diff --git a/mission002/kimjieun/utils/constants.js b/mission002/kimjieun/utils/constants.js index eccc27c..a66b0d8 100644 --- a/mission002/kimjieun/utils/constants.js +++ b/mission002/kimjieun/utils/constants.js @@ -2,3 +2,6 @@ export const ENTER = 'Enter' export const DESTROY = 'destroy' export const TOGGLE = 'toggle' export const NAME = 'kimjieun' +export const ACTIVE = 'active' +export const COMPLETED = 'completed' +export const ALLSELECTED = 'all selected' From 278526a2d1ff1f8866847148e2b7a9e74676b6f1 Mon Sep 17 00:00:00 2001 From: Stellakim1230 Date: Wed, 25 Dec 2019 17:00:13 +0900 Subject: [PATCH 09/12] =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=EB=B0=98=EC=98=81?= =?UTF-8?q?=20localStorage=EC=97=90=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EB=84=A3=EA=B8=B0.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission002/kimjieun/js/App.js | 39 ++++++++++++++++---------- mission002/kimjieun/utils/constants.js | 1 + 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/mission002/kimjieun/js/App.js b/mission002/kimjieun/js/App.js index f60c610..e701a37 100644 --- a/mission002/kimjieun/js/App.js +++ b/mission002/kimjieun/js/App.js @@ -1,5 +1,12 @@ import { apiHandler } from '../utils/api.js' -import { ENTER, NAME, ACTIVE, COMPLETED, ALLSELECTED } from '../utils/constants.js' +import { + ENTER, + NAME, + ACTIVE, + COMPLETED, + ALLSELECTED, + INIT, +} from '../utils/constants.js' import { hostUrl } from '../utils/url.js' export default class App { @@ -10,7 +17,7 @@ export default class App { this.todoCheck = todoCheck this.init() - this.fetchTodoData() + this.fetchTodoData(INIT) } init = () => { @@ -20,10 +27,18 @@ export default class App { this.todoCheck.onTodoCheck = this.onTodoCheck.bind(this) } - fetchTodoData = async () => { - const data = await apiHandler({ url: hostUrl }) - this.data = data - this.setState(data) + getStorageData = (storageData) => { + this.data = JSON.parse(storageData) + this.setState(this.data) + } + + fetchTodoData = async (isStatus) => { + const storageData = localStorage.getItem('todoData') + if (isStatus === INIT && storageData) return this.getStorageData(storageData) + + this.data = await apiHandler({ url: hostUrl }) + localStorage.setItem('todoData', JSON.stringify(this.data)) + this.setState(this.data) } setState = (data) => { @@ -43,9 +58,7 @@ export default class App { if (e.key === ENTER) { const data = await fetch(`${hostUrl}/${NAME}`, { method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, + headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ content: e.target.value, }), @@ -60,9 +73,7 @@ export default class App { onDeleteTodo = async (id) => { await fetch(`${hostUrl}/${NAME}/${id}`, { method: 'DELETE', - headers: { - 'Content-Type': 'application/json', - }, + headers: { 'Content-Type': 'application/json' }, }) this.fetchTodoData() @@ -71,9 +82,7 @@ export default class App { onToggleTodo = async (id) => { await fetch(`${hostUrl}/${NAME}/${id}/toggle`, { method: 'PUT', - headers: { - 'Content-Type': 'application/json', - }, + headers: { 'Content-Type': 'application/json' }, }) this.fetchTodoData() diff --git a/mission002/kimjieun/utils/constants.js b/mission002/kimjieun/utils/constants.js index a66b0d8..d740724 100644 --- a/mission002/kimjieun/utils/constants.js +++ b/mission002/kimjieun/utils/constants.js @@ -5,3 +5,4 @@ export const NAME = 'kimjieun' export const ACTIVE = 'active' export const COMPLETED = 'completed' export const ALLSELECTED = 'all selected' +export const INIT = 'init' From d20f675e9d9b5a2ef2e0def103e1d279d49bc9e9 Mon Sep 17 00:00:00 2001 From: Stellakim1230 Date: Wed, 25 Dec 2019 17:19:11 +0900 Subject: [PATCH 10/12] =?UTF-8?q?fetch=20=ED=95=B4=EC=98=A4=EB=8A=94=20?= =?UTF-8?q?=EB=B6=80=EB=B6=84=20try~catch=20=EC=A0=81=EC=9A=A9.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission002/kimjieun/js/App.js | 59 +++++++++++++++++--------- mission002/kimjieun/utils/api.js | 4 +- mission002/kimjieun/utils/constants.js | 1 - 3 files changed, 40 insertions(+), 24 deletions(-) diff --git a/mission002/kimjieun/js/App.js b/mission002/kimjieun/js/App.js index e701a37..52d52bc 100644 --- a/mission002/kimjieun/js/App.js +++ b/mission002/kimjieun/js/App.js @@ -1,7 +1,6 @@ import { apiHandler } from '../utils/api.js' import { ENTER, - NAME, ACTIVE, COMPLETED, ALLSELECTED, @@ -36,9 +35,13 @@ export default class App { const storageData = localStorage.getItem('todoData') if (isStatus === INIT && storageData) return this.getStorageData(storageData) - this.data = await apiHandler({ url: hostUrl }) - localStorage.setItem('todoData', JSON.stringify(this.data)) - this.setState(this.data) + try { + this.data = await apiHandler({ url: hostUrl }) + localStorage.setItem('todoData', JSON.stringify(this.data)) + this.setState(this.data) + } catch (error) { + throw new Error(error) + } } setState = (data) => { @@ -56,34 +59,48 @@ export default class App { onKeyDown = async (e) => { if (e.key === ENTER) { - const data = await fetch(`${hostUrl}/${NAME}`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - content: e.target.value, - }), - }) - - if (data) e.target.value = '' + try { + const data = await apiHandler({ + url: hostUrl, + method: 'POST', + body: JSON.stringify({ + content: e.target.value, + }), + }) + + if (data) e.target.value = '' + } catch (error) { + throw new Error(error) + } } this.fetchTodoData() } onDeleteTodo = async (id) => { - await fetch(`${hostUrl}/${NAME}/${id}`, { - method: 'DELETE', - headers: { 'Content-Type': 'application/json' }, - }) + try { + await apiHandler({ + url: hostUrl, + customUrl: id, + method: 'DELETE', + }) + } catch (error) { + throw new Error(error) + } this.fetchTodoData() } onToggleTodo = async (id) => { - await fetch(`${hostUrl}/${NAME}/${id}/toggle`, { - method: 'PUT', - headers: { 'Content-Type': 'application/json' }, - }) + try { + await apiHandler({ + url: hostUrl, + customUrl: `${id}/toggle`, + method: 'PUT', + }) + } catch (error) { + throw new Error(error) + } this.fetchTodoData() } diff --git a/mission002/kimjieun/utils/api.js b/mission002/kimjieun/utils/api.js index 61d6e17..8002db7 100644 --- a/mission002/kimjieun/utils/api.js +++ b/mission002/kimjieun/utils/api.js @@ -1,6 +1,6 @@ const username = 'kimjieun' -export const apiHandler = async ({ url, method, body }) => { +export const apiHandler = async ({ url, method, body, customUrl }) => { const options = { method, headers: { @@ -10,7 +10,7 @@ export const apiHandler = async ({ url, method, body }) => { } try { - const res = await fetch(`${url}/${username}`, options) + const res = await fetch(`${url}/${username}${customUrl ? `/${customUrl}` : ''}`, options) if (res.ok) { const data = await res.json() diff --git a/mission002/kimjieun/utils/constants.js b/mission002/kimjieun/utils/constants.js index d740724..d144aca 100644 --- a/mission002/kimjieun/utils/constants.js +++ b/mission002/kimjieun/utils/constants.js @@ -1,7 +1,6 @@ export const ENTER = 'Enter' export const DESTROY = 'destroy' export const TOGGLE = 'toggle' -export const NAME = 'kimjieun' export const ACTIVE = 'active' export const COMPLETED = 'completed' export const ALLSELECTED = 'all selected' From 4db3d6e0652c00baad4a1aade625f453c664c8e5 Mon Sep 17 00:00:00 2001 From: Stellakim1230 Date: Mon, 30 Dec 2019 17:33:21 +0900 Subject: [PATCH 11/12] =?UTF-8?q?=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EB=B0=98=EC=98=81.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission002/kimjieun/js/App.js | 6 ++++-- mission002/kimjieun/utils/api.js | 4 ++-- mission002/kimjieun/utils/constants.js | 1 + 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/mission002/kimjieun/js/App.js b/mission002/kimjieun/js/App.js index 52d52bc..9f2b6d1 100644 --- a/mission002/kimjieun/js/App.js +++ b/mission002/kimjieun/js/App.js @@ -58,6 +58,8 @@ export default class App { } onKeyDown = async (e) => { + if (!e.target.value) return + if (e.key === ENTER) { try { const data = await apiHandler({ @@ -72,9 +74,9 @@ export default class App { } catch (error) { throw new Error(error) } - } - this.fetchTodoData() + this.fetchTodoData() + } } onDeleteTodo = async (id) => { diff --git a/mission002/kimjieun/utils/api.js b/mission002/kimjieun/utils/api.js index 8002db7..8ed3416 100644 --- a/mission002/kimjieun/utils/api.js +++ b/mission002/kimjieun/utils/api.js @@ -1,4 +1,4 @@ -const username = 'kimjieun' +import { USERNAME } from './constants.js' export const apiHandler = async ({ url, method, body, customUrl }) => { const options = { @@ -10,7 +10,7 @@ export const apiHandler = async ({ url, method, body, customUrl }) => { } try { - const res = await fetch(`${url}/${username}${customUrl ? `/${customUrl}` : ''}`, options) + const res = await fetch(`${url}/${USERNAME}${customUrl ? `/${customUrl}` : ''}`, options) if (res.ok) { const data = await res.json() diff --git a/mission002/kimjieun/utils/constants.js b/mission002/kimjieun/utils/constants.js index d144aca..8ffaed8 100644 --- a/mission002/kimjieun/utils/constants.js +++ b/mission002/kimjieun/utils/constants.js @@ -5,3 +5,4 @@ export const ACTIVE = 'active' export const COMPLETED = 'completed' export const ALLSELECTED = 'all selected' export const INIT = 'init' +export const USERNAME = 'kimjieun' From 5999841f6e3e6adf8d80faa88ed2eb9a251e07f5 Mon Sep 17 00:00:00 2001 From: Stellakim1230 Date: Tue, 7 Jan 2020 23:49:33 +0900 Subject: [PATCH 12/12] =?UTF-8?q?mission002=20=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EB=B0=98=EC=98=81.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mission002/kimjieun/components/TodoCheck.js | 11 ++++++++--- mission002/kimjieun/components/TodoList.js | 10 +++------- mission002/kimjieun/index.html | 2 +- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/mission002/kimjieun/components/TodoCheck.js b/mission002/kimjieun/components/TodoCheck.js index f1a3c81..2fc1ec0 100644 --- a/mission002/kimjieun/components/TodoCheck.js +++ b/mission002/kimjieun/components/TodoCheck.js @@ -9,9 +9,14 @@ export default class TodoCheck { init = () => { this.$selector.addEventListener('click', (e) => { - if (e.target.className === ACTIVE) this.onTodoCheck(ACTIVE) - if (e.target.className === COMPLETED) this.onTodoCheck(COMPLETED) - if (e.target.className === ALLSELECTED) this.onTodoCheck(ALLSELECTED) + switch (e.target.className) { + case ACTIVE: + return this.onTodoCheck(ACTIVE) + case COMPLETED: + return this.onTodoCheck(COMPLETED) + default: + return this.onTodoCheck(ALLSELECTED) + } }) } } diff --git a/mission002/kimjieun/components/TodoList.js b/mission002/kimjieun/components/TodoList.js index ca5d5d5..216b86e 100644 --- a/mission002/kimjieun/components/TodoList.js +++ b/mission002/kimjieun/components/TodoList.js @@ -8,16 +8,12 @@ export default class TodoList { init = () => { this.$selector.addEventListener('click', (e) => { - if (e.target.className === DESTROY) this.onDeleteTodo(e.target.parentNode.dataset.idx) - if (e.target.className === TOGGLE) this.onToggleTodo(e.target.parentNode.dataset.idx) + if (e.target.className === DESTROY) return this.onDeleteTodo(e.target.parentNode.dataset.idx) + if (e.target.className === TOGGLE) return this.onToggleTodo(e.target.parentNode.dataset.idx) }) } - createLiClassName = (isCompleted) => { - if (!isCompleted) return 'view' - if (isCompleted) return 'completed' - return '' - } + createLiClassName = (isCompleted) => isCompleted ? 'completed' : 'view' createTodoListHtmlString = ({ content, isCompleted, _id }) => { return `
      • diff --git a/mission002/kimjieun/index.html b/mission002/kimjieun/index.html index 2a9b631..bc06fd5 100644 --- a/mission002/kimjieun/index.html +++ b/mission002/kimjieun/index.html @@ -7,7 +7,7 @@ -
        +

        TODOS