* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
ripit에서 봤을때는 잘 작동했는데 gitbub에서 링크 만드려고 하니까 오류가 났습니다 어떻게 해야할까요??
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>2024 찬진이 계획</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Hahmlet:wght@300&display=swap");
* {
font-family: "Hahmlet", serif;
}
.bg {
background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bg-grid.png');
background-position: center;
background-size: cover;
margin: auto;
width: 360px;
}
.title {
background-color: tomato;
border-radius: 10px;
color: white;
text-align: center;
padding: 4px 14px;
}
.bucket {
width: 160px;
height: 160px;
background-position: center;
background-size: cover;
}
.img1 {
background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-red.png');
}
.img2 {
background-image: url('https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-lightred.png');
}
. class='msg center' {
color: black !important;
}
</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 center'>올해 안에 3가지를 달성하지 못할 경우,</p>
<p class='msg center'>등산을 3번 하겠습니다.</p>
<div class="flex-row wrap">
<div class='bucket img1-t5 center'>10키로 감량하기</div>
<div class='bucket img2-t5 center'>부트캠프 하기</div>
<div class='bucket img2-t5 center'>앱개발 배워보기</div>
<div class='bucket img1-t5 center'>동남아 여행 가보기</div>
<div class='bucket img1-t5 center'>나에게 맞는 옷스타일 찾기</div>
<div class='bucket img2-t5 center'>일본어 or 영어 공부하기</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>
