Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7a405d6

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /