<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Movie Seat Booking</title>
</head>
<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>
</html>
body의 첫번째 div에는 movie-container가 들어간다.
영화 선택 섹션인데
label에 Pick a Movie: 를 넣어준다.
그리고 select 태그 > option 태그 (영화 4~5개 정도).
option 태그의 value 값에도 영화 가격을 넣어줬다.
body의 두번째 div에는 showcase가 들어간다.
각 자리 색깔의 의미
showcase는 ul 각 자리는 li
li 속 div와 small 태그
body의 세번째 div에는 좌석 container가 들어간다.
row는 5~6개 각자 원하는 만큼
row 속 좌석 8~10개
마지막으로 text paragraph가 들어간다.
You have selected <span id="count">0</span> seats for a price of $<span id="total">0</span>
'Mini Projects' 카테고리의 다른 글
| Movie Seat Booking (4) make Screen 3D (0) | 2020.07.10 |
|---|---|
| Movie Seat Booking (2) - CSS colors (0) | 2020.07.09 |
| Form Validator (5) - Logic 정리 (0) | 2020.07.09 |
| Form Validatior (4) - Check Length, Email & Password match (0) | 2020.07.09 |
| Form Validator (3) - Check Required & Refactor (0) | 2020.07.09 |
