커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
doorDiv가 null 이라는데 왜그럴까요
1시간만에 크리스마스 디데이 캘린더 만들기 v0
기타
김*연
댓글
6
・
추천
0
・
조회수
13
조회수
13
답변 완료
선생님 제가 날짜를 변경해 보았는데 doorDiv가 null 이라고 뜨면서 모달이 안뜹니다!
count.js
// 목표 날짜 설정 (예시: 2023년 1월 1일)
const targetDate = new Date("2024-01-01");
function updateCountdown() {
// 현재 한국 시간을 얻어오기
const now = new Date(new Date().toLocaleString("en-US", { timeZone: "Asia/Seoul" }));
// 남은 시간 계산
const timeRemaining = targetDate - now;
// 시간, 분, 초 계산
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);
// 결과를 HTML에 업데이트
const countdownElement = document.getElementById('countdown');
countdownElement.style.color = 'crimson'
countdownElement.style.fontWeight="bold"
countdownElement.innerHTML = `
<span>D-${days} ${hours}시간${minutes}분${seconds}초</span>`;
}
// 페이지 로드 시에도 업데이트 수행
updateCountdown();
// 1초마다 업데이트
setInterval(updateCountdown, 1000);
// 날짜 기준 카드 오픈 기능
const doors = document.querySelectorAll('.door');
doors.forEach((door, index) => {
door.addEventListener('click', () => {
// 현재 한국 시간을 얻어오기
const now = new Date(new Date().toLocaleString("en-US", { timeZone: "Asia/Seoul" }));
// 각 날짜에 해당하는 날짜를 계산
const openDate = new Date(2023, 11, index + 8); // 2023년 (0~11)12월 1일부터 시작
// 현재 날짜가 열 수 있는 날짜 이후인지 확인
if (now.getTime() > openDate.getTime()) {
// 여기에 모달을 열거나 특정 동작을 수행하는 코드 추가
// 상위 div의 class 번호를 찾아서 image url에 사용합니다
const imageUrl = `image/card/card-${index + 1}.png`;
// 'back' 클래스를 가진 요소를 찾아 스타일을 가져옵니다.
const doorDiv = document.querySelector(`.day-${index + 1}`)
const backDiv = doorDiv.querySelector(`.back`);
const style = window.getComputedStyle(backDiv);
const pTag = backDiv.querySelector('p')
const text = modalMessageList[index]['message']
// showModal 함수를 호출하여 모달을 표시합니다.
showModal(imageUrl, text);
// alert('이벤트 캘린더를 엽니다.');
} else {
// 현재 날짜가 열 수 있는 날짜보다 이전인 경우 몇 일 후에 열 수 있다는 메시지를 표시
const daysRemaining = Math.ceil((openDate - now) / (1000 * 60 * 60 * 24));
console.log(openDate, now, daysRemaining)
alert(`이 카드는 ${daysRemaining}일 후에 열 수 있어요!`);
}
});
});
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:type" content="website">
<meta property="og:url" content="https://grayson-choi.github.io/advent_calendar/">
<meta property="og:title" content="스파르타코딩클럽 크리스마스 디데이 캘린더">
<meta property="og:image" content="image/OGimage.png">
<meta property="og:description" content="크리스마스까지 하루가 기다려지는 즐거움, 크리스마스 디데이 캘린더를 함께 만들어봐요!">
<meta property="og:site_name" content="SCC Advent Calendar">
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<title>Sparta Advend Calendar 2023</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="snow.css">
<link rel="stylesheet" href="share.css">
<link rel="stylesheet" href="music.css">
</head>
<body>
<!-- 눈 내리는 애니메이션에 필요한 코드. body 밑에 넣어주세요 -->
<div class="snow-wrap">
<div></div>
</div>
<section class="grid-1">
<div class="title flex-col item-baseline">
<img src="image/newyear.png">
<div class="countdown">새해까지🐲 <span id="countdown" class="countdown"></span> 남음</div>
</div>
<div class="day-8">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num" >8</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-9">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">9</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-10">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">10</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-11">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">11</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-12">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">12</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-13">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">13</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-14">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">14</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-15">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">15</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-16">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">16</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-17">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">17</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-18">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">18</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-19">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">19</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-20">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">20</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-21">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">21</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-22">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">22</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-23">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">23</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-24">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">24</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-25">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">25</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-26">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">26</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-27">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">27</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-28">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">28</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-29">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">29</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-30">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">30</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-31">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">31</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
</section>
<footer>
<div class="flex-row">
<button id="shareButton">공유하기</button>
<button id="studyButton"><a href="https://spartacodingclub.kr/">만들러 가기</a></button>
</div>
<div class="flex-row">
<audio class="bgm" src="carol.mp3" preload="auto" style="display: none;"></audio>
<div class="sound"></div>
<div class="sound stop"></div>
</div>
<p class="copyright">Copyright ⓒ TeamSparta All rights reserved. ☃️</p>
</footer>
<script src="index.js"></script>
<script src="share.js"></script>
<script src="music.js"></script>
<script src="count.js"></script>
</body>
</html>
댓글 알림
