Skip to content

Commit 900a500

Browse files
ImDPImDP
committed
Initial Commit
0 parents  commit 900a500

File tree

4 files changed

+293
-0
lines changed

4 files changed

+293
-0
lines changed

‎index.html

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Movie Seat Booking</title>
8+
</head>
9+
<body>
10+
<div class="movie-container">
11+
<label>Pick a movie:</label>
12+
<select id="movie">
13+
<option value="10">Avengers: Endgame ($10)</option>
14+
<option value="12">Joker ($12)</option>
15+
<option value="8">Toy Story 4 ($8)</option>
16+
<option value="9">The Lion King ($9)</option>
17+
</select>
18+
</div>
19+
20+
<ul class="showcase">
21+
<li>
22+
<div class="seat"></div>
23+
<small>N/A</small>
24+
</li>
25+
<li>
26+
<div class="seat selected"></div>
27+
<small>Selected</small>
28+
</li>
29+
<li>
30+
<div class="seat occupied"></div>
31+
<small>Occupied</small>
32+
</li>
33+
</ul>
34+
35+
<div class="container">
36+
<div class="screen"></div>
37+
38+
<div class="row">
39+
<div class="seat"></div>
40+
<div class="seat"></div>
41+
<div class="seat"></div>
42+
<div class="seat"></div>
43+
<div class="seat"></div>
44+
<div class="seat"></div>
45+
<div class="seat"></div>
46+
<div class="seat"></div>
47+
</div>
48+
<div class="row">
49+
<div class="seat"></div>
50+
<div class="seat"></div>
51+
<div class="seat occupied"></div>
52+
<div class="seat occupied"></div>
53+
<div class="seat"></div>
54+
<div class="seat"></div>
55+
<div class="seat"></div>
56+
<div class="seat"></div>
57+
</div>
58+
<div class="row">
59+
<div class="seat"></div>
60+
<div class="seat"></div>
61+
<div class="seat"></div>
62+
<div class="seat"></div>
63+
<div class="seat"></div>
64+
<div class="seat"></div>
65+
<div class="seat occupied"></div>
66+
<div class="seat occupied"></div>
67+
</div>
68+
<div class="row">
69+
<div class="seat"></div>
70+
<div class="seat"></div>
71+
<div class="seat"></div>
72+
<div class="seat"></div>
73+
<div class="seat"></div>
74+
<div class="seat"></div>
75+
<div class="seat"></div>
76+
<div class="seat"></div>
77+
</div>
78+
<div class="row">
79+
<div class="seat"></div>
80+
<div class="seat"></div>
81+
<div class="seat"></div>
82+
<div class="seat occupied"></div>
83+
<div class="seat occupied"></div>
84+
<div class="seat"></div>
85+
<div class="seat"></div>
86+
<div class="seat"></div>
87+
</div>
88+
<div class="row">
89+
<div class="seat"></div>
90+
<div class="seat"></div>
91+
<div class="seat"></div>
92+
<div class="seat"></div>
93+
<div class="seat occupied"></div>
94+
<div class="seat occupied"></div>
95+
<div class="seat occupied"></div>
96+
<div class="seat"></div>
97+
</div>
98+
</div>
99+
100+
<p class="text">
101+
You have selected <span id="count">0</span> seats for a price of $<span
102+
id="total"
103+
>0</span
104+
>
105+
</p>
106+
107+
<script src="script.js"></script>
108+
</body>
109+
</html>

‎readme.md

Whitespace-only changes.

