diff --git a/submissions/Harnytskyi/html-movie-seat-booking-js/css/style.css b/submissions/Harnytskyi/html-movie-seat-booking-js/css/style.css new file mode 100644 index 0000000..6e384b2 --- /dev/null +++ b/submissions/Harnytskyi/html-movie-seat-booking-js/css/style.css @@ -0,0 +1,257 @@ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif +} + +body { + margin: 0; + background: url(../img/background_cinema_hall.jpg) no-repeat center center fixed; + background-size: cover; +} + +main { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +.booking_block { + max-width: 800px; + width: 100%; +} + +.booking_wrapper { + background: rgba(250, 250, 250, 0.9); + display: grid; + margin: 0 auto; + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: minmax(57px, auto); +} + +.legend_block { + width: 30px; + height: 30px; + border-radius: 10%; + margin: 5px; + margin-top: 0; +} + +.legend_item { + flex-wrap: wrap; +} + +.hall_container { + grid-row-end: span 9; + grid-column-end: span 1; + padding: 10px; +} + +.hall { + margin-left: auto; + margin-right: auto; + max-width: 380px; + min-width: 252px; + display: grid; + grid-gap: 5px; + grid-template-columns: repeat(11, 1fr); +} + +.block_item { + text-align: center; + max-height: 30px; + border-radius: 10%; + aspect-ratio: 1/1; +} + +.cinema_row{ + grid-column: 1; +} + +.sold_place { + color: white; + background-color: #8F8D8E; +} + +.standart_place { + color: white; + background-color: #95c7f4; +} + +.comfort_place { + color: white; + background-color: #D00400; +} + +.check_input { + position: absolute; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.content { + width: 100%; + height: 100%; + cursor: pointer; + border-radius: 10%; +} + +.check_input:checked~.content { + background: green; +} +.check_input:focus~.content{ + box-shadow: 0 0 0 0.1em darkblue; +} + +.screen { + color: white; + grid-column-start: 2; + grid-column-end: span 10; + background-color: #D88A04; + aspect-ratio: auto; + text-transform: uppercase; + border-radius: 0; +} + +.booking_panel { + grid-column-end: span 1; + grid-row-end: span 7; + padding: 15px; +} + +.legend { + grid-column-end: span 1; + grid-row-end: span 2; + justify-content: center; + padding: 0 15px; +} + +.showtimes_property, .legend_item { + display: flex; + flex-direction: row; + align-items: center; + padding-right: 10px; + /* max-width: max-content; */ +} + +.showtimes_property_header { + width: 70px; + color: #D88A04; + margin-block-start: 0; + margin-block-end: 0; +} + +.showtimes_property_value{ + font-size: 1em; + margin-block-start: 0; + margin-block-end: 0; +} + +.r11p3{ + grid-column: 4; +} +.remove_ticket_button{ + padding: 0; + /* display: contents; */ + border-width: 0; + background: red; + height: 9px; + margin: 0; + vertical-align: middle; + position: relative; +} +.tickets{ + display: flex; + flex-wrap: wrap; + margin-top: 10px; + min-height: 24px; +} +.ticket{ + border-radius: 5px; + padding: 0px 7px; + margin-bottom: 5px; + margin-right: 5px; + border-width: 0; + font-size: 16px; +} +/* .remove_ticket_button:before{ + left: 50%; + width: 10%; + margin-left: -15%; + height: 75%; +} +.remove_ticket_button:after { + top: 50%; + height: 10%; + margin-top: -15%; + width: 75%; +} +.remove_ticket_button:before, .remove_ticket_button:after { + content: ""; + position: absolute; + z-index: -1; + background: #d00; +} */ +.button_block { + display: flex; + justify-content: center; +} + +.book_button { + color: white; + background-color: #D88A04; + border: 2px solid transparent; + margin-top: 10px; + height: 30px; +} + +.book_button:hover { + background-color: orange; +} + +.book_button:active { + border-color: black; +} + + +@media(max-width: 800px) { + .booking_block{ + max-width: 400px; + } + .booking_wrapper { + grid-template-columns: 1fr; + grid-auto-rows: auto; + grid-template-areas: "column-1" "column-2 " "column-3"; + } + .legend { + grid-row-end: auto; + display: flex; + grid-area: column-2; + padding: 0; + } + .legend_block{ + margin-left: 0; + } + .booking_panel { + grid-row-end: auto; + grid-area: column-3; + } + .cost{ + justify-self: center; + left: 0; + right: 0; + margin: auto; + width: max-content; + } + .hall_container { + grid-area: column-1; + grid-row-end: auto; + } + main { + position: relative; + bottom: unset; + } +} diff --git a/submissions/Harnytskyi/html-movie-seat-booking-js/index.html b/submissions/Harnytskyi/html-movie-seat-booking-js/index.html new file mode 100644 index 0000000..8718415 --- /dev/null +++ b/submissions/Harnytskyi/html-movie-seat-booking-js/index.html @@ -0,0 +1,635 @@ + + + + + + + Cinema Ticket Booking + + + + + +
+
+
+
+
+
Screen
+ +
1
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
2
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
3
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
4
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
5
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
6
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
7
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
8
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
9
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
10
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
11
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+

Movie:

+

Ferris Bueller's day off

+
+
+

Time:

+

+ +

+
+
+
Ticket:
+
0
+
+
+
Total:
+
+
+
+
+
+
+ +
+
+
+
+
+ Comfort - 100 ₴ +
+
+
+ Standart - 60 ₴ +
+
+
+ Sold +
+ +
+
+
+
+ + + + diff --git a/submissions/Harnytskyi/html-movie-seat-booking-js/js/script.js b/submissions/Harnytskyi/html-movie-seat-booking-js/js/script.js new file mode 100644 index 0000000..0f3fdc8 --- /dev/null +++ b/submissions/Harnytskyi/html-movie-seat-booking-js/js/script.js @@ -0,0 +1,67 @@ +const HALL = document.getElementById('hall'); +const TICKETS = document.getElementById('tickets'); +const TOTAL_COST_PROPERTY = document.getElementById('totalCostProperty'); +let selectedTickets = []; +let totalCost = 0; +let priceOfTicket = { + standart_place: 60, + comfort_place: 100 +} + +function showTicket(){ + TICKETS.innerHTML = selectedTickets.map(item =>{ + return `` + }).join(''); +} +function showTotalCost(){ + TOTAL_COST_PROPERTY.innerHTML = `${totalCost} ₴`; +} +function addTicket(value, typeOfSeat, row, place){ + selectedTickets.push({ + value: value, + typeOfSeat: typeOfSeat, + row: row, + place: place, + }); + totalCost += priceOfTicket[typeOfSeat]; +} +function removeTicket(ticketForDelete, typeOfSeat){ + selectedTickets = selectedTickets.filter(item => item.value !== ticketForDelete); + totalCost -= priceOfTicket[typeOfSeat]; +} +function parseSeatValue(seatValue){ + let seatInfo = seatValue.split(''); + let r = seatInfo.indexOf('r'); + let p = seatInfo.indexOf('p'); + let row = seatInfo.slice(r+1, p).join(''); + let place = seatInfo.slice(p+1, seatInfo.length).join(''); + return [row, place]; +} +function uncheckPlace(seatValue){ + let elementForUncheck = document.querySelector("input[value="+ seatValue + "]"); + elementForUncheck.checked = false; +} + +HALL.addEventListener('change', (event) => { + const target = event.target; + let typeOfSeat = target.closest('div').classList[1]; + let seat = parseSeatValue(target.value) + if(target.checked){ + addTicket(target.value, typeOfSeat, ...seat); + } + else{ + removeTicket(target.value, typeOfSeat); + } + showTicket(); + showTotalCost(); +}) +TICKETS.addEventListener('click', event =>{ + let target = event.target.closest('button'); + removeTicket(target.id, target.dataset.seat); + uncheckPlace(target.id); + showTicket(); + showTotalCost(); +}) + +showTotalCost(); \ No newline at end of file