- 이 프로젝트는 인천대학교 중앙 밴드동아리 크레퍼스의 동아리방 청소 작업을 원활히 하기 위하여 시작되었다.
- 사이트 바로가기
- 이제 결과페이지에서 '결과 캡쳐' 버튼을 누르면 청소 일정표를 이미지 파일로 다운받을 수 있습니다.
- 청소 기간을 한달 단위로 작성하고 싶은 경우(ex. 23.04.01 ~ 23.04.30)에 무한로딩이 생기는 오류가 있어 해결 요청을 받았다.
- while문의 논리가 잘못되어 이 경우 오류가 발생하였는데, while(true)와 if문 안에 break를 넣어주는 것으로 해결하였다.
- 학생 리스트를 작성하고 저장하는 기능
- 함수 saveStudents()는 "students"라는 키의 로컬 스토리지에 학생 객체를 저장한다.
- 함수 addStudent()는 새로운 학생이 추가되면 학생의 이름을 리스트에 포함시킨다. 이 과정에서 li태그와 span태그, button태그는 동적으로 생성한다.
- 함수 deleteStudent()는 li 태그를 삭제하고 id를 이용하여 해당 학생을 리스트에서 지운다.
- 함수 studentSubmit()은 preventDefault를 사용하여 새로고침을 막아주고, 새로운 학생의 이름을 받아 그 이름을 newStudentObj의 text 프로퍼티에 넣으면서 Date.now()를 이용해 id를 생성해준다. 이후 students 배열에 푸시, addStudent에 인수로 넣어 실행, saveStudents를 실행해준다.
- 함수 studentFinSubmit()은 fin-button이 클릭되면 실행되는 것으로, 'studentsfin'이라는 키를 가진 로컬스토리지에 저장하고 studentForm과 studentList의 hidden 클래스를 다시 더해주어 보이지 않게 한다.
- studentForm이 submit되면 studentSubmit를 실행한다.
- 'students' 로컬 스토리지가 null이 아니면 STUDENTS_KEY의 내용을 가져와서 addStudent()를 해준다.
- savedStudentsFin이 null이면 아직 명단 작성이 완료되지 않은 것으로, hidden 클래스를 지워주고 명단 작성 완료를 클릭하면 studentFinSubmit()을 실행해준다.
- 작성한 학생 리스트에서 학생별 청소 불가능 요일, 일정표를 작성하려는 달을 입력받는 기능
- makeTable()은 학생 수만큼 학생의 이름과 요일별 checkbox가 포함된 표를 작성한다.
- isChecked()는 체크박스가 체크되어있는지에 대한 정보를 배열에 담아 localStorage에 저장한다.
- getYearMonth()는 연도와 월을 입력받는다.
- informationSubmit은 #yearmonth-form이 submit 되면 실행되며, isChecked(), getYearMonth()를 실행하고 #week-table표와 #yearmonth-form을 보이지 않게 한다.
- 해당 기간의 달력을 표시하는 기능
- date 변수에 시작 날짜를 입력한다.
- firstDay 변수는 시작 날짜의 요일을 가진다.
- lastDay 변수는 해당 월이 끝나는 날의 날짜(일)를 가진다.
- 이를 이용해 for문으로 div태그로 감싼 숫자를 추가하면서 달력을 만든다.
- 청소 일정을 정하여 달력에 입력하는 기능
- shuffle()을 이용해 객체 배열의 순서를 섞는다. (새로고침 할 때마다 청소 명단이 바뀌게 하기 위함)
- currentDay(오늘의 요일)가 0(일요일)이나 6(토요일)이 아니고, currentDate(오늘의 날짜)가 holidays 배열에 포함되는 날짜가 아니면 청소 인원을 입력한다.
- studentsObj의 0번 인덱스부터 오늘 요일에 청소가 가능한 사람을 찾아서 입력한다.
- compare 변수에 이 사람을 저장해두고 두번째 사람을 선택할 때 새로운 사람이 같은 사람이라면 중복하여 입력하지 않고 다음 사람으로 넘어간다.
- 토, 일은 각각 파란색과 빨간색으로 칠한다.
- makeCleaningSchedule()의 가장 바깥 while문은 currentMonth가 endMonth와 같고 count(오늘의 일자)가 endDay+1과 같으면 종료된다.
- 처음부터 다시 시작하는 기능 (학생 리스트는 지우지 않음)
- 버튼을 클릭하면 goFirst()함수를 실행하도록 한다.
- goFirst()는 localStorage에 첫번째 학생 리스트를 제외한 나머지 항목을 삭제하고 페이지를 새로고침한다.
- 학생별 청소횟수를 알려주는 기능 구현
- div 태그 안에 청소횟수를 숨겨두고 누르면 열리고 다시 누르면 닫히게 만들었다.
-
이번 학기 청소에 참여하는 인원(청소명단)을 한명씩 입력한다.
- 1명씩 Enter로 입력
- 명단 아래에는 현재 입력한 인원을 알려준다.
- '모두 지우기' 버튼을 클릭하면 입력한 모든 학생이 지워진다.
- 입력 완료한 모습
-
명단 작성 완료 후 '명단 작성 완료' 버튼을 누르면 다음 페이지로 이동한다.
- 다음 페이지 모습
- 다음 페이지 모습
-
학생별로 청소 불가능한 요일을 조사하여 입력한다.
- 월,화,수,목,금 중 안되는 요일이 해당하는 위치의 체크박스를 체크한다.
- 다음 페이지에 다녀와도 체크박스는 기억된다.
- 잘못된 입력을 하면 경고창이 뜨고 다음으로 넘어갈 수 없다. 잘못된 입력의 예시는 다음과 같다.
- 특정 학생의 청소 불가능한 요일이 월,화,수,목,금 모두 체크되어 있는 경우
- 특정 요일이 모든 학생에게 체크된 경우
-
학기 개강일과 학기 종강일을 입력한다.
- 학기 시작일과 학기 종료일은 숫자만 입력할 수 있다.
- 다음 페이지에 다녀와도 숫자들은 기억된다.
- 잘못된 입력을 하면 경고창이 뜨고 다음으로 넘어갈 수 없다. 잘못된 입력의 예시는 다음과 같다.
- 학기 시작일과 학기 종료일의 연도가 다른 경우
- 학기 시작 월이 학기 종료 월보다 뒤인 경우
- 학기 시작 월 또는 학기 종료 월이 1 ~ 12 사이의 숫자가 아닌 경우
- '처음으로' 버튼을 클릭하면 명단 작성 화면으로 돌아간다. (입력한 학생 명단은 사라지지 않음)
- '모두 지우기' 버튼을 클릭하면 입력한 모든 학생이 지워지고 첫 화면으로 돌아간다.
-
한 학기 청소가 진행되던 중 새로 청소일정을 만드는 경우 누적 청소 횟수를 입력한다.
- 기본적으로 0이 입력되어 있다.
- 다음 페이지에 다녀와도 숫자들은 기억된다.
- 숫자만 입력 가능하며 아무것도 입력되어 있지 않으면 0으로 인식한다.
- 3,4,5 모두 입력 완료한 모습
-
'작성 완료' 버튼을 누르면 청소표가 만들어진다.
- 공휴일과 주말은 청소일정에 포함하지 않는다.
- 새로고침하면 청소표는 계속해서 바뀐다.
- '이전 페이지' 버튼을 클릭하면 이전 페이지로 돌아가서 학생별 불가능한 요일과 학기 시작일, 학기 종료일 등을 수정할 수 있다.
- '작성 완료' 버튼 클릭 후 모습
-
'학생별 청소횟수 보기' 버튼을 클릭하면 학생별로 이번 학기에 청소를 몇번 하게 되는지 알 수 있다.
- '학생별 청소횟수 닫기'를 누르면 학생별 청소횟수가 사라진다.
- 청소횟수는 오름차순으로 정렬되어 있다.
-
만약 신입생 모집 등으로 중간에 인원 변경이 있을 경우 인원 변경 예상 날짜 전까지를 학기 종료일로 하여 청소 일정을 출력하고 인원 변경 이후 다시 학기 시작일과 학기 종료일을 입력하여 나머지 청소 일정을 만들 수 있다. 이 경우 누적 청소횟수를 이용하여 학기 전체의 학생별 청소횟수를 균등하게 할 수 있다.