From 7e834570649147b553fcaecade8141f4a0496024 Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Fri, 2 Apr 2021 16:49:17 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat=20:=20User=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- src/js/index.js | 35 ++++++++++++++++++++++++++++++++--- 2 files changed, 34 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 3c1fdfe..391fccc 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ ## ๐ŸŽฏ ์š”๊ตฌ์‚ฌํ•ญ -- [ ] 1. User ์ถ”๊ฐ€ํ•˜๊ธฐ +- [x] 1. User ์ถ”๊ฐ€ํ•˜๊ธฐ - [ ] 2. User์˜ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] 3. User ์‚ญ์ œํ•˜๊ธฐ - [ ] 3. todoItem ์ถ”๊ฐ€ํ•˜๊ธฐ @@ -48,7 +48,7 @@ ## ๐Ÿ•ต๏ธโ€โ™‚๏ธ ์ œ์•ฝ์‚ฌํ•ญ -- [ ] 1. User์˜ ์ด๋ฆ„์€ ์ตœ์†Œ 2๊ธ€์ž ์ด์ƒ์ด์–ด์•ผ ํ•œ๋‹ค. +- [x] 1. User์˜ ์ด๋ฆ„์€ ์ตœ์†Œ 2๊ธ€์ž ์ด์ƒ์ด์–ด์•ผ ํ•œ๋‹ค. - [ ] 2. TodoItem Contents๋Š” ์ตœ์†Œ 2๊ธ€์ž ์ด์ƒ์ด์–ด์•ผ ํ•œ๋‹ค.
diff --git a/src/js/index.js b/src/js/index.js index a77c371..ae2264a 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,7 +1,36 @@ -const onUserCreateHandler = () => { - const userName = prompt("์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์€ ์ด๋ฆ„์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”."); +const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com'; + +async function userCreateHandler() { + const userName = prompt("์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์€ ์ด๋ฆ„์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”."); + if (userName.length >= 2) { + const userForm = createUserForm(userName); + const createdUserName = await createUser(userForm); + console.log(createdUserName); + } else { + alert("์ด๋ฆ„์€ ๋‘ ๊ธ€์ž ์ด์ƒ์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค!"); + } +} + +async function createUser(userForm) { + const createdUserResponse = await fetch(BASE_URL + "/api/users", userForm); + const createdUser = await createdUserResponse.json(); + return createdUser.name; +} + +function createUserForm(userName) { + const newUser = { + name: userName + }; + + return { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(newUser) + }; } const userCreateButton = document.querySelector('.user-create-button') -userCreateButton.addEventListener('click', onUserCreateHandler) +userCreateButton.addEventListener('click', userCreateHandler) From 077872bb66ddd00bc3fdd7d9d929fe270a93cc1e Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Fri, 2 Apr 2021 20:27:59 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat=20:=20=EC=A0=80=EC=9E=A5=EB=90=9C=20?= =?UTF-8?q?=EC=9C=A0=EC=A0=80=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 --- index.html | 2 -- src/js/index.js | 45 ++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index dea7958..123e4f4 100644 --- a/index.html +++ b/index.html @@ -16,8 +16,6 @@

- - diff --git a/src/js/index.js b/src/js/index.js index ae2264a..0bff1c2 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,11 +1,49 @@ const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com'; +function showAllUsersForm() { + return { + method: 'GET', + headers: { + 'Content-Type': 'application/json' + } + }; +} + +async function showAllUsers(userId) { + const showAllUsersResponse = await fetch(BASE_URL + "/api/users", showAllUsersForm()); + const allUsers = await showAllUsersResponse.json(); + const userList = document.getElementById("user-list"); + for (let i = 0; i < allUsers.length; i++) { + if (document.getElementById(allUsers[i]._id) == null) { + const userButton = document.createElement("button"); + userButton.id = allUsers[i]._id; + userButton.innerText = allUsers[i].name; + userButton.classList.add("ripple"); + userList.prepend(userButton); + } + } + showActiveUser(userId, userList); +} + +function showActiveUser(userId, userList) { + const activeUser = document.getElementById(userId); + if (activeUser == null) { + userList.firstChild.classList.add("active"); + } else { + const activeUsers = document.getElementsByClassName("active"); + for (let i = 0; i < activeUsers.length; i++) { + activeUsers[i].classList.remove("active"); + } + activeUser.classList.add("active"); + } +} + async function userCreateHandler() { const userName = prompt("์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์€ ์ด๋ฆ„์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”."); if (userName.length >= 2) { const userForm = createUserForm(userName); - const createdUserName = await createUser(userForm); - console.log(createdUserName); + const createdUserId = await createUser(userForm); + await showAllUsers(createdUserId); } else { alert("์ด๋ฆ„์€ ๋‘ ๊ธ€์ž ์ด์ƒ์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค!"); } @@ -14,7 +52,7 @@ async function userCreateHandler() { async function createUser(userForm) { const createdUserResponse = await fetch(BASE_URL + "/api/users", userForm); const createdUser = await createdUserResponse.json(); - return createdUser.name; + return createdUser._id; } function createUserForm(userName) { @@ -31,6 +69,7 @@ function createUserForm(userName) { }; } +showAllUsers(0); const userCreateButton = document.querySelector('.user-create-button') userCreateButton.addEventListener('click', userCreateHandler) From 259e44c77eb03a3685183a76dbe275031bc887c0 Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Fri, 2 Apr 2021 21:56:56 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat=20:=20User=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=8B=9C=20User=20=EB=B3=84=20todo=20list=20=EB=B6=88=EB=9F=AC?= =?UTF-8?q?=EC=98=A4=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- index.html | 67 ------------------------------- src/js/index.js | 104 ++++++++++++++++++++++++++++++++++++------------ 3 files changed, 80 insertions(+), 93 deletions(-) diff --git a/README.md b/README.md index 391fccc..e9f9080 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ ## ๐ŸŽฏ ์š”๊ตฌ์‚ฌํ•ญ - [x] 1. User ์ถ”๊ฐ€ํ•˜๊ธฐ -- [ ] 2. User์˜ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ +- [x] 2. User์˜ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] 3. User ์‚ญ์ œํ•˜๊ธฐ - [ ] 3. todoItem ์ถ”๊ฐ€ํ•˜๊ธฐ - [ ] 4. todoItem ๋ถˆ๋Ÿฌ์˜ค๊ธฐ diff --git a/index.html b/index.html index 123e4f4..a62b9e9 100644 --- a/index.html +++ b/index.html @@ -35,73 +35,6 @@

    -
  • -
    - -
    -
    • -
  • -
    - - - -
    - -
    • -
  • -
    - - - -
    - -
    • -
  • -
    - - - -
    - -
    • -
  • -
    - - - -
    - -
    • -
  • -
    - - - -
    - -
diff --git a/src/js/index.js b/src/js/index.js index 0bff1c2..dff1a09 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,6 +1,9 @@ const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com'; +const userList = document.getElementById("user-list"); +const userCreateButton = document.querySelector(".user-create-button"); +const todoList = document.querySelector(".todo-list"); -function showAllUsersForm() { +function getRequestForm() { return { method: 'GET', headers: { @@ -10,9 +13,8 @@ function showAllUsersForm() { } async function showAllUsers(userId) { - const showAllUsersResponse = await fetch(BASE_URL + "/api/users", showAllUsersForm()); + const showAllUsersResponse = await fetch(BASE_URL + "/api/users", getRequestForm()); const allUsers = await showAllUsersResponse.json(); - const userList = document.getElementById("user-list"); for (let i = 0; i < allUsers.length; i++) { if (document.getElementById(allUsers[i]._id) == null) { const userButton = document.createElement("button"); @@ -22,20 +24,41 @@ async function showAllUsers(userId) { userList.prepend(userButton); } } - showActiveUser(userId, userList); + showActiveUser(userId); } -function showActiveUser(userId, userList) { - const activeUser = document.getElementById(userId); +function showActiveUser(userId) { + let activeUser = document.getElementById(userId); if (activeUser == null) { - userList.firstChild.classList.add("active"); + const defaultUser = userList.firstChild; + defaultUser.classList.add("active"); + activeUser = defaultUser; } else { - const activeUsers = document.getElementsByClassName("active"); - for (let i = 0; i < activeUsers.length; i++) { - activeUsers[i].classList.remove("active"); - } - activeUser.classList.add("active"); + active(activeUser); } + showActiveUserTodo(activeUser); +} + +function active(activeUser) { + const activeUsers = document.getElementsByClassName("active"); + for (let i = 0; i < activeUsers.length; i++) { + activeUsers[i].classList.remove("active"); + } + activeUser.classList.add("active"); +} + +function createUserForm(userName) { + const newUser = { + name: userName + }; + + return { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(newUser) + }; } async function userCreateHandler() { @@ -55,21 +78,52 @@ async function createUser(userForm) { return createdUser._id; } -function createUserForm(userName) { - const newUser = { - name: userName - }; +function selectUser(event) { + const button = event.target.closest("button"); + if (button.id != null) { + const activeUser = event.target; + active(activeUser); + showActiveUserTodo(activeUser); + } +} - return { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(newUser) - }; +async function showActiveUserTodo(activeUser) { + const todoByUserIdResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id, getRequestForm()); + const todo = await todoByUserIdResponse.json(); + const activeUserTodo = todo.todoList; + removeOtherTodo(); + for (let i = 0; i < activeUserTodo.length; i++) { + const item = activeUserTodo[i].contents; + todoList.insertAdjacentHTML("beforeend", todoTemplate(item)); + } } +function removeOtherTodo() { + while (todoList.hasChildNodes()) { + todoList.removeChild(todoList.firstChild); + } +} + +function todoTemplate(item) { + return `
  • +
    + + + +
    + +
    • `; +} + + showAllUsers(0); -const userCreateButton = document.querySelector('.user-create-button') -userCreateButton.addEventListener('click', userCreateHandler) +userCreateButton.addEventListener("click", userCreateHandler); +userList.addEventListener("click", selectUser); \ No newline at end of file From b77f29bf61b4c52bf508c2de1f7c3a52115d8583 Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Fri, 2 Apr 2021 22:13:50 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat=20:=20User=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 ++++++------ src/js/index.js | 22 +++++++++++++++++++++- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e9f9080..d30831b 100644 --- a/README.md +++ b/README.md @@ -29,12 +29,12 @@ - [x] 1. User ์ถ”๊ฐ€ํ•˜๊ธฐ - [x] 2. User์˜ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ -- [ ] 3. User ์‚ญ์ œํ•˜๊ธฐ -- [ ] 3. todoItem ์ถ”๊ฐ€ํ•˜๊ธฐ -- [ ] 4. todoItem ๋ถˆ๋Ÿฌ์˜ค๊ธฐ -- [ ] 5. todoItem completeํ•˜๊ธฐ -- [ ] 6. todoItem ์‚ญ์ œํ•˜๊ธฐ -- [ ] 7. todoItem contents ๋‚ด์šฉ ์ˆ˜์ •ํ•˜๊ธฐ +- [x] 3. User ์‚ญ์ œํ•˜๊ธฐ +- [ ] 4. todoItem ์ถ”๊ฐ€ํ•˜๊ธฐ +- [ ] 5. todoItem ๋ถˆ๋Ÿฌ์˜ค๊ธฐ +- [ ] 6. todoItem completeํ•˜๊ธฐ +- [ ] 7. todoItem ์‚ญ์ œํ•˜๊ธฐ +- [ ] 8. todoItem contents ๋‚ด์šฉ ์ˆ˜์ •ํ•˜๊ธฐ
    diff --git a/src/js/index.js b/src/js/index.js index dff1a09..b889a7a 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,6 +1,7 @@ const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com'; const userList = document.getElementById("user-list"); const userCreateButton = document.querySelector(".user-create-button"); +const userDeleteButton = document.querySelector(".user-delete-button"); const todoList = document.querySelector(".todo-list"); function getRequestForm() { @@ -122,8 +123,27 @@ function todoTemplate(item) { `; } +function deleteUserForm() { + return { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json' + } + }; +} + +async function deleteUserById() { + const activeUser = document.querySelector(".active"); + await fetch(BASE_URL + "/api/users/" + activeUser.id, deleteUserForm()); + userDeleteButton.classList.remove("active"); + const deletedUser = document.getElementById(activeUser.id); + userList.removeChild(deletedUser); + showActiveUser(); +} + -showAllUsers(0); +showAllUsers(); userCreateButton.addEventListener("click", userCreateHandler); +userDeleteButton.addEventListener("click", deleteUserById) userList.addEventListener("click", selectUser); \ No newline at end of file From b3f74539ed4e1f8dbb1052d0109c276b5a166e7c Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Sat, 3 Apr 2021 00:32:47 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat=20:=20User=EB=B3=84=20todo=20item=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=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 --- README.md | 4 ++-- src/js/index.js | 31 ++++++++++++++++++++++++++++++- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d30831b..48c2b91 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ - [x] 1. User ์ถ”๊ฐ€ํ•˜๊ธฐ - [x] 2. User์˜ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [x] 3. User ์‚ญ์ œํ•˜๊ธฐ -- [ ] 4. todoItem ์ถ”๊ฐ€ํ•˜๊ธฐ +- [x] 4. todoItem ์ถ”๊ฐ€ํ•˜๊ธฐ - [ ] 5. todoItem ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] 6. todoItem completeํ•˜๊ธฐ - [ ] 7. todoItem ์‚ญ์ œํ•˜๊ธฐ @@ -49,7 +49,7 @@ ## ๐Ÿ•ต๏ธโ€โ™‚๏ธ ์ œ์•ฝ์‚ฌํ•ญ - [x] 1. User์˜ ์ด๋ฆ„์€ ์ตœ์†Œ 2๊ธ€์ž ์ด์ƒ์ด์–ด์•ผ ํ•œ๋‹ค. -- [ ] 2. TodoItem Contents๋Š” ์ตœ์†Œ 2๊ธ€์ž ์ด์ƒ์ด์–ด์•ผ ํ•œ๋‹ค. +- [x] 2. TodoItem Contents๋Š” ์ตœ์†Œ 2๊ธ€์ž ์ด์ƒ์ด์–ด์•ผ ํ•œ๋‹ค.
    diff --git a/src/js/index.js b/src/js/index.js index b889a7a..079f67f 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -3,6 +3,7 @@ const userList = document.getElementById("user-list"); const userCreateButton = document.querySelector(".user-create-button"); const userDeleteButton = document.querySelector(".user-delete-button"); const todoList = document.querySelector(".todo-list"); +const todoInput = document.querySelector(".new-todo"); function getRequestForm() { return { @@ -141,9 +142,37 @@ async function deleteUserById() { showActiveUser(); } +function createContentForm(content) { + const newContents = { + contents: content + }; + + return { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(newContents) + }; +} + +async function addTodoByUser(event) { + const content = event.target.value; + if (event.key === "Enter" && content.length >= 2) { + const activeUser = document.querySelector(".active"); + await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items", createContentForm(content)); + todoList.insertAdjacentHTML("beforeend", todoTemplate(content)); + todoInput.value = ""; + } + if (content.length < 2) { + alert("๋‚ด์šฉ์€ 2๊ธ€์ž ์ด์ƒ์ด์–ด์•ผํ•ฉ๋‹ˆ๋‹ค!"); + todoInput.value = ""; + } +} showAllUsers(); userCreateButton.addEventListener("click", userCreateHandler); userDeleteButton.addEventListener("click", deleteUserById) -userList.addEventListener("click", selectUser); \ No newline at end of file +userList.addEventListener("click", selectUser); +todoInput.addEventListener("keypress", addTodoByUser); \ No newline at end of file From aabe7c85be5dcd5d7aef028377d444e328a08054 Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Sat, 3 Apr 2021 01:25:07 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat=20:=20User=EB=B3=84=20todo=20item=20?= =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EC=88=98=EC=A0=95=20=EA=B8=B0=EB=8A=A5=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 --- README.md | 2 +- src/js/index.js | 67 ++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 56 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 48c2b91..56f65aa 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ - [ ] 5. todoItem ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] 6. todoItem completeํ•˜๊ธฐ - [ ] 7. todoItem ์‚ญ์ œํ•˜๊ธฐ -- [ ] 8. todoItem contents ๋‚ด์šฉ ์ˆ˜์ •ํ•˜๊ธฐ +- [x] 8. todoItem contents ๋‚ด์šฉ ์ˆ˜์ •ํ•˜๊ธฐ
    diff --git a/src/js/index.js b/src/js/index.js index 079f67f..06b47eb 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -95,7 +95,7 @@ async function showActiveUserTodo(activeUser) { const activeUserTodo = todo.todoList; removeOtherTodo(); for (let i = 0; i < activeUserTodo.length; i++) { - const item = activeUserTodo[i].contents; + const item = activeUserTodo[i]; todoList.insertAdjacentHTML("beforeend", todoTemplate(item)); } } @@ -116,11 +116,11 @@ function todoTemplate(item) { - ${item} + ${item.contents}
    - + `; } @@ -142,7 +142,7 @@ async function deleteUserById() { showActiveUser(); } -function createContentForm(content) { +function addContentForm(content) { const newContents = { contents: content }; @@ -158,21 +158,64 @@ function createContentForm(content) { async function addTodoByUser(event) { const content = event.target.value; - if (event.key === "Enter" && content.length >= 2) { + if (event.key === "Enter") { + if (content.length < 2) { + alert("๋‚ด์šฉ์€ 2๊ธ€์ž ์ด์ƒ์ด์–ด์•ผํ•ฉ๋‹ˆ๋‹ค!"); + return; + } const activeUser = document.querySelector(".active"); - await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items", createContentForm(content)); - todoList.insertAdjacentHTML("beforeend", todoTemplate(content)); - todoInput.value = ""; - } - if (content.length < 2) { - alert("๋‚ด์šฉ์€ 2๊ธ€์ž ์ด์ƒ์ด์–ด์•ผํ•ฉ๋‹ˆ๋‹ค!"); + const addTodoResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items", addContentForm(content)); + const newTodo = await addTodoResponse.json(); + todoList.insertAdjacentHTML("beforeend", todoTemplate(newTodo)); todoInput.value = ""; } } +function editContentForm(content) { + const newContents = { + contents: content + }; + + return { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(newContents) + }; +} + +async function editTodoContent(activeUser, item) { + const editTodoResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + item.id, editContentForm(item.value)); + return await editTodoResponse.json(); +} + showAllUsers(); userCreateButton.addEventListener("click", userCreateHandler); userDeleteButton.addEventListener("click", deleteUserById) userList.addEventListener("click", selectUser); -todoInput.addEventListener("keypress", addTodoByUser); \ No newline at end of file +todoInput.addEventListener("keypress", addTodoByUser); +todoList.addEventListener("dblclick", function (event) { + const li = event.target.closest("li"); + const label = li.getElementsByClassName("label")[0]; + const editInput = li.getElementsByClassName("edit")[0]; + const originalValue = label.innerText; + + li.classList.toggle("editing"); + + editInput.addEventListener("keyup", async function (event) { + const item = event.target; + const content = item.value; + if (event.key === "Enter" && content.length >= 2) { + const activeUser = document.querySelector(".active"); + await editTodoContent(activeUser, item); + showActiveUserTodo(activeUser); + li.classList.remove("editing"); + } + if (event.key === "Escape") { + event.target.value = originalValue; + li.classList.remove("editing"); + } + }); +}); \ No newline at end of file From 2708d4279eacb783a1ca092e67861a99174db44f Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Sat, 3 Apr 2021 02:06:52 +0900 Subject: [PATCH 07/13] =?UTF-8?q?feat=20:=20User=EB=B3=84=20todo=20item=20?= =?UTF-8?q?complete=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/js/index.js | 42 ++++++++++++++++++++++++++++++++++++------ 2 files changed, 37 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 56f65aa..e49d25b 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ - [x] 3. User ์‚ญ์ œํ•˜๊ธฐ - [x] 4. todoItem ์ถ”๊ฐ€ํ•˜๊ธฐ - [ ] 5. todoItem ๋ถˆ๋Ÿฌ์˜ค๊ธฐ -- [ ] 6. todoItem completeํ•˜๊ธฐ +- [x] 6. todoItem completeํ•˜๊ธฐ - [ ] 7. todoItem ์‚ญ์ œํ•˜๊ธฐ - [x] 8. todoItem contents ๋‚ด์šฉ ์ˆ˜์ •ํ•˜๊ธฐ diff --git a/src/js/index.js b/src/js/index.js index 06b47eb..bd0bca3 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -107,9 +107,10 @@ function removeOtherTodo() { } function todoTemplate(item) { - return `
  • + console.log(item.isCompleted); + return `
  • - +
    • `; } @@ -185,17 +186,45 @@ function editContentForm(content) { }; } -async function editTodoContent(activeUser, item) { - const editTodoResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + item.id, editContentForm(item.value)); +async function editTodoContent(activeUser, itemId, content) { + const editTodoResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId, editContentForm(content)); return await editTodoResponse.json(); } +function toggleCompleteForm() { + return { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + } + }; +} + +async function toggleComplete(activeUser, itemId) { + const toggleCompleteResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId + "/toggle", toggleCompleteForm()); + return await toggleCompleteResponse.json(); +} + showAllUsers(); userCreateButton.addEventListener("click", userCreateHandler); userDeleteButton.addEventListener("click", deleteUserById) userList.addEventListener("click", selectUser); todoInput.addEventListener("keypress", addTodoByUser); + +todoList.addEventListener("click", async function (event) { + const li = event.target.closest("li"); + if (event.target.classList.contains("toggle")) { + const activeUser = document.querySelector(".active"); + const itemId = li.id; + await toggleComplete(activeUser, itemId); + showActiveUserTodo(activeUser); + } + if (event.target.classList.contains("destroy")) { + li.remove(); + } +}); + todoList.addEventListener("dblclick", function (event) { const li = event.target.closest("li"); const label = li.getElementsByClassName("label")[0]; @@ -206,10 +235,11 @@ todoList.addEventListener("dblclick", function (event) { editInput.addEventListener("keyup", async function (event) { const item = event.target; + const itemId = item.parentNode.id; const content = item.value; if (event.key === "Enter" && content.length >= 2) { const activeUser = document.querySelector(".active"); - await editTodoContent(activeUser, item); + await editTodoContent(activeUser, itemId, content); showActiveUserTodo(activeUser); li.classList.remove("editing"); } From 143fff679b4c019a08d57225f5feaf609c201131 Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Sat, 3 Apr 2021 02:11:27 +0900 Subject: [PATCH 08/13] =?UTF-8?q?feat=20:=20User=20=EB=B3=84=20=EB=AA=A8?= =?UTF-8?q?=EB=93=A0=20todo=20item=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/index.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/js/index.js b/src/js/index.js index bd0bca3..c861586 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -4,6 +4,7 @@ const userCreateButton = document.querySelector(".user-create-button"); const userDeleteButton = document.querySelector(".user-delete-button"); const todoList = document.querySelector(".todo-list"); const todoInput = document.querySelector(".new-todo"); +const deleteAllButton = document.querySelector(".clear-completed"); function getRequestForm() { return { @@ -125,7 +126,7 @@ function todoTemplate(item) { `; } -function deleteUserForm() { +function deleteForm() { return { method: 'DELETE', headers: { @@ -136,7 +137,7 @@ function deleteUserForm() { async function deleteUserById() { const activeUser = document.querySelector(".active"); - await fetch(BASE_URL + "/api/users/" + activeUser.id, deleteUserForm()); + await fetch(BASE_URL + "/api/users/" + activeUser.id, deleteForm()); userDeleteButton.classList.remove("active"); const deletedUser = document.getElementById(activeUser.id); userList.removeChild(deletedUser); @@ -205,12 +206,19 @@ async function toggleComplete(activeUser, itemId) { return await toggleCompleteResponse.json(); } +async function deleteAll() { + const activeUser = document.querySelector(".active"); + await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/", deleteForm()); + showActiveUserTodo(activeUser); +} + showAllUsers(); userCreateButton.addEventListener("click", userCreateHandler); userDeleteButton.addEventListener("click", deleteUserById) userList.addEventListener("click", selectUser); todoInput.addEventListener("keypress", addTodoByUser); +deleteAllButton.addEventListener("click", deleteAll); todoList.addEventListener("click", async function (event) { const li = event.target.closest("li"); From 26996ff1d9f75c122896ba8c206ade86701cacda Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Sat, 3 Apr 2021 02:16:38 +0900 Subject: [PATCH 09/13] =?UTF-8?q?feat:=20User=EB=B3=84=20todo=20item=20?= =?UTF-8?q?=ED=95=98=EB=82=98=EC=94=A9=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/js/index.js | 13 +++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index e49d25b..2a9034b 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ - [x] 4. todoItem ์ถ”๊ฐ€ํ•˜๊ธฐ - [ ] 5. todoItem ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [x] 6. todoItem completeํ•˜๊ธฐ -- [ ] 7. todoItem ์‚ญ์ œํ•˜๊ธฐ +- [x] 7. todoItem ์‚ญ์ œํ•˜๊ธฐ - [x] 8. todoItem contents ๋‚ด์šฉ ์ˆ˜์ •ํ•˜๊ธฐ
    diff --git a/src/js/index.js b/src/js/index.js index c861586..7b58d10 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -108,7 +108,6 @@ function removeOtherTodo() { } function todoTemplate(item) { - console.log(item.isCompleted); return `
  • @@ -212,6 +211,11 @@ async function deleteAll() { showActiveUserTodo(activeUser); } +async function deleteOne(activeUser, itemId) { + await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId, deleteForm()); + +} + showAllUsers(); userCreateButton.addEventListener("click", userCreateHandler); @@ -221,15 +225,16 @@ todoInput.addEventListener("keypress", addTodoByUser); deleteAllButton.addEventListener("click", deleteAll); todoList.addEventListener("click", async function (event) { + const activeUser = document.querySelector(".active"); const li = event.target.closest("li"); + const itemId = li.id; if (event.target.classList.contains("toggle")) { - const activeUser = document.querySelector(".active"); - const itemId = li.id; await toggleComplete(activeUser, itemId); showActiveUserTodo(activeUser); } if (event.target.classList.contains("destroy")) { - li.remove(); + await deleteOne(activeUser, itemId); + showActiveUserTodo(activeUser); } }); From c78664d6227e4907bdae2beef1dc5556f8932488 Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Sat, 3 Apr 2021 02:53:51 +0900 Subject: [PATCH 10/13] =?UTF-8?q?feat=20:=20=EC=9A=B0=EC=84=A0=EC=88=9C?= =?UTF-8?q?=EC=9C=84=EC=97=90=20=EB=94=B0=EB=A5=B8=20label=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 +++--- src/js/index.js | 40 ++++++++++++++++++++++++++++++++++++++-- 2 files changed, 41 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 2a9034b..8837a33 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ - [x] 2. User์˜ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [x] 3. User ์‚ญ์ œํ•˜๊ธฐ - [x] 4. todoItem ์ถ”๊ฐ€ํ•˜๊ธฐ -- [ ] 5. todoItem ๋ถˆ๋Ÿฌ์˜ค๊ธฐ +- [x] 5. todoItem ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [x] 6. todoItem completeํ•˜๊ธฐ - [x] 7. todoItem ์‚ญ์ œํ•˜๊ธฐ - [x] 8. todoItem contents ๋‚ด์šฉ ์ˆ˜์ •ํ•˜๊ธฐ @@ -40,8 +40,8 @@ ## ๐ŸŽฏ๐ŸŽฏ ์‹ฌํ™” ์š”๊ตฌ์‚ฌํ•ญ -- [ ] 1. fetch api ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์„ async await์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฆฌํŒฉํ† ๋งํ•˜๊ธฐ. -- [ ] 2. github issue์—์„œ ๋ผ๋ฒจ์„ ๋ถ™์ด๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ์šฐ์„ ์ˆœ์œ„์— ๋”ฐ๋ผ์„œ label๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ. +- [x] 1. fetch api ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์„ async await์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฆฌํŒฉํ† ๋งํ•˜๊ธฐ. +- [x] 2. github issue์—์„œ ๋ผ๋ฒจ์„ ๋ถ™์ด๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ์šฐ์„ ์ˆœ์œ„์— ๋”ฐ๋ผ์„œ label๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ. - [ ] 3. ES6 impot & export๋ฅผ ์ด์šฉํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋ฆฌํŒฉํ† ๋งํ•˜๊ธฐ.
    diff --git a/src/js/index.js b/src/js/index.js index 7b58d10..7780c9a 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -108,15 +108,20 @@ function removeOtherTodo() { } function todoTemplate(item) { + const priority = item.priority; return `
  • @@ -213,7 +218,24 @@ async function deleteAll() { async function deleteOne(activeUser, itemId) { await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId, deleteForm()); +} + +function changePriorityForm(priority) { + const todo = { + priority: priority + }; + return { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(todo) + }; +} + +async function changePriority(activeUser, itemId, priority) { + await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId + "/priority", changePriorityForm(priority)); } showAllUsers(); @@ -261,4 +283,18 @@ todoList.addEventListener("dblclick", function (event) { li.classList.remove("editing"); } }); +}); + +todoList.addEventListener("change", async function (event) { + const activeUser = document.querySelector(".active"); + const itemId = event.target.closest("li").id; + const option = event.target; + const selectedOption = option.options[option.selectedIndex].value; + if (selectedOption === "1") { + await changePriority(activeUser, itemId, "FIRST"); + showActiveUserTodo(activeUser); + } else if (selectedOption === "2") { + await changePriority(activeUser, itemId, "SECOND"); + showActiveUserTodo(activeUser); + } }); \ No newline at end of file From 93646b56171b0d3b3f36232751ae2554c4a759ec Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Sat, 3 Apr 2021 03:07:07 +0900 Subject: [PATCH 11/13] =?UTF-8?q?feat=20:=20User=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20title=20=EB=B3=80=EA=B2=BD=20=EA=B8=B0=EB=8A=A5=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 --- index.html | 1 - src/js/index.js | 10 ++++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index a62b9e9..17044cd 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,6 @@

    - eastjun's Todo List

    diff --git a/src/js/index.js b/src/js/index.js index 7780c9a..d4f3f67 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,4 +1,5 @@ const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com'; +const userTitle = document.getElementById("user-title"); const userList = document.getElementById("user-list"); const userCreateButton = document.querySelector(".user-create-button"); const userDeleteButton = document.querySelector(".user-delete-button"); @@ -36,18 +37,27 @@ function showActiveUser(userId) { const defaultUser = userList.firstChild; defaultUser.classList.add("active"); activeUser = defaultUser; + userLoad(activeUser.id); } else { active(activeUser); } showActiveUserTodo(activeUser); } +async function userLoad(userId) { + userTitle.removeChild(userTitle.firstChild); + const userLoadResponse = await fetch(BASE_URL + "/api/users/" + userId, getRequestForm()); + const user = await userLoadResponse.json(); + userTitle.insertAdjacentHTML("beforeend", `${user.name}'s Todo List`); +} + function active(activeUser) { const activeUsers = document.getElementsByClassName("active"); for (let i = 0; i < activeUsers.length; i++) { activeUsers[i].classList.remove("active"); } activeUser.classList.add("active"); + userLoad(activeUser.id); } function createUserForm(userName) { From 5932f433f0c5ecb5714d047dada76a0076212136 Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Sat, 3 Apr 2021 03:13:14 +0900 Subject: [PATCH 12/13] =?UTF-8?q?feat=20:=20todo=20item=20count=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/index.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/js/index.js b/src/js/index.js index d4f3f67..26ec15f 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -109,6 +109,7 @@ async function showActiveUserTodo(activeUser) { const item = activeUserTodo[i]; todoList.insertAdjacentHTML("beforeend", todoTemplate(item)); } + updateCount(); } function removeOtherTodo() { @@ -184,6 +185,7 @@ async function addTodoByUser(event) { const newTodo = await addTodoResponse.json(); todoList.insertAdjacentHTML("beforeend", todoTemplate(newTodo)); todoInput.value = ""; + updateCount(); } } @@ -248,6 +250,20 @@ async function changePriority(activeUser, itemId, priority) { await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId + "/priority", changePriorityForm(priority)); } +function updateCount() { + let count = 0; + const allTodoList = todoList.childNodes; + for (let todo of allTodoList) { + count++; + + } + document.querySelector(".todo-count").innerHTML = countTemplate(count); +} + +function countTemplate(count) { + return `์ด${count}๊ฐœ`; +} + showAllUsers(); userCreateButton.addEventListener("click", userCreateHandler); From cfcd069b6fa77c960bae0b3a203f68c39d9034bf Mon Sep 17 00:00:00 2001 From: kimjunseo Date: Sat, 3 Apr 2021 03:31:15 +0900 Subject: [PATCH 13/13] =?UTF-8?q?refactor=20:=20template,=20requestform=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- index.html | 2 +- src/js/index.js | 131 ++++--------------------------------- src/js/requestForm.js | 82 +++++++++++++++++++++++ src/js/todoItemTemplate.js | 22 +++++++ 5 files changed, 120 insertions(+), 119 deletions(-) create mode 100644 src/js/requestForm.js create mode 100644 src/js/todoItemTemplate.js diff --git a/README.md b/README.md index 8837a33..f026046 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ - [x] 1. fetch api ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์„ async await์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฆฌํŒฉํ† ๋งํ•˜๊ธฐ. - [x] 2. github issue์—์„œ ๋ผ๋ฒจ์„ ๋ถ™์ด๋Š” ๊ฒƒ์ฒ˜๋Ÿผ, ์šฐ์„ ์ˆœ์œ„์— ๋”ฐ๋ผ์„œ label๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ. -- [ ] 3. ES6 impot & export๋ฅผ ์ด์šฉํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋ฆฌํŒฉํ† ๋งํ•˜๊ธฐ. +- [x] 3. ES6 impot & export๋ฅผ ์ด์šฉํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋ฆฌํŒฉํ† ๋งํ•˜๊ธฐ.
    diff --git a/index.html b/index.html index 17044cd..907b937 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,6 @@

    - + diff --git a/src/js/index.js b/src/js/index.js index 26ec15f..2b8259f 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,3 +1,6 @@ +import * as form from "./requestForm.js"; +import {todoTemplate} from "./todoItemTemplate.js"; + const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com'; const userTitle = document.getElementById("user-title"); const userList = document.getElementById("user-list"); @@ -7,17 +10,8 @@ const todoList = document.querySelector(".todo-list"); const todoInput = document.querySelector(".new-todo"); const deleteAllButton = document.querySelector(".clear-completed"); -function getRequestForm() { - return { - method: 'GET', - headers: { - 'Content-Type': 'application/json' - } - }; -} - async function showAllUsers(userId) { - const showAllUsersResponse = await fetch(BASE_URL + "/api/users", getRequestForm()); + const showAllUsersResponse = await fetch(BASE_URL + "/api/users", form.getRequestForm()); const allUsers = await showAllUsersResponse.json(); for (let i = 0; i < allUsers.length; i++) { if (document.getElementById(allUsers[i]._id) == null) { @@ -46,7 +40,7 @@ function showActiveUser(userId) { async function userLoad(userId) { userTitle.removeChild(userTitle.firstChild); - const userLoadResponse = await fetch(BASE_URL + "/api/users/" + userId, getRequestForm()); + const userLoadResponse = await fetch(BASE_URL + "/api/users/" + userId, form.getRequestForm()); const user = await userLoadResponse.json(); userTitle.insertAdjacentHTML("beforeend", `${user.name}'s Todo List`); } @@ -60,24 +54,10 @@ function active(activeUser) { userLoad(activeUser.id); } -function createUserForm(userName) { - const newUser = { - name: userName - }; - - return { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(newUser) - }; -} - async function userCreateHandler() { const userName = prompt("์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์€ ์ด๋ฆ„์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”."); if (userName.length >= 2) { - const userForm = createUserForm(userName); + const userForm = form.createUserForm(userName); const createdUserId = await createUser(userForm); await showAllUsers(createdUserId); } else { @@ -101,7 +81,7 @@ function selectUser(event) { } async function showActiveUserTodo(activeUser) { - const todoByUserIdResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id, getRequestForm()); + const todoByUserIdResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id, form.getRequestForm()); const todo = await todoByUserIdResponse.json(); const activeUserTodo = todo.todoList; removeOtherTodo(); @@ -118,61 +98,15 @@ function removeOtherTodo() { } } -function todoTemplate(item) { - const priority = item.priority; - return `
  • -
    - - - -
    - -
    • `; -} - -function deleteForm() { - return { - method: 'DELETE', - headers: { - 'Content-Type': 'application/json' - } - }; -} - async function deleteUserById() { const activeUser = document.querySelector(".active"); - await fetch(BASE_URL + "/api/users/" + activeUser.id, deleteForm()); + await fetch(BASE_URL + "/api/users/" + activeUser.id, form.deleteForm()); userDeleteButton.classList.remove("active"); const deletedUser = document.getElementById(activeUser.id); userList.removeChild(deletedUser); showActiveUser(); } -function addContentForm(content) { - const newContents = { - contents: content - }; - - return { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(newContents) - }; -} - async function addTodoByUser(event) { const content = event.target.value; if (event.key === "Enter") { @@ -181,7 +115,7 @@ async function addTodoByUser(event) { return; } const activeUser = document.querySelector(".active"); - const addTodoResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items", addContentForm(content)); + const addTodoResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items", form.addContentForm(content)); const newTodo = await addTodoResponse.json(); todoList.insertAdjacentHTML("beforeend", todoTemplate(newTodo)); todoInput.value = ""; @@ -189,65 +123,28 @@ async function addTodoByUser(event) { } } -function editContentForm(content) { - const newContents = { - contents: content - }; - - return { - method: 'PUT', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(newContents) - }; -} - async function editTodoContent(activeUser, itemId, content) { - const editTodoResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId, editContentForm(content)); + const editTodoResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId, form.editContentForm(content)); return await editTodoResponse.json(); } -function toggleCompleteForm() { - return { - method: 'PUT', - headers: { - 'Content-Type': 'application/json' - } - }; -} - async function toggleComplete(activeUser, itemId) { - const toggleCompleteResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId + "/toggle", toggleCompleteForm()); + const toggleCompleteResponse = await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId + "/toggle", form.toggleCompleteForm()); return await toggleCompleteResponse.json(); } async function deleteAll() { const activeUser = document.querySelector(".active"); - await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/", deleteForm()); + await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/", form.deleteForm()); showActiveUserTodo(activeUser); } async function deleteOne(activeUser, itemId) { - await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId, deleteForm()); -} - -function changePriorityForm(priority) { - const todo = { - priority: priority - }; - - return { - method: 'PUT', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(todo) - }; + await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId, form.deleteForm()); } async function changePriority(activeUser, itemId, priority) { - await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId + "/priority", changePriorityForm(priority)); + await fetch(BASE_URL + "/api/users/" + activeUser.id + "/items/" + itemId + "/priority", form.changePriorityForm(priority)); } function updateCount() { diff --git a/src/js/requestForm.js b/src/js/requestForm.js new file mode 100644 index 0000000..10156bc --- /dev/null +++ b/src/js/requestForm.js @@ -0,0 +1,82 @@ +export function getRequestForm() { + return { + method: 'GET', + headers: { + 'Content-Type': 'application/json' + } + }; +} + +export function createUserForm(userName) { + const newUser = { + name: userName + }; + + return { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(newUser) + }; +} + +export function deleteForm() { + return { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json' + } + }; +} + +export function addContentForm(content) { + const newContents = { + contents: content + }; + + return { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(newContents) + }; +} + +export function editContentForm(content) { + const newContents = { + contents: content + }; + + return { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(newContents) + }; +} + +export function toggleCompleteForm() { + return { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + } + }; +} + +export function changePriorityForm(priority) { + const todo = { + priority: priority + }; + + return { + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(todo) + }; +} diff --git a/src/js/todoItemTemplate.js b/src/js/todoItemTemplate.js new file mode 100644 index 0000000..004e219 --- /dev/null +++ b/src/js/todoItemTemplate.js @@ -0,0 +1,22 @@ +export function todoTemplate(item) { + const priority = item.priority; + return `
  • +
    + + + +
    + +
    • `; +} \ No newline at end of file