Project: Đặt chỗ xem phim Hiển thị các lựa chọn phim và chỗ ngồi trong rạp để chọn mua vé ## Mô tả Project - Hiển thị giao diện người dùng với lựa chọn phim, màn hình, chỗ ngồi, thông tin chỗ ngồi - Người dùng có thể chọn một bộ phim / giá - Người dùng có thể chọn/bỏ chọn chỗ ngồi - Người dùng không thể chọn ghế đã có người đặt rồi (occupied) - Số chỗ và giá sẽ cập nhật Giao diện tham khảo từ https://dribbble.com/shots/3628370-Movie-Seat-Booking
Bước 1: tạo giao diện HTML như sau <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 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> Bước 2: download style CSS về để trang điểm cho giao diện https://drive.google.com/file/d/1ec97ZCFM5sZH4JNZNaIlwuqimdHlPK1K/view?usp=sha ring
English