왜 했냐면..
광고로 스파르타코딩 무료강의가 보였는데 재밌어보여서 따라해봤다!
정말 단순하게 따라하기만 하면 되는거라 정말 쉽고 금방했지만 요..녀석..완성본이 맘에 안 드는게 좀 있어서 개선을 좀 해봤다.
뭐가 맘에 안 들었냐면..
- 이미 지난 날짜의 카드가 안 뒤집혀있다.
=> 난 이게 이미 뒤집어져있으면 했다. - 카드를 뒤집으면서 모달이 뜨는데 다시 뒤집으면 또 모달이 뜬다.
=> 다시 뒤집을 땐 모달이 안 뜨면 좋겠다. - 아직 기간이 안된 카드를 누르면 alert이 뜨고 카드가 뒤집어진다.
=> 이게 별로 안 이뻐서 모달창을 활용하면 좋겠고 카드도 안 뒤집어지면 좋겠다.
그래서 어떻게 개선했냐면...
👉 github
이미 지난 날짜의 카드가 안 뒤집혀있다.
// countdown.js
...
if (now.getDate() > openDate.getDate()) {
checkbox.checked = true;
checkbox.disabled = true;
}
...요렇게 각 카드마다 이미 지난 날짜의 경우엔 체크 상태로 만들어 뒤집고 다시 뒤집을 수 없게 checkbox를 disable 처리해줬다.
카드를 뒤집으면서 모달이 뜨는데 다시 뒤집으면 또 모달이 뜬다.
// countdown.js
...
door.addEventListener("click", () => {
if (checkbox.checked && !checkbox.disabled) return;
...이미 뒤집어진 카드를 다시 뒤집는 경우엔 모달이 안 보이게 만들어줬다.
아직 기간이 안된 카드를 누르면 alert이 뜨고 카드가 뒤집어진다.
// countdown.js
const daysRemaining = Math.ceil((openDate - now) / (1000 * 60 * 60 * 24));
checkbox.disabled = true;
const imageUrl = `image/frame/frame${index + 1}.png`;
const text = `이 카드는 ${daysRemaining}일 후에 열 수 있어요!`;
return handleModal(imageUrl, text);일단 뒤집어지지않게 disable 처리를 해주고 handleModal함수에 카드 앞면 이미지와 alert창에 표시되던 내용을 text로 넘겨줬다.
마무의리
엄청난건 아니지만 그래도 내 입맛대로 바꿔본 어드벤트 캘린더가 완성됐다! 간만에 Vanilla JS 하려니까 좀 어색하기도 했다. 이 어드벤트 만든걸 좀 활용해서 생일 어드벤트 캘린더..같은걸 만들어보는 것도 재밌을꺼 같다. 멘트같은거 직접 입력할 수 있게 하면 최애 선물용..이런걸루다가 할 수 있지 않을까나. 결국 생각의 끝엔..덕질인가부다..껄껄✌️
240214 수정사항
23년12월25일 기준으로 계산이 되게 해놨더니 남은 날짜와 시간이 이상하고 현재 12월이 아닌데도 날짜에 맞춰 카드가 뒤집어져있어서 이부분을 수정해줬다.
// 현재 한국 시간을 얻어오기
const now = new Date(
new Date().toLocaleString("en-US", { timeZone: "Asia/Seoul" })
);
const targetDate = new Date(`${now.getFullYear()}-12-25T00:00:00Z`);이렇게해서 targetDate의 연도를 현재 한국 시간에 맞는 연도로 맞춰주었다.
...
if (now.getDate() > openDate.getDate()) {
checkbox.checked = currentMounth === 12;
checkbox.disabled = true;
}
...그리고 현재 12월이 아니면 어드벤트 캘린더가 자동으로 뒤집어지지 않게 처리해줬다!
