css
<template id="todo-template">
<div class="right-content-list">
<input type="checkbox"/>
<label>
<span class="custom-checkbox"></span>
todo!
</label>
</div>
</template>checkbox 활용. input은 가리고 lable안에 span으로 원을 만들어서 checkbox 자리에 놓는다. scale과 transform 으로 커지게 한다. 투두 밑에 선을 긋는 건 전체 div(하나의 투두)에 after로한다.
checked되었을 때도 chceck+label로 todo가 클릭되면 아까 만든 span 원 안에 또 다른 작은 원을 만든다. box shadow에 inset을 주면 border가 된다. 주의할 것은 input id와 label for가 동일해야 한다!
이제 투두에 선 긋는 건 label에 after로 하면 된다. label이 flex면 선이 끝까지 가버려서 inline-flex로 해주면 span 형제 노드에 쓰인 텍스트에만 줄이 생긴다. 투두를 클릭하면 선이 왼쪽에서 오른쪽생기니까.scaleX와 transform-origin이 필요하다. 그리고 checked+label에 after를 scaleX와 transform-origin 각각 1, left주면 끝!
js
key 변수와 key를 getItem할 변수를 만들고 key를 getItem를 한 변수를 setItem의 key로 넣어서 id를 setItem하면 된다. selected id를 찾아서 render 함수를 실행하는 게 이해가 안 됨..
오른쪽 투두 카드에서 selected List에 name을 보여줘야 하는데 새로고침 하면 defined가 됨. 그리고 todo count하는 거 어렵다.. list 안에 tasks 배열이어야 객체들, 즉 투두스들을 받을 수 있다.
incompelete 는 complete flag와 filter로 구할 수 있다. template가져오는 것 조금 헷갈린다. label에 id를 줄 때는 htmlFor를 한다.
왼쪽 리스트를 클릭할 때마다 오른쪽 투두들이 forEach 때문에 렌더되는데 createElement() 즉, while로 첫 엘리먼트 빼고 다 삭제하는 함수를 어떻게 써야하는지 모르겠다.
check box가 checked되면 todo count에서도 빠져야 하는데 checked랑 count함수 어떻게 연결해야하지..
