Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2주차 기본과제 투두리스트 #6

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
Open

2주차 기본과제 투두리스트 #6

wants to merge 19 commits into from

Conversation

eastlaw80
Copy link

✨ 구현 기능 명세

  • 기본 과제

✅ 하트 안의 숫자

  1. 미완료한 할일의 갯수를 계산하여 보여줍니다.
  2. 할 일 완료 클릭시 갯수가 줄어듭니다.

✅ 카테고리별 할일 추가

  1. 카테고리별 할일 추가가 가능합니다.
  2. 모달을 띄워 진행합니다

✅ 달력 / MY 버튼 클릭시 페이지 이동

  1. 달력 → href=”/”
  2. MY → href=”/mycategory”

🌼 PR Point

할일과 관련된 함수는 총 4가지 입니다. 할일 리스트를 만드는 함수, 그 리스트를 이용해서 투두카테고리를 하나씩 만드는 함수, 미완료 할일의 개수를 띄워주는 함수, 할일완료를 클릭했을 때 처리해주는 함수.
할일 완료를 체크했을 때, 체크한 요소와 같은 요소를 로컬데이터에서 어떻게 찾아서 가져올까 고민을 했었는데, 데이터가 두가지 층위로 나뉘어 있는 것을 이용해서 찾았습니다. 먼저 카테고리만 비교해서 체크한 것과 일치하는 카테고리를 가져온뒤, 해당 카테고리의 list를 가져와서 그 안에서 다시 할일이 같은 것을 찾아서 가져와서 done상태값을 true또는 false로 바꿔주는 형식을 이용했습니다.

모달에 관한 함수는 모달을 띄우고 닫는 함수와 모달 내 추가 폼을 제출할 시 이에 관한 상호작용을 처리하는 함수 이렇게 두가지로 나눠서 구현하였습니다.


🥺 소요 시간, 어려웠던 점

  • 13h
    앞서 만든 마켓과는 다르게, 이 투두리스트는 데이터가 카테고리 따로, 그리고 할일 리스트 배열이 따로 있고, 그 리스트 안에 할일들이 들어있는 형태로 데이터가 구성되어 있다보니, 원하는 데이터를 가져오고 넣을 때 정확한 부모 자식 관계를 타고 들어가서 가져오고 넣는 것이 필요했습니다. 그래서 걸핏하면 등장하는 typeerror를 잡기위해서 계속 콘솔로그 찍고 이렇게 저렇게 구문을 바꿔가면서 정확한 데이터를 가져와서 처리할 수 있게 될때까지 시간이 정말 많이 걸렸습니다.

🌈 구현 결과물

스크린샷 2023-04-25 오후 12 44 49

스크린샷 2023-04-25 오후 12 44 58

스크린샷 2023-04-25 오후 12 45 52

@eastlaw80 eastlaw80 self-assigned this Apr 25, 2023
let todoData = [];
let todoNum = 0;

//초기 데이터 세팅.
Copy link

@Dangpy Dangpy Jun 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이렇게 함수 뭐하는지 착착정리해 놓고 깔꼼하게 짜니까 진짜 보기 좋다 미쳤다 ;;;;

Comment on lines +96 to +97
const addBtn = document.getElementsByClassName("add_btn");
const addBtnList = [...addBtn];
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

우왁!! 요거 const addBtnList = document.querySelectorAll(".add_btn");요거징?? 요렇게도 할수있구나!! 댑악

Copy link

@Dangpy Dangpy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Copy link

@yesongoget yesongoget left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

동헌오빠 열심히 구현한 거 대단하다! 앞으로도 화이팅이야!

name="content"
id="modal_form_content"
/>
<button type="submit">저장</button>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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" />

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

와 이거 lang이랑 title 지정 디테일 굿~!

item.addEventListener("click", () => {
const modal = item.parentNode.parentNode.firstElementChild;
modal.style.display = "flex";
});

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 이런 식으로 모달 구성할 수도 있구나~!! 신기신기

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants