이희민 투두리스트 과제입니다. #84
Open
이희민 투두리스트 과제입니다. #84
+221
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
yihimin
commented
Jan 6, 2025
•
yihimin
commented
- 프론트엔드
- 백엔드 ... working on
yihimin
requested review from
rhehfl,
gwgw123,
JeonHeena,
dg1418 and
bluetree7878
as code owners
rhehfl
reviewed
Jan 7, 2025
Comment on lines
+8
to
+81
| function addTodo() { | ||
| taskCount++; // 할 일 번호 증가 | ||
| const value = `할 일 ${taskCount}`; // 할 일 제목 생성 | ||
|
|
||
| // 리스트 아이템 생성 | ||
| const listItem = document.createElement('li'); | ||
| listItem.className = 'todo-item'; | ||
|
|
||
| listItem.innerHTML = ` | ||
| <input type="checkbox" class="todo-checkbox" /> | ||
| <span class="todo-text">${value}</span> | ||
| <button class="edit-button"><i class="fas fa-pencil-alt"></i></button> | ||
| <button class="delete-button"><i class="fas fa-trash"></i></button> | ||
| `; | ||
|
|
||
| // 삭제 버튼 이벤트 | ||
| listItem.querySelector('.delete-button').addEventListener('click', () => { | ||
| listItem.remove(); | ||
| }); | ||
|
|
||
| // 수정 버튼 이벤트 | ||
| listItem.querySelector('.edit-button').addEventListener('click', () => { | ||
| const todoText = listItem.querySelector('.todo-text'); | ||
| const editButton = listItem.querySelector('.edit-button'); | ||
|
|
||
| // 수정 버튼 숨기기 | ||
| editButton.style.display = 'none'; | ||
|
|
||
| // 기존 텍스트를 숨기고, 인풋 필드와 완료 버튼 추가 | ||
| todoText.style.display = 'none'; | ||
| const editInput = document.createElement('input'); | ||
| editInput.type = 'text'; | ||
| editInput.className = 'edit-input'; | ||
| editInput.value = todoText.textContent; | ||
|
|
||
| const completeButton = document.createElement('button'); | ||
| completeButton.className = 'complete-button'; | ||
| completeButton.textContent = '완료'; | ||
|
|
||
| // 완료 버튼 이벤트 | ||
| completeButton.addEventListener('click', () => { | ||
| todoText.textContent = editInput.value.trim(); | ||
| todoText.style.display = 'inline'; | ||
|
|
||
| // 완료 버튼과 입력 필드 제거 | ||
| editInput.remove(); | ||
| completeButton.remove(); | ||
|
|
||
| // 수정 버튼 다시 표시 | ||
| editButton.style.display = 'inline'; | ||
| }); | ||
|
|
||
| // 리스트에 수정용 인풋 필드와 완료 버튼 추가 | ||
| listItem.insertBefore(editInput, todoText.nextSibling); | ||
| listItem.insertBefore(completeButton, listItem.querySelector('.delete-button')); | ||
| }); | ||
|
|
||
| // 체크박스 이벤트 (취소선 추가 및 수정 버튼 숨김) | ||
| listItem.querySelector('.todo-checkbox').addEventListener('change', (e) => { | ||
| const todoText = listItem.querySelector('.todo-text'); | ||
| const editButton = listItem.querySelector('.edit-button'); | ||
|
|
||
| if (e.target.checked) { | ||
| todoText.style.textDecoration = 'line-through'; // 취소선 추가 | ||
| editButton.style.display = 'none'; // 수정 버튼 숨김 | ||
| } else { | ||
| todoText.style.textDecoration = 'none'; // 취소선 제거 | ||
| editButton.style.display = 'inline'; // 수정 버튼 다시 표시 | ||
| } | ||
| }); | ||
|
|
||
| // 리스트에 추가 | ||
| todoList.appendChild(listItem); | ||
| } |
There was a problem hiding this comment.
add함수에 CRUD가 전부 구현되어있는건가요?
이 부분은 분리가 필요해 보여요🤔
dg1418
approved these changes
Jan 7, 2025
Comment on lines
+23
to
+26
| // 삭제 버튼 이벤트 | ||
| listItem.querySelector('.delete-button').addEventListener('click', () => { | ||
| listItem.remove(); | ||
| }); |
There was a problem hiding this comment.
백엔드를 구현하고 계셔서 네트워크 요청 등을 아직 구현하지 않으신 건가요?
해당 코드들 에서는 DOM 조작만 이루어지는 것으로 보이네요
api를 통해 데이터를 보내고 받는 로직도 구현해보면 좋을꺼 같아요 😄
There was a problem hiding this comment.
앗 실수로 approved 했네요. 아직 구현해보면 좋을 기능들이 있어 보입니다. 👍
There was a problem hiding this comment.
@dg1418 아하 네네! 진행 중입니다!
ssi02014
reviewed
Jan 8, 2025
Comment on lines
+25
to
+26
| <!-- JS 연결 --> | ||
| <script src="todoList.js"></script> |
There was a problem hiding this comment.
@yihimin script 태그를 body 하단에 넣는 것도 좋지만,
defer, async 스크립트를 활용해 볼 수 있습니다.
https://ko.javascript.info/script-async-defer
대부분의 경우에서 defer 스크립트를 많이 사용합니다.
There was a problem hiding this comment.
@ssi02014 오 네! 지금 영상도 같이 수강 중이라서 배우고 수정하여 반영하겠습니다!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.