Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking (html편)

falconlee236

2022. 2. 10. 23:01

순수 자바스크립트로만 웹 프로젝트를 몇개 할 것 같다. 아래에 있는 내용은 그 두번째 프로젝트이다.

여기에 올라온 모든 프로젝트와 소스코드는 here 여기서 확인할 수 있다.

vanilla javascript Toy project 2. Movie Seat Booking

readme에 나온 요구 사항은 다음과 같다.

영화 선택, 스크린, 좌석, 좌석 정보가 포함된 UI를 구성하라
사용자는 영화/가격을 선택할 수 있다.
사용자는 좌석을 선택/비선택 할수 있다.
사용자는 이미 선택된 좌석을 선택할수 없다.
좌석의 수와 전체 가격이 업데이트 되어야 한다.
UI가 새로고침 되어도 상황이 유지되게 좌석과 영화, 전체 가격을 웹 로컬 저장소에 저장하라.

완성된 최종 결과물은 다음 링크에서 확인할 수 있다.
링크

html문서 만들기 및 head, link, script 연결

html 기본틀을 만드는 법은 이전에서 설명했듯이 vscode에서 !만 치고 TAB을 누르면 된다.

먼저 이 창에 있는 탭이 Movie Seat Booking라고 되어있으므로 title tag를 바꾸고, 기본적으로 css와 js파일은 따로 만들어서 html코드에 삽입하기 때문에 head태그의 맨 뒤에 <link rel="stylesheet" href="style.css">를, body태그의 맨 뒤에 <script src="script.js"></script>를 넣는다.

html의 body 구성하기

이번 프로젝트에서는 전체 레이아웃을 flex로 구성하지 않고 각각 요소를 flex로 구성하는 방법을 배울 것이다. 이 프로젝트의 전체 레이아웃 구성은 다음과 같다. 이 프로젝트로는 꼭 전체 요소를 flex 컨테이너로 꼭 담지 않아야 한다는 것을 알려주고, flex 컨테이너의 특징이 자동 정렬이라는 사실을 다시한번 알려준다고 생각한다.
- class = movie-container: 영화를 선택하는 태그인 select요소가 담겨있는 부분
- class = showcase: 좌석의 종류를 보여주는 부분
- class = container: 스크린과 좌석의 선택 여부를 보여주는 부분
- class = text: 전체 선택된 좌석의 총 수와 가격을 보여주는 부분

1. class = movie-container

이 container에는 영화를 선택하는 select태그가 있다. HTML <select> 요소는 옵션 메뉴를 제공하는 컨트롤을 나타낸다. 이때 <select> 안에 있는 요소들은 <option> 태그로 결정한다.

option 태그에서 중요한 속성은 다음 2가지이다.
- value: 주로 option태그를 자바스크립트에서 데이터 값으로 다룰때 주로 사용한다. 실제로 사용하는 방법은 뒤에서 소개할것이다. 이 값이 없다면 option 요소의 텍스트 내용을 대신 사용한다.
- selected: 지정한 경우 초기에 이 옵션을 선택한 상태로 설정한다. multiple 옵션을 지정하지 않은 경우 selected 는 하나만 설정할 수 있다.
이때 우리는 선택한 영화를 가지고 좌석의 개수를 선택했을 때 지불해야하는 총 금액을 구해야 한다. 즉 영화가 달라진다면 영화의 가격이 달라지기 때문에 같은 좌석의 개수라도 지붏해야 하는 총 금액이 달라진다. 이런 상호작용을 하기 위해서는 각 option에 영화의 가격을 입력해서 사용하는 것이 편한데, 이럴때 value값을 사용할 것이다.
지금까지 따라왔다면 코드는 다음과 같다.
<div class="movie-container"> <label>Pick a Movie:</label> <select id="movie"> <option value="10">Avengers: Endgame($10)</option> <option value="12">Joker ($12)</option> <option value="8">Toy Story 4($8)</option> <option value="9">The Lion King($9)</option> </select> </div>

2. class = showcase

이 class는 좌석의 종류를 쇼케이스처럼 보여주는 역할을 하는 태그이다. 나는 처음에 이 부분을 구성하려고 했을 때, div를 사용하려 했지만 목록을 나타내는 ul태그를 사용해서 구성한것 보고 한수 배웠다.

간단하게 생각하면 총 3개의 카테고리가 있으니 3개의 칸을 가진 표를 그리면 될 것이다.
목록을 만들려면 <ul>태그와 <ol>태그를 사용해야 한다. ul태그는 unordered list의 약자로 순서가 없는 목록을, ol태그는 ordered list의 약자로 순서가 있는 목록을 그린다. 각 목록에있는 요소는 <li> 태그를 사용해서 구분한다. 우리는 순서가 중요한것이 아니라 개수가 중요하기 때문에 <ol>이 아닌 <ul>을 사용할 것이다.
여기서 처음으로 좌석 모양을 그려야 하는 난관에 봉착하는데, 간단한 도형은 div를 사용해서 그린다. 그리는 방법은 다음 포스트를 참고하자. 그리고 작은 텍스트는 <small>을 사용하는 것도 잊지말자.
지금까지 따라왔다면 코드는 다음과 같다.
<ul class="showcase"> <li> <div class="seat"></div> <small>N/A</small> </li> <li> <div class="seat selected"></div> <small>Selected</small> </li> <li> <div class="seat occupied"></div> <small>Occupied</small> </li> </ul>

