반응형
TODO
- 오늘의 현재 요일 표기
- 오늘의 현재 날짜 표기
- 오늘의 현재 월 표기
- 오늘의 현재 연도 표기
- 일, 월, 화, 수, 목, 금, 토 요일 라벨링 표기
- 현재 월의 1일이 무슨 요일인지 판별하고, 해당 요일 라벨링에 1일 표기하기
- 현재 월의 마지막 날짜까지 달력에 표기하기
- 우측 화살표를 클릭 했을때, 다음 달의 요일 및 날짜 표기
- 좌측 화살표를 클릭 했을때, 이전 달의 요일 및 날짜 표기
- 특정 날짜를 클릭 했을때, 상단의 요일 및 날짜 반영하기
- 오늘의 종합적인 날짜를 구하려면 new Date 오브젝트를 활용.
- 개발자 도구의 콘솔을 확인해보니 Day와 Month는 숫자로 되어있음.
-> 숫자에 대응하는 문자열로 변환하기 위해 Day, Month에 대한 배열을 생성 - Day 배열과 반복문으로 라벨링 표기
->DOM 활용 span 생성하여 appendChild로 월~일을 포함하는 클래스(calDay)에 상속시키기 - 반복문 활용하여 각 일마다 span을 생성 후 calDate에 appendChild로 상속
- Date 오브젝트를 활용하여 당월의 첫 째날 날짜를 생성 후 요일 추출
첫째 날에 해당되는 요일의 정수 값만큼 calDate 맨 앞에 공백의 span 생성하여 상속 - 화살표에 Click event 생성하여 month와 year를 계산
month%2의 결과에 따라 31일, 30일, 28일로 span을 생성하여 배치
날짜를 생성할 때 현재 날짜와 동일한 값일 경우 classList.add를 활용하여 빨간 글씨로 표현되게 css 클래스를 추가 - (특정 날짜 클릭 시 상단에 반영)Click event 생성 후 클릭 시 이벤트 타깃의 textContent를 추출하여 새로운 Date 오브젝트 생성.
오브젝트로부터 날짜를 추출하여 상단에 표시
반응형
'IT > Project' 카테고리의 다른 글
[팀 프로젝트 기록] webpack, web-dev-server, cors, proxy 삽질기 (0) | 2022.02.09 |
---|---|
깃허브 (0) | 2021.06.02 |
바닐라코딩 사전학습 가이드 - google 홈페이지 클론 코딩 (0) | 2021.05.05 |
클론코딩 유튜브 사이트 따라 만들기 드림코딩 by 엘리 영상 참고 (0) | 2021.05.01 |
드림코딩 by 엘리. 웹사이트 따라만들기 (HTML, CSS) 2화 (0) | 2021.04.28 |