2주차 기본과제 투두리스트 #6
Open
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
1. 파일 위치 변경 2. 상품 데이터 상수 파일에 저장 3. js로 상품 데이터 가져와서 화면에 표현
Dangpy
reviewed
Jun 2, 2023
| let todoData = []; | ||
| let todoNum = 0; | ||
|
|
||
| //초기 데이터 세팅. |
There was a problem hiding this comment.
이렇게 함수 뭐하는지 착착정리해 놓고 깔꼼하게 짜니까 진짜 보기 좋다 미쳤다 ;;;;
Dangpy
reviewed
Jun 2, 2023
Comment on lines
+96
to
+97
| const addBtn = document.getElementsByClassName("add_btn"); | ||
| const addBtnList = [...addBtn]; |
There was a problem hiding this comment.
우왁!! 요거 const addBtnList = document.querySelectorAll(".add_btn");요거징?? 요렇게도 할수있구나!! 댑악
yesongoget
reviewed
Jun 2, 2023
| name="content" | ||
| id="modal_form_content" | ||
| /> | ||
| <button type="submit">저장</button> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Heon's Camera</title> | ||
| <link rel="stylesheet" href="3rd_assignment.css" /> |
| item.addEventListener("click", () => { | ||
| const modal = item.parentNode.parentNode.firstElementChild; | ||
| modal.style.display = "flex"; | ||
| }); |
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.
✨ 구현 기능 명세
✅
하트 안의 숫자✅
카테고리별 할일 추가✅
달력 / MY 버튼 클릭시 페이지 이동🌼 PR Point
할일과 관련된 함수는 총 4가지 입니다. 할일 리스트를 만드는 함수, 그 리스트를 이용해서 투두카테고리를 하나씩 만드는 함수, 미완료 할일의 개수를 띄워주는 함수, 할일완료를 클릭했을 때 처리해주는 함수.
할일 완료를 체크했을 때, 체크한 요소와 같은 요소를 로컬데이터에서 어떻게 찾아서 가져올까 고민을 했었는데, 데이터가 두가지 층위로 나뉘어 있는 것을 이용해서 찾았습니다. 먼저 카테고리만 비교해서 체크한 것과 일치하는 카테고리를 가져온뒤, 해당 카테고리의 list를 가져와서 그 안에서 다시 할일이 같은 것을 찾아서 가져와서 done상태값을 true또는 false로 바꿔주는 형식을 이용했습니다.
모달에 관한 함수는 모달을 띄우고 닫는 함수와 모달 내 추가 폼을 제출할 시 이에 관한 상호작용을 처리하는 함수 이렇게 두가지로 나눠서 구현하였습니다.
🥺 소요 시간, 어려웠던 점
13h앞서 만든 마켓과는 다르게, 이 투두리스트는 데이터가 카테고리 따로, 그리고 할일 리스트 배열이 따로 있고, 그 리스트 안에 할일들이 들어있는 형태로 데이터가 구성되어 있다보니, 원하는 데이터를 가져오고 넣을 때 정확한 부모 자식 관계를 타고 들어가서 가져오고 넣는 것이 필요했습니다. 그래서 걸핏하면 등장하는 typeerror를 잡기위해서 계속 콘솔로그 찍고 이렇게 저렇게 구문을 바꿔가면서 정확한 데이터를 가져와서 처리할 수 있게 될때까지 시간이 정말 많이 걸렸습니다.
🌈 구현 결과물