3. class = container

순수 자바스크립트이기 때문에 미친 노가다가 필요한 구역이다. 이 container에는 하나의 스크린과 8 * 6 = 48개의 좌석이 필요한데, 일일이 div를 사용해서 나눈다. 왜냐하면 div한개당 1개의 좌석이 생기기 때문에 총 48개 div가 필요하다. 거기에 screen부분 1개를 더해서 총 49개 div..

그런데 뒤에서 설명할 부분을 여기서 잠깐 설명하자면, flex display는 자동 정렬기능을 지원하기 때문에 한줄씩 좌석을 배치하면 각각의 줄에 flex display를 적용하면 깔끔하게 정렬이 된다. 이때 이미 예매가 완료된 좌석은 seat클래스에 occupied 클래스를 추가해서 구분한다. 이렇게 두 클래스를 동시에 가지고 있는 것이 css를 적용하기 편하다.

지금까지 따라왔다면 코드 일부분은 다음과 같다.

<div class='container'>
  <div class="row">
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat occupied"></div>
      <div class="seat occupied"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
  </div>
</div>

4. class = text

맨 아래에 있는 선택한 전체 좌석의 수와 선택한 영화에 따라서 달라지는 지불해야할 요금이 보이는 부분이다.

div태그와 p태그 모두 영역을 나누는 역할은 같지만 보통 문자 단락을 사용할때 p태그를 주로 사용한다. 그래서 text class는 p tag로 작성했다.
색깔이 달라지는 두 숫자는 모두 span을 사용해서 처리했다. span태그는 inline태그라서 문자가 차지하는 부분까지만 영역을 차지한다. 색깔이 다른 부분은 css와 js를 사용해서 파란색 변환, 값 계산등의 작업을 처리할 예정이다.
여기까지 따라왔으면 코드는 다음과 같다.
<p class="text"> You have selected <span id="count">0</span> seats for a price of $ <span id="total">0</span> </p>

이제 기본적인 html body부분은 끝났다. 이번 프로젝트는 코드 길이상 전체를 다 올릴 수 없을 것이라고 생각했지만 그냥 다 올린다. 전체 코드를 보면서 위에서 설명한 부분과 코드를 보면서 유기적으로 이해했으면 좋겠다.

    <body>
        <div class="movie-container">
            <label>Pick a Movie:</label>
            <select id="movie">
                <option value="10">Avengers: Endgame($10)</option>
                <option value="12">Joker ($12)</option>
                <option value="8">Toy Story 4($8)</option>
                <option value="9">The Lion King($9)</option>
            </select>
        </div>

        <ul class="showcase">
            <li>
                <div class="seat"></div>
                <small>N/A</small>
            </li>
            <li>
                <div class="seat selected"></div>
                <small>Selected</small>
            </li>
            <li>
                <div class="seat occupied"></div>
                <small>Occupied</small>
            </li>
        </ul>

        <div class="container">
            <div class="screen"></div>

            <div class="row">
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
            </div>

            <div class="row">
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat occupied"></div>
                <div class="seat occupied"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
            </div>

            <div class="row">
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat occupied"></div>
                <div class="seat occupied"></div>
            </div>

            <div class="row">
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
            </div>

            <div class="row">
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat occupied"></div>
                <div class="seat occupied"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
            </div>

            <div class="row">
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat"></div>
                <div class="seat occupied"></div>
                <div class="seat occupied"></div>
                <div class="seat occupied"></div>
                <div class="seat"></div>
            </div>
        </div>
        <p class="text">
            You have selected 
            <span id="count">0</span> 
            seats for a price of $
            <span id="total">0</span>
        </p>      
        <script src="script.js"></script>
    </body>

저작자표시 비영리 변경금지

'VanillaJS' 카테고리의 다른 글

Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking - CSS편(2) (0)	2022.03.01
Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking - CSS편(1) (0)	2022.02.13
Vanilla JS Toy 프로젝트 - 1. Form Validator (javascript편) (0)	2022.01.09
Vanilla JS Toy 프로젝트 1. Form Validator - CSS편(2) (0)	2022.01.07
Vanilla JS Toy 프로젝트 1. Form Validator - CSS편(1) (0)	2022.01.03

To the Expert

Vanilla JS Toy 프로젝트 - 2. Movie Seat Booking (html편)

vanilla javascript Toy project 2. Movie Seat Booking

html문서 만들기 및 head, link, script 연결

html의 body 구성하기

1. class = movie-container

2. class = showcase

3. class = container

4. class = text

'VanillaJS' 카테고리의 다른 글

티스토리툴바

vanilla javascript Toy project 2. Movie Seat Booking

html문서 만들기 및 head, link, script 연결

html의 body 구성하기

1. class = movie-container

2. class = showcase

3. class = container

4. class = text

'VanillaJS' 카테고리의 다른 글

VanillaJS 카테고리와 연관된 콘텐츠

티스토리툴바