[바닐라코딩]자바스크립트로 달력( Calendar Todo) 구현하기

할 일 리스트를 작성하고 체크, 삭제가 가능한 달력입니다.

DOM 관련 세번째 과제였던 달력 과제를 리뷰하겠습니다.

Todo

1. 아래 이미지의 달력과 기능 및 스타일이 최대한 일치하도록 달력을 만들시오. 과거나 미래의 연도 또한 보여줄 수 있어야 합니다.

2. 달력 아래에는 Todo List를 만들어야 합니다.

3.Todo List는 날짜별로 관리되기 때문에, 날짜를 클릭할때마다 Todo List는 클릭된 날짜에 해당하는 Todo List를 보여주어야 합니다.

아래 사항들이 충족되어야 Pass 입니다.

날짜 및 요일 확인 가능(작년, 재작년, 내년 등 모두 포함)

날짜 선택 기능

선택된 날짜 표기 기능(날짜 숫자색 변경)

날짜 선택 시, 해당 날짜에 대한 Todo List 보여주기 기능

Todo List에 Todo Item 추가 기능(해당 날짜의 Todo Item으로 추가됨)

다른 날짜 선택시, 새롭게 선택된 날짜에 대한 Todo List 보여주기 기능

Markup(마크업) 작업

1. body 태그 안에 컨텐츠의 최상위 태그로 main div 태그를 만들었습니다. 그 밑에 content-wrap div 태그를 만들었습니다.
2. content-left div 태그는 달력 왼쪽에 큰 글자와 숫자로 클릭된 날짜와 요일을 보여주고 밑에는 Todo-List가 들어갈 공간으로 만들었습니다.
3. content-rigth div 태그는 달력 오른쪽에 매달 달력을 출력할 공간입니다. 위에는 월과 연도를 보여주고 그 밑에는 요일을 보여줍니다. table 을 만들어 tr 과 td 태그를 자바스크립트로 생성해 매달 달라지는 요일과 날짜를 출력할 예정입니다. (그래서 마크업에선 빈 공간으로 두었습니다.)
4. main-wrap div 태그 밑에는 main-day 와 main-date div 태그가 있는데 있는 큰 숫자와 글자로 클릭된 날짜와 요일을 넣을 공간입니다.
5. todo-wrap div 태그 밑에는 todo-title 과 input-wrap div 태그가 있습니다. todo-title 은 “Todo List” 글자를 넣어 todo-list 제목을 보여주고 input-wrap 에는 input 태그와 botton 태그를 넣어서 todo-list를 받을 예정입니다.

CSS 작업

JavaScript 작업

1.달력 출력하기

매달 시작하는 요일과 일자가 다릅니다.

1. Date 객체를 이용해서 오늘의 날짜와 연도, 요일 등의 정보를 모두 담습니다.
2. 윤년을 체크하기 위해서 first.getFullYear() % 4 === 0 으로 체크합니다. 윤년일 경우 leapYear 배열을 pageYear 에 담고 아닐 경우 notLeapYear 배열을 pageYear 에 담습니다. leapYear 배열과 notLeapYear 배열에는 각각 1월부터 12월까지 총 일수가 들어있습니다.
3. showCalendar 함수 안에서는 for문을 두 번 돌립니다. 첫 번째 for문은 주(week)를 만들고 두 번째 for문은 일(date)을 만듭니다. 첫 번째 for문에서는 주(week)를 만들기 때문에 6번만 돌립니다.(최대 6주) 먼저 document.createElement('tr');로 tr 요소를 생성합니다. 그 다음 두 번째 for문에서는 i === 0 && j < first.getDay() 를 체크합니다. 이 조건은 만약 첫 번째 주라면 시작하는 요일부터 날짜를 출력하기 위해 설정한 것입니다.
4. cnt > pageYear[first.getMonth()] 이 조건은 달력 출력 종료 조건입니다. 월마다 총 일수가 다르기 때문에 어떤 달은 30일이 마지막 날이고 어떤 달은 31일이 마지막 날입니다. 앞에 2번에서 pageYear 에 월마다 총 일수를 담아 놓았기 때문에 비교해서 날짜를 출력하면 됩니다.
5. appendChild($td) 와 appendChild($tr) 로 생성된 요소들을 DOM 트리에 넣었습니다.
6. 추후 달력 업데이트를 위해서 removeCalendar 또한 미리 만들었습니다.

2. 이전 달과 다음 달로 이동하기

화살표를 클릭하면 이전 달과 다음 달로 이동할 수 있습니다.

1. pageFirst (월 첫번째 날에 대한 정보)와 pageYear 를 업데이트합니다. prev (이전 달로 이동하는 함수)는 1월인지를 확인해서 연도를 변경하고 next (다음 달로 이동하는 함수)는 12월인지를 확인해서 연도를 업데이트합니다.
2. today 또한 Date 객체를 새로 생성해 업데이트 해줍니다.
3. 마지막으로 다시 showCalendar 함수를 실행합니다.

3. 클릭해서 날짜 색상 변경 & 왼쪽 화면 변경

날짜를 클릭하면 해당 날짜 스타일 변경되고 왼쪽의 날짜와 요일이 업데이트 됩니다.

1. clickStart 함수 안에서 for문을 돌면서 모든 날에 addEventListener 이벤트 처리기를 담아 놓고 클릭하면 changeToday 함수 안에서는 for문을 통해서 모든 날짜에 active 클래스가 있는지 확인하고 있다면 active 클래스를 삭제하고 e.currentTarget 을 통해서 이벤트 처리기가 달려있는 요소에 active 클래스를 추가해줍니다.
2. showMain 함수는 업데이트 된 today 객체 정보를 이용해서 왼쪽 화면의 날짜와 요일을 업데이트 해줍니다. innerHTML = dayList[today.getDay()]; 와 innerHTML = today.getDate(); 를 통해서 정보를 업데이트합니다.

4. Todo-List 입력, 체크, 삭제하기

Todo-list에 입력하고 체크, 삭제가 가능합니다.

1. addTodoList 함수는 input 받은 value 를 이용해서 Todo-List 를 만듭니다. document.createElement('div'); 로 div 태그를 만들어 input 의 value 를 담고 document.createElement('button'); 로 button 태그르 만들어 삭제 버튼를 만듭니다.
2. appendChild 를 이용해서 두 태그 다 inputList 에 넣어줍니다.
3. reshowingList 함수는 업데이트된 날짜의 TodoList 로 업데이트해줍니다. 먼저 forEach문으로 현재 있는 요소들은 삭제합니다.
4. 이후에는 todoList 배열에 담겨 있는 TodoList 데이터를 이용해 다시 해당 날짜의 TodoList 를 업데이트해줍니다.