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주차 기본 과제] 1. yesonbucks 창업 #4

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

Conversation

yesongoget
Copy link
Contributor

✨ 구현 기능 명세

  • 기본 과제

nav

  1. 종류 선택시 태그를 카드섹션 위에 하나씩 부착합니다 ✔
  2. 태그별 상품 리스트 보여줍니다. ✔
    1. 전체 → 다보여주기
    2. 종류별 → 필터기능
  3. x 클릭시 ✔
    1. 카드 다시 정렬
    2. 종류 선택 해제
      1. 태그 삭제

✅ card article

  1. + 아이콘 클릭시 태그 모달이 등장합니다. ✔
  2. 카드 위에 덮어씌워지는 창 → 해시태그 목록 담은 content 보여주기 ✔
  3. x 버튼을 누르면 모달이 닫힙니다. ✔

🌼 PR Point


🥺 소요 시간, 어려웠던 점

  • 14h(?)
  • 사실 제가 js에 무지하다보니ㅠ 시간을 제대로 세보지도 못하고 꽤나 오랜 시간동안 붙잡고 있었던 것 같아요... 너무 어렵다 js...
  • 제대로 정립이 안되다보니 뒤죽박죽 코드도 조금 더티(?)한 것 같아요.. 다시 공부하면서 코드 리팩토링해나가겠습니다...

🌈 구현 결과물

yesonbucks.1.mp4

Comment on lines +3 to +36
const data = [
{
categoryName: 'Sopt',
todos: [
{ id: 'check1', text: '웹팟 과제' },
{ id: 'check2', text: '1차 세미나 복습' },
{ id: 'check3', text: '리액트 서터디' },
]
},
{
categoryName: 'Epris',
todos: [
{ id: 'check4', text: '카드뉴스 피드백' },
{ id: 'check5', text: '컨셉 아이디어 회의' },
{ id: 'check6', text: '임원진 회의' },
]
},
{
categoryName: 'Exercise',
todos: [
{ id: 'check7', text: '기상운동' },
{ id: 'check8', text: '홈트 1회' },
{ id: 'check9', text: '스트레칭' },
]
},
{
categoryName: 'Daily',
todos: [
{ id: 'check10', text: '벙개~' },
{ id: 'check11', text: '분당팟 모각공' },
{ id: 'check12', text: '스벅 슈크림라떼 먹어보기 냠냠냠냐' },
]
},
];
Copy link

Choose a reason for hiding this comment

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

요거 상수파일 분리해도 좋을것같앙~~~~

}

// HTML이 로드된 후 init 함수 실행
window.addEventListener("load", init);*/
Copy link

Choose a reason for hiding this comment

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

요기 163줄부터 254줄까지 주석지우긩~~~~

Comment on lines +54 to +65
//input
/*
const todoList = [

{ category: Sopt,
titleList: "웹팟 과제", completed: false },
{ title: "운동하기", completed: false },
{ title: "저녁 약속", completed: false }
];

//checkbox 클릭 시 completed: true로 변경
*/
Copy link

Choose a reason for hiding this comment

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

요기동!! 안쓰는 주석 지우긩~~

</div>
<div class="todo">
<input id="check1" type="checkbox">
<label for="check1">웹팟 과제</label>
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.

label 내용 상수로 있는데 오잉 왱 안지웠오???? 이유가 있용???

Copy link

@eastlaw80 eastlaw80 left a comment

Choose a reason for hiding this comment

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

진짜 나도 너무 어려워서 정말 오래걸렸던 과제다 보니,,,코드를 보는데 뭔가 얼마나 힘들었을지 느껴져서 감정이입됐어요,,,,정말 고생했어...!!!

@@ -0,0 +1,399 @@
const products = [

Choose a reason for hiding this comment

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

파일 분리해주면 더 깔끔할듯!

Comment on lines +79 to +89
// 새로운 카드 추가
products.forEach((product) => {
// 카드 생성
const card = document.createElement('div');
card.classList.add('card');

// 카드 이름 추가
const cardName = document.createElement('div');
cardName.classList.add('card_name');
cardName.textContent = product.name;
card.appendChild(cardName);

Choose a reason for hiding this comment

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

아아아 create element로 카드를 만들어주는 거 였군요...! 이게 Html 파일처럼 구조가 한눈에 보이지 않아서 어려웠을텐데,,,대단해..!!!

Comment on lines +67 to +68
<section id="card_section">
</section>

Choose a reason for hiding this comment

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

html 파일 먼저 봤다가 텅 비어있는 카드섹션보고 당황했었다는 후문,,,

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

Successfully merging this pull request may close these issues.

4 participants