‎script.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
const container = document.querySelector(".container");
2+
const seats = document.querySelectorAll(".row.seat:not(.occupied)");
3+
const count = document.getElementById("count");
4+
const total = document.getElementById("total");
5+
const movieSelect = document.getElementById("movie");
6+
7+
populateUI();
8+
9+
let ticketPrice = +movieSelect.value;
10+
11+
//Save movie index & price
12+
function setMovieData(movieIndex, moviePrice) {
13+
localStorage.setItem("selectedMovieIndex", movieIndex);
14+
localStorage.setItem("selectedMoviePrice", movieIndex);
15+
}
16+
17+
//update total and count
18+
function updateSelectedCount() {
19+
const selectedSeats = document.querySelectorAll('.row .seat.selected');
20+
21+
const seatIndex = [...selectedSeats].map((seat) => [...seats].indexOf(seat));
22+
23+
localStorage.setItem('selectedSeats', JSON.stringify(seatIndex));
24+
25+
const selectedSeatsCount = selectedSeats.length;
26+
count.innerText = selectedSeatsCount;
27+
total.innerText = selectedSeatsCount * ticketPrice;
28+
}
29+
30+
//Get data from local storage and pop UI
31+
function populateUI() {
32+
const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats'));
33+
34+
if (selectedSeats != null && selectedSeats.length > 0) {
35+
seats.forEach((seat, index) => {
36+
if (selectedSeats.indexOf(index) > -1) {
37+
seat.classList.add("selected");
38+
}
39+
});
40+
}
41+
42+
const selectedMovieIndex = localStorage.getItem('selectedMovieIndex');
43+
44+
if (selectedMovieIndex !== null) {
45+
movieSelect.selectIndex = selectedMovieIndex;
46+
}
47+
}
48+
49+
//Movie Select Event
50+
movieSelect.addEventListener('change', e => {
51+
ticketPrice = +e.target.value;
52+
setMovieData(e.target.selectIndex, e.target.value);
53+
updateSelectedCount();
54+
});
55+
56+
//Seat click event
57+
container.addEventListener('click', e => {
58+
if (
59+
e.target.classList.contains('seat') &&
60+
!e.target.classList.contains('occupied')
61+
) {
62+
e.target.classList.toggle('selected');
63+
64+
updateSelectedCount();
65+
}
66+
});
67+
68+
// Initial count && total
69+
updateSelectedCount();

‎style.css

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #242333;
9+
color: #fff;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
height: 80vh;
15+
font-family: "Lato", sans-serif;
16+
margin: 0;
17+
}
18+
19+
.movie-container {
20+
margin: 20px 0;
21+
}
22+
23+
.movie-container select {
24+
background-color: #fff;
25+
border: 0;
26+
border-radius: 5px;
27+
font-size: 14px;
28+
margin-left: 10px;
29+
padding: 5px 15px 5px 15px;
30+
-moz-appearance: none;
31+
-webkit-appearance: none;
32+
appearance: none;
33+
}
34+
35+
.container {
36+
perspective: 1000px;
37+
margin-bottom: 30px;
38+
}
39+
40+
.seat {
41+
background-color: #444451;
42+
height: 12px;
43+
width: 15px;
44+
margin: 3px;
45+
border-top-left-radius: 6px;
46+
border-top-right-radius: 6px;
47+
}
48+
49+
.seat.selected {
50+
background-color: #6feaf6;
51+
}
52+
53+
.seat.occupied {
54+
background-color: #fff;
55+
}
56+
57+
.seat:nth-of-type(2) {
58+
margin-right: 18px;
59+
}
60+
61+
.seat:nth-last-of-type(2) {
62+
margin-left: 18px;
63+
}
64+
65+
.seat:not(.occupied):hover {
66+
cursor: pointer;
67+
transform: scale(1.2);
68+
}
69+
70+
.showcase .seat:not(.occupied):hover {
71+
cursor: default;
72+
transform: scale(1);
73+
}
74+
75+
.showcase {
76+
background: rgba(0, 0, 0, 0.1);
77+
padding: 5px 10px;
78+
border-radius: 5px;
79+
color: #777;
80+
list-style-type: none;
81+
display: flex;
82+
justify-content: space-between;
83+
}
84+
85+
.showcase li {
86+
display: flex;
87+
align-items: center;
88+
justify-content: center;
89+
margin: 0 10px;
90+
}
91+
92+
.showcase li small {
93+
margin-left: 2px;
94+
}
95+
96+
.row {
97+
display: flex;
98+
}
99+
100+
.screen {
101+
background-color: #fff;
102+
height: 70px;
103+
width: 100%;
104+
margin: 15px 0;
105+
transform: rotateX(-45deg);
106+
box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
107+
}
108+
109+
p.text {
110+
margin: 5px 0;
111+
}
112+
113+
p.text span {
114+
color: #6feaf6;
115+
}

0 commit comments

Comments
 (0)