[2주차 기본 과제] 2. WEB 💛 TO DO MATE 🌈 없애보자!!!!! #5
Conversation
| { id: 'check1', text: '웹팟 과제' }, | ||
| { id: 'check2', text: '1차 세미나 복습' }, | ||
| { id: 'check3', text: '리액트 서터디' }, |
There was a problem hiding this comment.
그 체크 된 요소 새로 추가 된 애랑 모든 요소에 나는 state: true 또는 false로 해서 상태값을 정해주고 그 상태값에 대해서 개수를 계산하도록 했고돈?! 모달을 추가할 요소에도 상태값이 포함된 상태로 하면 상태값 계산 함수를 만들어서 계속 재사용하면 되도라곡...!
There was a problem hiding this comment.
근데 요건 내 방법이공!! 다른 방법도 많고 내카.. 좀 더 찾아서 올려줄궤!!>><><
There was a problem hiding this comment.
나도 일단 데이터에 Done으로 true 아님 false를 줘놨었어!! 그리고 전역으로 todonum이라는 변수 만든다음에 할일 리스트 만들때 한번 체크해서 할일값이 false인 애들 세서 개수 집어넣어놓은 다음에, 이후에 모든 state 건드는 함수들 안에다가 todonum++이나 -- 같이 넣어놔서 매번 전역으로 만들어놓은 todonum을 건드리고 다시 html에 띄워주도록 했어..! 이게 좋은 방법인지는 잘 모르겠다ㅠㅠ
| { id: 'check1', text: '웹팟 과제' }, | ||
| { id: 'check2', text: '1차 세미나 복습' }, | ||
| { id: 'check3', text: '리액트 서터디' }, |
There was a problem hiding this comment.
나도 일단 데이터에 Done으로 true 아님 false를 줘놨었어!! 그리고 전역으로 todonum이라는 변수 만든다음에 할일 리스트 만들때 한번 체크해서 할일값이 false인 애들 세서 개수 집어넣어놓은 다음에, 이후에 모든 state 건드는 함수들 안에다가 todonum++이나 -- 같이 넣어놔서 매번 전역으로 만들어놓은 todonum을 건드리고 다시 html에 띄워주도록 했어..! 이게 좋은 방법인지는 잘 모르겠다ㅠㅠ
| // 2. 체크되지 않은 요소들의 개수를 계산 | ||
| const uncheckedCount = allCheckboxes | ||
| .filter((checkbox) => !checkbox.checked) | ||
| .length; | ||
|
|
||
| // 3. 계산된 개수를 표시 | ||
| const countElement = document.getElementById('fri_count'); | ||
| countElement.textContent = uncheckedCount; | ||
| }; | ||
|
|
||
| checkboxes.forEach((checkbox) => { | ||
| checkbox.addEventListener('change', countUnchecked); | ||
| }); | ||
|
|
||
|
|
||
| addBtns.forEach(addBtn => { | ||
| addBtn.addEventListener('click', () => { | ||
| // 모달 생성 및 표시 | ||
| const modal = modalTemplate.cloneNode(true); | ||
| modal.classList.add('modal'); | ||
| document.body.appendChild(modal); | ||
| // 모달 보이기 | ||
| modal.style.display = 'block'; | ||
| // submit 이벤트 등록 | ||
| const form = modal.querySelector('form'); | ||
|
|
✨ 구현 기능 명세
-###
하트 안의 숫자✅
카테고리별 할일 추가✅
달력 / MY 버튼 클릭시 페이지 이동✔🌼 PR Point
🥺 소요 시간, 어려웠던 점
12hfunction countUnchecked() {
// 1. HTML 파일에서 checkbox 요소들을 선택
const allCheckboxes = [...checkboxes];
if (newTodoElem) {
allCheckboxes.push(newTodoElem.querySelector('input[type="checkbox"]'));
}
// 2. 체크되지 않은 요소들의 개수를 계산
const uncheckedCount = allCheckboxes
.filter((checkbox) => !checkbox.checked)
.length;
// 3. 계산된 개수를 표시
const countElement = document.getElementById('fri_count');
countElement.textContent = uncheckedCount;
};`
newTodoElem에 대해서도 allCheckboxes 목록에 추가하고 체크되지 않은 요소들의 개수를 계산하도록 했는데..
모달을 통해 새로 추가된 할 일 목록에 대해 생성되었을 때만 count에 적용이 되고, 이후 해당 할일 목록의 checkbox를 선택하는 이벤트에 대해서는 count에 적용이 안되더라구요 .. .ㅠ 놓친 부분이 있는 것 같은데.. 해결 방법을 알고 싶습니닷...
🌈 구현 결과물
webtodo.mp4