diff --git a/submissions/xT0PERx/html-movie-seat-booking/index.html b/submissions/xT0PERx/html-movie-seat-booking/index.html index 4fc0730..4024459 100644 --- a/submissions/xT0PERx/html-movie-seat-booking/index.html +++ b/submissions/xT0PERx/html-movie-seat-booking/index.html @@ -1,341 +1,73 @@ - - - - - - - Movie Seat Booking - - -
-
- -
-
-
-
-

-  Parallel to our world, there is another: a world ruled by - extremely dangerous and endowed with incredible strength monsters, - furiously protecting their possessions from strangers. -

-

-  It is here that Lieutenant Artemis and her squad of elite - fighters enter through the spatial portal. And now they have to - test their strength in the face of an unprecedented threat. -

-
-
- -
-
- ◄ -
    -
  1. - - Today
    1 -     -
    2. -
  2. - - Tue
    2 -     -
    3. -
  3. - - Wed
    3 -     -
    4. -
  4. - - Thu
    4 -     -
    5. -
  5. - - Fri
    5 -     -
    6. -
- ► -
-
-

Time

-
    -
  1. 14:00
    2. -
  2. 17:30
    3. -
  3. 21:00
    4. -
  4. 23:30
    5. -
-
-
- - - -

screen

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

Available

-

Taken

-

Your selection

-
-
-
-
- - + + + + + + + Movie Seat Booking + + +
+
+ +
+
+
+
+
+

+  Parallel to our world, there is another: a world ruled by + extremely dangerous and endowed with incredible strength monsters, + furiously protecting their possessions from strangers. +

+

+  It is here that Lieutenant Artemis and her squad of elite + fighters enter through the spatial portal. And now they have to test + their strength in the face of an unprecedented threat. +

+
+
+
+
+ +
+ +
+
+

sessions time

+
+
+
+ + + +

screen

+
+
+
+

Available

+

Taken

+

Your selection

