[JS] javascript로 달력 만들기 ②

 

🔍  오늘 날짜 표시

---

date들을 하나씩 순회하며 비교한 후

오늘 날짜와 일치하는 date를 찾는다.

const today = new Date();

if (thisMonth === (today.getMonth() + 1) && thisYear === today.getFullYear()) {
    for (let date of document.querySelectorAll('.date')){
        if(parseInt(date.innerText) === today.getDate()){
            date.classList.add('today');
            break;
        }
    }
}

 

 

 

 

 

🔍  '이전달 / 다음달로 이동' 구현하기

---

일단 머리아픈 날짜들은 천천히 생각해보고

연/월 부터 바꿔보기로 했다.

const beforeMonthBtn = document.querySelector('.nav-before');
beforeMonthBtn.addEventListener('click', () => {
    let beforeMonth = thisMonth - 1;
    if (beforeMonth < 1) {
        beforeMonth = 12;
        thisMonth = beforeMonth;
        thisYear = thisYear - 1;
        document.querySelector('.month').innerText = thisMonth;
        document.querySelector('.year').innerText = thisYear;
    } else {
        thisMonth = beforeMonth;
        document.querySelector('.month').innerText = thisMonth;
    }
});

 

이렇게 써놓고 보니 글자 채워넣는 부분을

따로 함수로 관리해야겠다는 생각이 들어서

코드를 전체적으로 수정했다.

 

 

 

완성!

 

함수로 따로 빼서 관리하니까

자연스럽게 완성돼버려서

따로 적을 게 없다.... 😅

 

 

 

그나마 있었던 이슈는

이전달/다음달 버튼을 눌렀을때

이렇게 원래 있었던 날짜들 밑에 추가로 날짜들이 떠버려서

날짜를 그리는 함수에

기존 date들이 있으면 비우는 작업을 추가했고,

 

 

또 하나는 

 

이런 현상이 발생해서

첫 주 요일 미는 과정에서

이전달 마지막주 날짜가 6일 이하일때만

발동하도록 수정한 정도였다!

 

끝!

다음주는 자바스크립트와 인터랙티브(GSAP) 공부를 좀 할 예정이다.

 

 

---

 

 📌 전체 코드

https://github.com/logi023/javascript-project/tree/main/calculator