Skip to content

Commit 7a405d6

Browse files
apapadoiapapadoi
committed
Finished Movie Seat Booking app.
1 parent ec7317f commit 7a405d6

File tree

14 files changed

+530
-2
lines changed

14 files changed

+530
-2
lines changed

‎Movie-Seat-Booking/app.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
"use strict";
2+
3+
let selectedSeats = 0;
4+
5+
function regex(value) {
6+
return value.match('[(][$][0-9][0-9]*')[0].replace('$','').replace('(','');
7+
}
8+
9+
function selectSeat(event) {
10+
if(this.classList.contains('occupied'))
11+
return;
12+
13+
if(this.classList.contains('na'))
14+
selectedSeats++;
15+
16+
if(this.classList.contains('selected'))
17+
selectedSeats--;
18+
19+
this.classList.toggle('na');
20+
this.classList.toggle('selected');
21+
22+
const numOfSeatsSpan = document.querySelector('#numberOfSeats');
23+
const priceSpan = document.querySelector('#price');
24+
const moviesDropDown = document.querySelector('#movies');
25+
const value = moviesDropDown.options[moviesDropDown.selectedIndex].value;
26+
numOfSeatsSpan.textContent = selectedSeats;
27+
priceSpan.textContent = Number(regex(value)) * selectedSeats;
28+
}
29+
30+
function selectMovie(event) {
31+
const priceSpan = document.querySelector('#price');
32+
const value = this.options[this.selectedIndex].value;
33+
priceSpan.textContent = Number(regex(value)) * selectedSeats;
34+
}
35+
36+
function main() {
37+
const firstColumn = document.querySelector('.first-column');
38+
for(let i=0;i<12;i++)
39+
firstColumn.innerHTML += '<div class="seat na"></div>';
40+
41+
const secondColumn = document.querySelector('.second-column');
42+
for(let i=0;i<24;i++)
43+
secondColumn.innerHTML += '<div class="seat na"></div>';
44+
45+
const thirdColumn = document.querySelector('.third-column');
46+
for(let i=0;i<12;i++)
47+
thirdColumn.innerHTML += '<div class="seat na"></div>';
48+
49+
50+
const seats = document.querySelectorAll('.seat');
51+
seats.forEach((seat) => {
52+
if(Math.random() < 0.1875) {
53+
seat.classList.add('occupied');
54+
seat.classList.remove('na');
55+
}
56+
57+
58+
seat.addEventListener('click', selectSeat);
59+
});
60+
61+
document.querySelector('#movies').addEventListener('change', selectMovie);
62+
}
63+
64+
window.onload = main;

‎Movie-Seat-Booking/css/mixins.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* No CSS *//*# sourceMappingURL=mixins.css.map */

‎Movie-Seat-Booking/css/mixins.css.map‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Movie-Seat-Booking/css/reset.css‎

Lines changed: 22 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Movie-Seat-Booking/css/reset.css.map‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Movie-Seat-Booking/css/styles.css‎

Lines changed: 195 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Movie-Seat-Booking/css/styles.css.map‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Movie-Seat-Booking/css/variables.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* No CSS *//*# sourceMappingURL=variables.css.map */

‎Movie-Seat-Booking/css/variables.css.map‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Movie-Seat-Booking/index.html‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,37 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Document</title>
7+
<title>Movie Seat Booking App</title>
8+
<link rel="stylesheet" href="./css/styles.css">
9+
<script src="app.js"></script>
810
</head>
911
<body>
10-
12+
<div class="wrapper">
13+
<form>
14+
<label for="movies">Pick a movie:</label>
15+
<select name="movies" id="movies">
16+
<option value="Avengers: Endgame ($10)">Avengers: Endgame ($10)</option>
17+
<option value="Joker ($12)">Joker ($12)</option>
18+
<option value="Toy Story 4 ($8)">Toy Story 4 ($8)</option>
19+
<option value="The Lion King ($9)">The Lion King ($9)</option>
20+
</select>
21+
</form>
22+
23+
<ul>
24+
<li><div class="naImage"></div> N/A</li>
25+
<li><div class="selectedImage"></div> Selected</li>
26+
<li><div class="occupiedImage"></div> Occupied</li>
27+
</ul>
28+
29+
<div class="visual-screen"></div>
30+
31+
<div class="seats">
32+
<div class="first-column"></div>
33+
<div class="second-column"></div>
34+
<div class="third-column"></div>
35+
</div>
36+
37+
<h4>You have selected <span id="numberOfSeats">0</span> seats for a price of <span id="price">0</span>$</h4>
38+
</div>
1139
</body>
1240
</html>

0 commit comments

Comments
 (0)