+
+
+
+ + + diff --git a/submissions/xT0PERx/html-movie-seat-booking/main.css b/submissions/xT0PERx/html-movie-seat-booking/main.css index 1a32a49..749a6fa 100644 --- a/submissions/xT0PERx/html-movie-seat-booking/main.css +++ b/submissions/xT0PERx/html-movie-seat-booking/main.css @@ -1,341 +1,621 @@ -.container { - max-width: 1500px; - background: rgb(201, 201, 214); - margin: 0 auto; -} - -.top { - width: 100%; - background: linear-gradient( - 90deg, - rgba(119, 109, 106, 1) 1%, - rgba(201, 201, 214, 1) 100% - ); - border-radius: 10px; -} - -.navigation { - margin-left: 0.5em; - margin-right: 0.5em; -} - -.navigation_items { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 20px; - list-style-type: none; - margin-block-start: 0em; - margin-block-end: 0em; - padding-inline-start: 0em; -} - -.navigation_item { - display: grid; - width: 100%; - padding-top: 25px; - padding-bottom: 25px; - align-self: center; - justify-self: center; - border: 10px solid; - border-color: transparent; - opacity: 0.6; -} - -.navigation_item:hover { - border: 10px solid; - border-left-style: none; - border-right-style: none; - border-color: rgb(0, 0, 0); - border-radius: 10px; - cursor: pointer; - opacity: 1; -} - -.navigation_item:active { - opacity: 1; - font-weight: 700; -} - -.navigation_item a { - font-size: 26px; - color: rgb(0, 0, 0); - text-decoration: none; - text-align: center; -} - -.navigation_item-choisen { - font-weight: 700; - border: 10px solid; - border-radius: 10px; - border-left-style: none; - border-right-style: none; - border-color: rgb(0, 0, 0); - opacity: 1; -} - -.content { - display: grid; - width: 100%; - max-height: 100%; - grid-template-columns: repeat(2, minmax(400px, 750px)); - gap: 1em; - margin-top: 10px; - border-radius: 10px; -} - -.placement { - background-image: url(./Images/background.jpg); - width: 100%; - height: 925px; - background-repeat: no-repeat; -} - -.screen { - width: 80%; - padding: 15px; - margin: 0 auto; - text-align: center; - background-color: rgba(255, 255, 255, 0.6); - opacity: 0.8; -} - -.screen p { - font-size: 24px; - font-weight: 700; - text-transform: uppercase; -} - -.calendar_wrap { - display: grid; - grid-template-columns: 1fr 5fr 1fr; - align-items: center; - margin: 10px; - background-color: rgba(0, 0, 0, 0.6); - list-style-type: none; -} - -.calendar { - display: grid; - grid-template-columns: repeat(5, 1fr); - list-style-type: none; - padding-inline-start: 0px; -} - -.calendar_item { - text-align: center; - font-size: 24px; - text-decoration: none; -} - -.calendar_item_link { - text-decoration: none; - color: aliceblue; -} - -.calendar_item_link:hover { - transition: text-decoration 0.5s; - font-weight: bolder; -} - -.calendar_item_link:active { - font-weight: bolder; - color: darkturquoise; -} - -.calendar_item_link-choisen { - font-weight: bolder; - color: darkturquoise; -} - -.btn_prevDay { - text-align: center; - text-decoration: none; - color: aliceblue; -} - -.btn_prevDay:active { - color: darkturquoise; -} - -.btn_prevDay:hover { - border: 1px solid; -} - -.btn_nextDay { - text-align: center; - text-decoration: none; - color: aliceblue; -} - -.btn_nextDay:active { - color: darkturquoise; -} - -.btn_nextDay:hover { - border: 1px solid; -} - -.time_wrap { - margin: 60px 10px; - background-color: rgba(0, 0, 0, 0.6); -} - -.time_wrap_title { - font-size: 24px; - font-weight: bolder; - padding-left: 2em; - color: aliceblue; - letter-spacing: 4px; - padding-top: 10px; -} - -.time_wrap_inner { - display: grid; - grid-template-columns: repeat(4, 1fr); - list-style-type: none; - padding-inline-start: 0px; - padding-bottom: 10px; -} - -.time_item { - text-align: center; -} - -.time_item a { - font-size: 24px; - text-decoration: none; - color: aliceblue; -} - -.time_item a:hover { - border: 1px solid; - border-color: darkturquoise; -} - -.time_item a:active { - color: darkturquoise; -} - -.hall_status { - display: grid; - grid-template-columns: repeat(3, 1fr); - align-items: center; - order: 5; -} - -.seats_item { - position: relative; - font-size: 22px; - background-color: rgb(0, 0, 0); - color: white; - margin-block-start: 0em; - margin-block-end: 0em; - padding: 40px; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.seats_item::before { - content: " "; - position: absolute; - width: 30px; - height: 30px; - left: 10px; -} - -.seats_available::before { - background: grey; -} - -.seats_taken::before { - background: rgb(240, 57, 57); -} - -.seats_selected::before { - background: blue; -} - -.seats { - display: grid; - grid-template-columns: repeat(10, 1fr); - gap: 10px; - width: 400px; - margin: 60px; - margin-left: auto; - margin-right: auto; - padding: 10px; - border: rgb(216, 208, 208) solid; - background-color: rgba(255, 255, 255, 0.6); -} - -.seat { - align-self: center; - height: 30px; - width: 30px; - cursor: pointer; - margin: auto; -} - -.seat_input { - position: absolute; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - margin: 0; - width: 30px; - height: 30px; -} - -.seat_number { - display: block; - width: 100%; - height: 100%; - text-align: center; - line-height: 30px; - margin: 0 auto; - background: rgb(95, 90, 90); - color: rgb(255, 255, 255); - transition: all ease-in-out 0.3s; -} - -.seat_input:checked + .seat_number { - background: blue; - font-weight: bold; -} - -.seat_input:disabled + .seat_number { - background: rgb(240, 57, 57); - color: rgb(33, 0, 118); - font-weight: bold; -} - -.summary { - background-image: url(./Images/back-2.jpg); - background-repeat: no-repeat; - width: 100%; - font-size: 20px; - letter-spacing: 1.5px; -} - -.summary_inner { - background: rgba(0, 0, 0, 0.6); - color: aliceblue; - padding: 10px; - margin: 60px 20px 0px; -} - -@media only screen and (min-width: 420px) and (max-width: 920px) { - .container { - max-width: 750px; - } - - .content { - grid-template-columns: repeat(1, 1fr); - } - - .summary { - display: none; - } -} +html { + max-width: 1515px; + margin: auto; +} +.container { + background: #c9c9d6; +} +.header { + width: 100%; + background: -webkit-gradient( + linear, + left top, + right top, + color-stop(1%, #776d6a), + to(#c9c9d6) + ); + background: linear-gradient(90deg, #776d6a 1%, #c9c9d6 100%); + border-radius: 10px; +} +.navigation { + margin-left: 0.5em; + margin-right: 0.5em; +} +.navigation_items { + display: -ms-grid; + display: grid; + -ms-grid-columns: (1fr) [4]; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + list-style-type: none; + -webkit-margin-before: 0; + margin-block-start: 0; + -webkit-margin-after: 0; + margin-block-end: 0; + -webkit-padding-start: 0; + padding-inline-start: 0; +} +.navigation_item { + width: 100%; + display: -ms-grid; + display: grid; + padding-top: 25px; + padding-bottom: 25px; + -ms-grid-row-align: center; + align-self: center; + -ms-grid-column-align: center; + justify-self: center; + border: 10px solid; + border-color: transparent; + opacity: 0.6; +} +.navigation_item:hover { + border: 10px solid; + border-left-style: none; + border-right-style: none; + border-radius: 10px; + cursor: pointer; + opacity: 1; +} +.navigation_item:active { + opacity: 1; + font-weight: 700; +} +.navigation_item a { + font-size: 26px; + color: #000; + text-decoration: none; + text-align: center; +} +.navigation_item_selected { + font-weight: 700; + border: 10px solid; + border-radius: 10px; + border-left-style: none; + border-right-style: none; + opacity: 1; +} +.navigation .popup { + display: none; +} +.content { + width: 100%; + max-height: 100%; + display: -ms-grid; + display: grid; + -ms-grid-columns: (minmax(400px, 750px)) [2]; + grid-template-columns: repeat(2, minmax(400px, 750px)); + gap: 1em; + padding-top: 10px; + border-radius: 10px; +} +.summary { + width: 100%; + background-image: url(./Images/back-2.jpg); + background-repeat: no-repeat; + font-size: 20px; + letter-spacing: 1.5px; +} +.summary_inner { + padding: 10px; + margin: 60px 20px 0; + background: rgba(0, 0, 0, 0.6); + color: #f0f8ff; +} +.placement { + width: 100%; + height: 925px; + background-image: url(./Images/background.jpg); + background-repeat: no-repeat; +} +.calendar_wrap { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 5fr 1fr; + grid-template-columns: 1fr 5fr 1fr; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 10px; + background-color: rgba(0, 0, 0, 0.6); +} +.calendar { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + list-style-type: none; + -webkit-padding-start: 0; + padding-inline-start: 0; + overflow: hidden; +} +.calendar_item { + padding: 15px; + text-align: center; + font-size: 24px; + color: #f0f8ff; + cursor: pointer; +} +.calendar_item_input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; +} +.calendar_item_input:hover + span { + color: #00ced1; + -webkit-transition: 1s; + transition: 1s; +} +.calendar_item_input:active + span { + color: #067e80; +} +.calendar_item_input:checked + span { + color: #ebba1b; + -webkit-transition: 1s; + transition: 1s; +} +.calendar_item_input span { + margin: 2px; + letter-spacing: 1px; +} +.calendar_btn { + margin: 5px; + text-align: center; + text-decoration: none; + background-color: rgba(0, 0, 0, 0.6); + color: #f0f8ff; + opacity: 0.8; +} +.calendar_btn:hover { + border: 1px solid; + color: #00ced1; +} +.calendar_btn:active { + color: #067e80; +} +.time_wrap { + margin: 60px 10px; + background-color: rgba(0, 0, 0, 0.6); +} +.time_wrap_title { + padding-top: 10px; + padding-left: 2em; + font-size: 24px; + text-transform: capitalize; + font-weight: bolder; + color: #f0f8ff; + letter-spacing: 4px; +} +.time_wrap_lists { + display: -ms-grid; + display: grid; + -ms-grid-columns: (1fr) [4]; + grid-template-columns: repeat(4, 1fr); + -webkit-padding-start: 0; + padding-inline-start: 0; + padding-bottom: 10px; +} +.time_wrap_lists_item { + padding: 15px; + text-align: center; + font-size: 24px; + color: #f0f8ff; + cursor: pointer; +} +.time_wrap_lists_item input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; +} +.time_wrap_lists_item input:hover + span { + color: #00ced1; + -webkit-transition: 1s; + transition: 1s; +} +.time_wrap_lists_item input:active + span { + color: #067e80; +} +.time_wrap_lists_item input:checked + span { + color: #ebba1b; + -webkit-transition: 1s; + transition: 1s; +} +.time_wrap_lists_item input span { + margin: 2px; + letter-spacing: 1px; +} +.screen { + width: 80%; + padding: 15px; + margin: 0 auto; + text-align: center; + background-color: rgba(255, 255, 255, 0.6); + opacity: 0.8; +} +.screen p { + font-size: 24px; + font-weight: 700; + text-transform: uppercase; +} +.hall { + width: 400px; + margin: 60px; + margin-left: auto; + margin-right: auto; + display: -ms-grid; + display: grid; + -ms-grid-columns: (1fr) [10]; + grid-template-columns: repeat(10, 1fr); + gap: 10px; + padding: 10px; + border: #d8d0d0 solid; + background-color: rgba(255, 255, 255, 0.6); +} +.hall_seat { + height: 30px; + width: 30px; + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; +} +.hall_seat_input { + width: 30px; + height: 30px; + margin: 0; + position: absolute; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; +} +.hall_seat_input:checked + .hall_seat_number { + background: #ebba1b; + font-weight: 700; +} +.hall_seat_input:disabled + .hall_seat_number { + background: #f03939; + color: #210076; + font-weight: 700; +} +.hall_seat_number { + width: 100%; + height: 100%; + display: block; + margin: 0 auto; + text-align: center; + line-height: 30px; + background: #5f5a5a; + color: #fff; + -webkit-transition: all ease-in-out 0.3s; + transition: all ease-in-out 0.3s; +} +.seats_status { + display: -ms-grid; + display: grid; + -ms-grid-columns: (1fr) [3]; + grid-template-columns: repeat(3, 1fr); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-ordinal-group: 6; + -ms-flex-order: 5; + order: 5; +} +.seats_status_item { + padding: 30px; + -webkit-margin-before: 0; + margin-block-start: 0; + -webkit-margin-after: 0; + margin-block-end: 0; + text-align: center; + position: relative; + font-size: 22px; + background-color: #000; + color: #f0f8ff; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.seats_status_item::before { + width: 30px; + height: 30px; + left: 10px; + position: absolute; + content: " "; +} +.seats_available::before { + background: grey; +} +.seats_taken::before { + background: #f03939; +} +.seats_selected::before { + background: #ebba1b; +} +.seats_choice { + height: 500px; + margin: 20px; + display: -ms-grid; + display: grid; + -ms-grid-rows: ([row] 1fr) [6]; + grid-template-rows: repeat(6, [row] 1fr); + place-items: center; + background-color: rgba(255, 255, 255, 0.6); +} +.seats_choice_list { + height: 100%; + width: 100%; + display: -ms-grid; + display: grid; + grid-row: row 1 / row 6; + place-items: center; + -webkit-padding-start: 0; + padding-inline-start: 0; + overflow-x: auto; + list-style-type: none; +} +.seats_choice_list_label { + padding: 15px; + margin: 5px; + display: none; + justify-self: flex-end; + text-decoration: none; + color: #fdfdfd; + border: 3px solid rgba(92, 0, 0, 0.4); + background-color: #99281b; + font-weight: 500; + font-family: Montserrat, sans-serif; + text-transform: uppercase; + letter-spacing: 2px; + cursor: pointer; +} +.seats_choice_list_input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; +} +.seats_choice_list_input:hover + label { + background-color: red; + -webkit-transition: 1s; + transition: 1s; +} +.seats_choice_list_input:focus + label { + background-color: #f03939; + border: 3px solid #000; +} +.seats_choice_list_input:checked + label { + background-color: #f03939; + border: 3px solid #000; +} +.seats_choice_list_ticket { + height: 150px; + width: 300px; + text-align: center; + color: #f0f8ff; + background-color: indigo; + margin: 10px; +} +.basket { + height: 200px; + display: -ms-grid; + display: grid; + place-items: center; + background-color: #7e2828; + font-size: 22px; +} +.basket span { + color: #fff; + font-size: 30px; + font-weight: 700; +} +.basket h4 { + -webkit-margin-before: 0; + margin-block-start: 0; + -webkit-margin-after: 0; + margin-block-end: 0; +} +.basket_btn { + padding: 10px; + color: #fdfdfd; + border: 3px solid rgba(92, 0, 0, 0.4); +} +.basket input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; +} +.basket input:hover + label { + background-color: red; + -webkit-transition: 1s; + transition: 1s; +} +.basket input:focus + label { + border: 3px solid #000; +} +.basket input:checked + label { + background-color: #f03939; + border: 3px solid #000; +} +.message_wrapper { + width: 100%; + height: 100vh; + display: -ms-grid; + display: grid; + place-items: center; + position: absolute; + z-index: 1; + background-color: #7fffd4; +} +.message_wrapper span { + font-size: 50px; +} +.message_wrapper a { + font-size: 40px; +} +@media only screen and (min-width: 510px) and (max-width: 920px) { + .container { + max-width: 750px; + margin: 0 auto; + } + .content { + max-width: 750px; + margin: 0 auto; + -ms-grid-columns: (1fr) [1]; + grid-template-columns: repeat(1, 1fr); + gap: 0; + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; + } + .summary { + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + font-size: medium; + } + .summary_inner { + display: none; + } + .seats_choice { + height: 350px; + } + .seats_choice_list { + -ms-grid-columns: (1fr) [2]; + grid-template-columns: repeat(2, 1fr); + } + .seats_choice_list_ticket { + width: 200px; + height: 100px; + } +} +@media only screen and (min-width: 200px) and (max-width: 509px) { + body { + margin: 0; + } + .container { + width: 40px; + height: 40px; + position: absolute; + top: 20px; + left: 12px; + background-color: inherit; + } + .content { + -ms-grid-columns: (1fr) [1]; + grid-template-columns: repeat(1, 1fr); + gap: 0; + } + .placement { + height: 100%; + } + .navigation { + width: 40px; + height: 40px; + margin: 0; + position: absolute; + } + .navigation_items { + height: 500px; + width: 200px; + position: relative; + top: 70px; + display: none; + -ms-grid-rows: (1fr) [4]; + grid-template-rows: repeat(4, 1fr); + -ms-grid-columns: 0; + grid-template-columns: 0; + background: -webkit-gradient( + linear, + left top, + right top, + color-stop(1%, #776d6a), + to(#c9c9d6) + ); + background: linear-gradient(90deg, #776d6a 1%, #c9c9d6 100%); + z-index: 1; + } + .navigation_item { + width: 200px; + position: relative; + left: 100px; + } + .navigation .popup { + display: block; + width: 40px; + position: absolute; + top: -20px; + } + .navigation .popup input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + } + .navigation .popup input:checked + img { + border: solid 3px #ebba1b; + } + .navigation .popup img { + width: 40px; + height: 40px; + border: solid 3px #f0f8ff; + border-radius: 5px; + } + .time_wrap { + margin: 10px; + } + .time_wrap_lists_item { + font-size: 18px; + } + .hall { + width: calc(100% - 2%); + padding: 0; + margin: 10px 0; + gap: 2px; + } + .hall_seat { + width: 25px; + height: 25px; + } + .hall_seat_number { + width: 25px; + height: 25px; + line-height: 25px; + } + .hall_seat_input { + width: 25px; + height: 25px; + } + .seats_status_item { + padding: 20px; + font-size: 16px; + } + .seats_status_item::before { + width: 20px; + height: 20px; + left: 0; + } + .summary { + height: 100%; + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; + font-size: medium; + } + .summary_inner { + display: none; + } + .seats_choice { + height: 350px; + } + .seats_choice_list { + -ms-grid-columns: 1; + grid-template-columns: 1; + } + .seats_choice_list_ticket { + width: 200px; + height: 100px; + } +} diff --git a/submissions/xT0PERx/html-movie-seat-booking/main.js b/submissions/xT0PERx/html-movie-seat-booking/main.js new file mode 100644 index 0000000..82c1eac --- /dev/null +++ b/submissions/xT0PERx/html-movie-seat-booking/main.js @@ -0,0 +1,263 @@ +const currentDate = new Date(), + calendar = document.querySelector(".calendar"), + btnWrap = document.querySelector(".calendar_wrap"), + daysOfWeek = { + 0: "Sunday", + 1: "Monday", + 2: "Tuesday", + 3: "Wednesday", + 4: "Thursday", + 5: "Friday", + 6: "Saturday", + }; +function getDay(e) { + return daysOfWeek[e.getDay()]; +} +function getDate(e) { + return e.getDate(); +} +function getMonth(e) { + return e.getMonth() + 1; +} +function createDate(e, t) { + const n = new Date(e.getFullYear(), e.getMonth(), e.getDate(), e.getDay()), + a = n.getDate() + t; + return n.setDate(a), n; +} +function getCountDaysInMonth(e) { + const t = new Date(e.getFullYear(), e.getMonth(), 1), + n = new Date(e.getFullYear(), e.getMonth() + 1, 1); + return Math.round((n - t) / 1e3 / 3600 / 24); +} +function createMonth(e) { + const t = document.createDocumentFragment(); + for (let n = 0; n < getCountDaysInMonth(e); n++) { + const a = getDay(createDate(e, n)), + r = getDate(createDate(e, n)), + c = getMonth(createDate(e, n)), + o = document.createElement("label"); + o.classList.add("calendar_item"), + (o.innerHTML = `\n ${a}\n
${r}\n `), + t.append(o); + } + return t; +} +function appendElements(e, t) { + e.append(t); +} +appendElements(calendar, createMonth(currentDate)), + btnWrap.addEventListener("click", function ({ target: e }) { + const { nodeName: t, id: n } = e; + "BUTTON" === t && scrollDirection[n](calendar); + }); +const scrollDirection = { + right: (e) => (e.scrollLeft += 80), + left: (e) => (e.scrollLeft -= 80), +}; +const sessionsTime = ["14:00", "17:30", "21:00", "23:20"], + filmName = "Monster Hunter", + priceOfTicket = 8, + reservedSeats = [1, 10, 12, 13, 45], + seatsCount = 50; +const choiceSeatsWrapper = document.getElementById("tickets_wrapper"), + seatsInCinema = document.querySelector("#cinemaHall"), + sessionsWrap = document.querySelector("#sessionsWrap"), + bodyElement = document.querySelector("body"); +let ticketListWrapper = null, + chosenTicketsList = null, + buyButton = null; +function isElementSelected(e) { + return Array.prototype.some.call(e.children, (e) => e.firstChild.checked); +} +function init() { + addDomElement(choiceSeatsWrapper, createWrapperForChosenTickets()); +} +function createWrapperForChosenTickets() { + return '
\n \n \n
'; +} +function addDomElement(e, t) { + e.insertAdjacentHTML("beforeEnd", t); +} +function getSelectedDateInfo(e) { + const t = Array.prototype.find.call(e.children, (e) => e.firstChild.checked); + if (!t) return ""; + const n = t.firstChild; + return `${n.id}/${n.dataset.month}`; +} +function getSelectedTimeInfo(e) { + const t = Array.prototype.find.call(e.children, (e) => e.firstChild.checked); + return t ? t.firstChild.id : ""; +} +function createTicket(e) { + return `
  • \n

    ${filmName}

    \n ${e}
    \n date ${getSelectedDateInfo( + calendar + )} time ${getSelectedTimeInfo(sessionsWrap)} \n
    • `; +} +function addTicket(e, t) { + e.insertAdjacentHTML("beforeEnd", createTicket(t)); +} +function getChosenSeat(e, t) { + const n = e.children; + let s = null; + return ( + Array.prototype.some.call(n, function (e) { + e.dataset.ticket === t.value && (s = e); + }), + s + ); +} +function deleteTicket(e, t) { + e.removeChild(t); +} +sessionsWrap.addEventListener("change", function ({ target: e }) { + const t = isElementSelected; + null === ticketListWrapper && + (t(calendar) || noSelect.calendar(e), + t(calendar) && + t(sessionsWrap) && + (init(), + (ticketListWrapper = document.querySelector("#seatsChoice")), + (chosenTicketsList = document.querySelector("#selectionsBuying")), + (buyButton = document.querySelector(".seats_choice_list_label")))); +}); +const ticketMovement = { + true: (e, t) => addTicket(e, t.value), + false: (e, t) => deleteTicket(e, getChosenSeat(e, t)), +}; +function showElement(e) { + e.style.display = "block"; +} +function hideElement(e) { + e.style.display = "none"; +} +const noSelect = { + calendar: (e) => { + alert("Please select date"), (e.checked = !1); + }, + sessionsWrap: (e) => { + alert("Please select time"), (e.checked = !1); + }, +}; +function initLastConformingMassage() { + ticketListWrapper.addEventListener("change", function () { + hideElement(ticketListWrapper), addLastConformingBuyMessage(seatsInCinema); + }); +} +function freesUpSpaceForLastConformingBuyMassage(e) { + (e.innerHTML = null), (e.style.display = "block"); +} +function createLastConformingBuyMessage(e, t) { + return `
    \n \n You buy ${e} ticket for ${t} $\n \n

    Do you wont to continue?

    \n \n \n \n \n
    `; +} +function addLastConformingBuyMessage(e) { + const t = getNumberOfSelectedTickets(chosenTicketsList), + n = createLastConformingBuyMessage(t, getCostOfTickets(t, priceOfTicket)); + freesUpSpaceForLastConformingBuyMassage(e), + e.insertAdjacentHTML("beforeEnd", n); +} +function getNumberOfSelectedTickets(e) { + return e.children.length; +} +function getCostOfTickets(e, t) { + return e * t; +} +function viewMassage(e, t) { + e.insertAdjacentHTML("afterBegin", t); +} +function createConfirmingMassage() { + return '
    \n Thank for buying,wait confirming message\n Go to ticket selection\n
    '; +} +function createAbortMessage() { + return '
    \n Thank for visiting our site, please come back next time \n Go to ticket selection\n
    '; +} +seatsInCinema.addEventListener("change", function ({ target: e }) { + const { name: t, id: n, checked: s } = e, + i = isElementSelected, + a = ticketMovement[s], + c = i(calendar) && i(sessionsWrap); + if ( + (i(calendar) + ? i(sessionsWrap) || noSelect.sessionsWrap(e) + : noSelect.calendar(e), + c) + ) { + a(chosenTicketsList, e); + const s = getNumberOfSelectedTickets(chosenTicketsList); + s ? showElement(buyButton) : s || hideElement(buyButton), + "buyButton" === t && answerAfterSelection[n](bodyElement), + initLastConformingMassage(); + } +}); +const answerAfterSelection = { + yes: (e) => viewMassage(e, createConfirmingMassage()), + no: (e) => viewMassage(e, createAbortMessage()), +}; +const popup = document.querySelector(".popup"); +popup.addEventListener("click", function ({ target: e }) { + const t = document.querySelector(".navigation_items"); + e.checked + ? (t.style.display = "grid") + : e.checked || (t.style.display = "none"); +}); +const conditionOfPlaces = {}; +function compareConditionOfPlaces() { + fillConditionOfPlaces(seatsCount, conditionOfPlaces), + getReservedSeats(conditionOfPlaces, reservedSeats); +} +function fillConditionOfPlaces(e, t) { + for (let n = 1; n < e + 1; n++) t[n] = n; + return t; +} +function getReservedSeats(e, t) { + Object.keys(e).forEach((n) => { + t.forEach((t) => { + n === t.toString() && (e[n] = "disabled"); + }); + }); +} +function getRow(e) { + let t = null; + return ( + e <= 10 + ? (t = 1) + : e <= 20 + ? (t = 2) + : e <= 30 + ? (t = 3) + : e <= 40 + ? (t = 4) + : e <= 50 && (t = 5), + t + ); +} +function createSeats(e, t) { + const n = document.createDocumentFragment(); + for (let a = 1; a < e + 1; a++) { + let e = ""; + "disabled" === t[a] && (e = t[a]); + const s = document.createElement("label"); + s.classList.add("hall_seat"), + (s.innerHTML = `\n ${a}`), + n.append(s); + } + return n; +} +compareConditionOfPlaces(), + appendElements(seatsInCinema, createSeats(seatsCount, conditionOfPlaces)); +function createSessionsTime(e) { + const n = document.createDocumentFragment(); + return ( + e.forEach((e) => { + const s = document.createElement("label"); + (s.classList = "time_wrap_lists_item"), + (s.innerHTML = `\n ${[e]} `), + n.appendChild(s); + }), + n + ); +} +appendElements(sessionsWrap, createSessionsTime(sessionsTime));