커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
1-7 강의에서 크리스마스까지 남은 시간이 안떠요
1시간만에 크리스마스 디데이 캘린더 만들기 v0
1주차
이*래
댓글
8
・
추천
0
・
조회수
30
조회수
30
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
강의 7분까지 진도를 맞췄는데, 남은 시간 설정 script를 추가하고 index.html에 연결했는데 아래와 같은 문구의 에러가 뜹니다.
해당 에러는 무슨 에러일까요? 답변 가능하신 시간에 답변 부탁드립니다.
작성한 코드 및 에러 메세지
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>
<!-- 이 곳에 뼈대 코드를 입력! -->
<!--html뼈대(구조) 웹페이지 제작 코드-->
<!-- <h1 class="title">안녕 눈사람</h1> -->
<section class="grid-1">
<div class="title flex-col item-baseline">
<img src="image/merry.png">
<div class="countdown">크리스마스까지 <span id="countdown" class="countdown"></span> 남음</div>
</div>
<div class="day-1">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">1</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-2">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">2</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-3">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">3</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-4">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">4</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-5">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">5</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-6">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">6</span>
</div>
<div class="back"></div>
</div>
</label>
</div>
<div class="day-7">
<label>
<input type="checkbox">
<div class="door">
<div class="front">
<span class="date-num">7</span>
</div>
<div class="back"></div>
</div>
</label>
</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>
</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="countdown.js"></script>
</body>
</html>
countdown.js
// 목표 날짜 설정 (예시: 2023년 1월 1일)
const targetDate = new Date("2023-12-25T00:00:00Z");
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 = '#FF9EA9'
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 + 1); // 2023년 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}일 후에 열 수 있어요!`);
}
});
});
댓글 알림
