학교 '웹 프로그래밍' 강의를 수강하며 만들었던 과제물입니다. 시골 극장 홈페이지 만들기가 주제였는데, 제 고향에 있는 한 극장이 홈페이지가 없어서 만들어 보았습니다.
HTML, CSS, Java Script의 기초만을 사용해 기타 프레임 워크나 jQuery를 사용하지 않고 작성한 코드입니다.
- style-layout, style-presentation, style-size로 용도별 css 파일 분리
- 상단, 하단 바 고정 후 iframe으로 각 페이지 표시
- 극장 소개 페이지에 유튜브 동영상 및 네이버 지도 추가.
- 영화 정보 페이지는 각 영화 포스터 클릭시 구글 검색으로 넘어가도록 설정.
- JSP나 jQuery를 사용하지 않은 로컬 스토리지와 DOM 만을 사용한 좌석 예매 및 확인 페이지의 동적 문서 구현 (실제 회원 정보 기록이나 결제 미구현)
- 좌석 예매 페이지의 인원 수에 따른 좌석 선택 기능 추가
- 날짜와 시간 실시간 반영, 날짜는 당일 기준으로 일주일만 가능. 날짜와 시간을 설정하면 해당 날짜에 해당 시간 이후에 있는 모든 영화들에 대한 상영 목록이 표시.
아주 기본적인 개념만으로 구성해 본 페이지입니다. 학습용으로 도움이 되셨으면 좋겠습니다. 기타 피드백을 주셔도 좋습니다.
- 각 영화 마우스 오버 시 영화 설명 제공
- 각 영화 클릭 시 해당 날짜 및 시간의 영화 상영 정보 제공
- JS에 기록된 영화 상영 정보와 검색한 날짜, 시간이 일치하지 않으면 알림
- 선택 인원 별 좌석 자동 선택 기능
- 예매하기 버튼 클릭시 총 결제 금액 확인 알림 제공
- 예매 완료 후 예매 확인 및 취소 가능
- 로컬 스토리지를 활용, 예매된 좌석은 회색으로 표시 및 클릭 비활성화.