[2주차 과제] 당근마켓 랜딩 페이지 클론 / javascript로 달력 만들기

[KIMGEONHWI]

✨어떤 과제를 수행했나요?✨

[2주차] 당근마켓 랜딩 페이지 클론 / javascript로 달력 만들기 과제를 수행하였습니다.

✨어려웠던점, 트러블슈팅✨

당근마켓 랜딩 페이지 클론

2024-05-26.9.16.32.mov

당근마켓 랜딩 페이지 클론과제는 어려운 점은 딱히 없었습니다.

javascript로 달력 만들기

2024-05-26.9.17.21.mov

javascript로 달력 만들기(오늘 날짜 표시)

for (let i = 0; i < 42; i++) {
  if (
    todayDate.getDate() == dates[i] &&
    todayDate.getMonth() == currentDate.getMonth() &&
    todayDate.getFullYear() == currentDate.getFullYear()
  ) {
    htmlDates += `<div class="date today">${dates[i]}</div>`;
  } else {
    htmlDates += `<div class="date">${dates[i]}</div>`;
  }
}

현재 순회 중인 날짜 dates[i]가 오늘 날짜(todayDate)와 같은지 확인하여 조건문이 참이라면, 현재 날짜(dates[i])는 오늘 날짜이다.
따라서 <div class="date today">${dates[i]}</div>를 htmlDates 문자열에 추가. 여기서 class="date today"를 추가하여 CSS를 통해 오늘 날짜를 강조할 수 있게 스타일링 해주었습니다.