diff --git a/submissions/VBystrov/html-movie-seat-booking/css/style.css b/submissions/VBystrov/html-movie-seat-booking/css/style.css index 5405fc4..58041f7 100644 --- a/submissions/VBystrov/html-movie-seat-booking/css/style.css +++ b/submissions/VBystrov/html-movie-seat-booking/css/style.css @@ -15,6 +15,26 @@ body { min-height: 100vh; } +.tickets { + background-color: #e0e0d1; + margin: 20px; + box-shadow: 0 0 5px 5px grey; + border-radius: 25px; + align-self: flex-start; + min-height: 400px; + min-width: 250px; + overflow-y: auto; +} + +.ticket { + display: flex; + justify-content: space-around; + margin: 15px 25px; + padding: 5px; + background-color: #8585ad; + border-radius: 25px; +} + .cinema { width: 900px; background-color: #e0e0d1; diff --git a/submissions/VBystrov/html-movie-seat-booking/index.html b/submissions/VBystrov/html-movie-seat-booking/index.html index 35a9e21..672fdbe 100644 --- a/submissions/VBystrov/html-movie-seat-booking/index.html +++ b/submissions/VBystrov/html-movie-seat-booking/index.html @@ -7,6 +7,7 @@ +
@@ -24,7 +25,7 @@

Hypno Cinema

d="M 100 60 q 350 -60 700 0" > -
+
1
+
diff --git a/submissions/VBystrov/html-movie-seat-booking/js/index.js b/submissions/VBystrov/html-movie-seat-booking/js/index.js new file mode 100644 index 0000000..9aaf4af --- /dev/null +++ b/submissions/VBystrov/html-movie-seat-booking/js/index.js @@ -0,0 +1,25 @@ +document.addEventListener('DOMContentLoaded', () => { + const seats = document.getElementById('seats'); + const tickets = document.getElementById('tickets-list'); + + seats.addEventListener('click', ({ target }) => { + if (target.classList.contains('seat-checkbox')) { + const seatValue = target.getAttribute('value').split(/[rs]/g); + const rowNumber = seatValue[1]; + const seatNumber = seatValue[2]; + if (target.checked) { + tickets.insertAdjacentHTML( + 'beforeend', + `
+
Row: ${rowNumber}
+
Seat: ${seatNumber}
+
` + ); + } else { + tickets + .querySelector(`.ticket[place='r${rowNumber}s${seatNumber}']`) + .remove(); + } + } + }); +});