2023-09-08 내일배움캠프 사전캠프 5일차 TIL
프로젝트 복습 : SpartaFilx
기존에 강의를 보며 만들었던 SpartaFilx의 UI를 참고하였으며, 몇가지 기능을 추가하였음
- UI 보완
토이 프로젝트 : To-Do-List
1. dark/white 모드 구현
dark 및 white 모드에 맞게 css 코드를 작성하였다.
2. 언더바 구현
offset 프로퍼티와 transition을 이용하여 동적으로 움직이는 언더바를 구현하였다.
3. 문제
각 항목에 맞게 스톱워치 기능을 추가하려고 하였다.
setInterval과 clearInterval을 사용하여 구현 하려 하였으나, 각 list item이 화면에 구현이 될 때 각각의 id가 중복되어 해당하는 item을 지정하는데 어려움이 있었다. querySelectorAll로 리스트 아이템들을 가져오고 해당 아이템 마다 다시 querySelector를 통해서 접근해서 해결하였다.
하지만 setInterval과 clearInterval을 중복으로 사용해서 타이머를 구현하려고 하였으나, 어떤 아이템에서 타이머를 시작을 하였고 어떤 아이템의 타이머를 종료를 할 것인지 지정할 수 가 없었다.
이 부분에서 고민을 하고 있으며, 해결방법을 찾아볼 예정이다.
'내일배움캠프 TIL' 카테고리의 다른 글
| 2023-09-12 사전캠프 7일차 TIL (0) | 2023.09.13 |
|---|---|
| 2023-09-11 사전캠프 6일차 TIL (0) | 2023.09.11 |
| 2023-09-07 사전캠프 4일차 TIL (0) | 2023.09.08 |
| 2023-09-06 사전캠프 3일차 TIL (0) | 2023.09.06 |
| 2023-09-05 사전캠프 2일차 TIL (0) | 2023.09.05 |
