* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
확인도장 오류(여전히 2023 확인도장만 뜨고 인터넷 체크표시 url이 안뜨네요)
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Hahmlet:wght@400;500;600;700&display=swap" rel="stylesheet">
<title>2024 버킷리스트</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@400;500;600;700&display=swap'); * {
font-family: 'Hahmlet', serif;
}
.title {
color: white;
background-color: blue;
font-size: 24px;
padding: 10px 32px;
border-radius: 8px;
}
.bg {
width: 360px;
background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bg-grid.png");
}
.msg {
font-weight: bold;
}
.bucket {
width: 160px;
height: 160px;
background-size: cover;
background-position: center;
}
.img1 {
background-image: url("data:image/png;base64,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");
background-size: cover;
background-position: center;
}
.img2 {
background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-lightred.png");
background-size: cover;
background-position: center;
}
</style>
<link rel="stylesheet" type="text/css" href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/sparta-bucket2.css">
</head>
<body class="bg-t5 center">
<h1 class="title-t5">2024 버킷리스트</h1>
<p class="msg">꼭 이뤄보자!!</p>
<div class="row flex-row wrap">
<diV class="bucket img1-t5 center">7.1&83 이하(월 2회 IF)</diV>
<diV class="bucket img2-t5 center">주 3회 이상 운동</diV>
<diV class="bucket img2-t5 center">앎&삶 거리좁히기(마음공부&수행,싫어하는 일 안하기)</diV>
<diV class="bucket img1-t5 center done">해외여행(장가계 or 북해도)</diV>
<diV class="bucket img1-t5 center">신용대출금 4천만원 상환</diV>
<diV class="bucket img2-t5 center">3.67억원 연금자산 달성(채권강화)</diV>
</div>
<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");
} else {
localStorage.setItem("bucket" + index, "");
}
});
});
</script>
</body>
</html>
