[JS] javascript로 Todo list 만들기 ② - 할 일 완료와 삭제하기

[이전글]에 이어서 이번에 할일!

• 할일 완료처리
• 삭제 기능 구현

순서대로 구현해보자!

 

 

 

 

🔍 할 일 완료처리

---

투두 아이템을 체크박스로 만들었기 때문에

완료 동작을 css로 구현했다.

.item-list .check-item input[type=checkbox]:checked + label {
    background-image: url(./img/check_fill.svg);
    color: #999;
    text-decoration: line-through;
}

 

css에서 이렇게 input checkbox에 :checked를 붙이면 체크된 체크박스를 선택할 수 있다.

그런데 우리가 선택해야 할 선택자는 checkbox가 아니라 그 형제인 label이기 때문에

바로 다음에 오는 형제를 선택하는 ' + ' 선택자를 사용했다.

 

그래서 이 선택자를 이해하기 쉽게 해석하자면

' .item-list .check-item input[type=checkbox] 중에 checked된 체크박스들만 골라서

그 바로 다음에 오는 형제인 label의 스타일을 이렇게이렇게 바꾸겠다 ' 라는 의미다.

 

checkbox와 label을 연결하기 위해서는

checkbox의 id와 label의 for값을 동일하게 입력해야하는데

우리는 동적으로 checkbox와 label을 생성할것이기 때문에

이 값을 변수로 설정해야한다.

그래서 처음 화면이 로드될 때 itemIndex라는 변수를 선언해서 초기값을 0으로 지정한 뒤

item을 생성할때마다 checkbox의 id와 label의 for 값으로 itemIndex를 입력하고

itemIndex의 값에 1을 추가해서 다음에 add 이벤트가 실행될때

기존의 아이템과 id,for 값이 다르게 설정되도록 했다.

 

 

 

🔍 삭제 기능 구현

---

// 삭제버튼 생성할때 이미 작성해뒀던 내용
itemDelete.setAttribute('onclick', 'deleteItem(this);');

const deleteItem = (_this) => {
    _this.closest('.item').remove();
}

 

삭제버튼을 클릭하면 그 부모인 '.item'을 없애버리면 되지 않을까? 라는 생각으로

원하는대로 바로 구현되어서 오히려 당황했다.

 

 

여기까지 구현한 모습

 

 

투두리스트는 항상 리액트 강의를 볼때

강사님이 알려주는 방식으로만 따라쳐본 것이 전부였고

스스로의 힘으로 그것도 순수 자바스크립트만으로 만들어보는건 처음이라

많이 헤맬 줄 알았는데

등록, 완료, 삭제 기능까지 너무 술술 진행돼서 이게 정말 맞나 싶다.....

 

하지만...? 로컬스토리지에 저장하는 단계가 메인 이벤트라는것을 알고있지....

거기서 삽질 엄청 할 예정....

벌써부터 어떻게 해야할지 모르겠어서 막막하다 😂😂😂

 

아무튼 다음편에서 계속..!

 

 

 

📌 앞으로 남은 과제

• 로컬스토리지에 저장하기