너와 나의 스파르톤 2024

CSS의 #은 뭔가요? -> 선택자. #은 ID를 잡아오는 것

선택자는 뭔가를 선택하는 것.
CSS 쓸때 .img <- 이렇게 쓰면 Class를 불러오는 것이고, #Element 이렇게 쓰면 ID를 불러오는 것이다.

HTML의 Style 태그에 쓰기 위한 객체의 명찰은 Class

<a href= '~~~'> 이런 식으로 쓰던 것에
<a href class="img" = '~~~'> 이렇게 써주게 되면 CSS에서 .img로 불러올 수 있다.

JS의 함수?

더이상 HTML에를 거는건 그만하고 싶어! 뭐 없나요?😥

내가 하고싶었던 것: 이미 Done인걸 한번 더 눌러 취소할땐 alert이 안나왔으면 좋겠다
(그냥로 걸면 Done이 붙든 떨어지든 누를때마다 뜨기 때문)

튜터님의 답변: 그러면 Done이 없다가 생겨 Storage에 저장될때만 onclick을 해주자

  <script>
    // 페이지 로드 시 이전 상태 복원
    document.addEventListener("DOMContentLoaded", (event) => {
      const buckets = document.querySelectorAll(".bucket");
      buckets.forEach((bucket, index) => {
        // 로컬 스토리지에서 상태 읽기
        const isDone = localStorage.getItem("bucket" + index) === "done";
        if (isDone) {
          bucket.classList.add("done");
        }
      });
    });

    // 버킷 리스트 클릭 이벤트
    const buckets = document.querySelectorAll(".bucket");
    buckets.forEach((bucket, index) => {
      bucket.addEventListener("click", function () {
        // 클래스 토글
        bucket.classList.toggle("done");

        // 로컬 스토리지에 상태 저장
        if (bucket.classList.contains("done")) {
          localStorage.setItem("bucket" + index, "done");
          window.alert('달성을 축하합니다');
        } else {
          localStorage.setItem("bucket" + index, "");
          window.alert('달성하고 꼭 DONE 만들기!'); //이건 취향껏 만들었다
        }
      });
    });
  </script>

결과물: 튜터님 도움으로 무사히 완성!

그리고 5시간을 함께했던 우리들

다들 고생 많으셨어요! 재미있었어요!