diff --git a/submissions/TaniaBondarenko/js-html-movie-seat-booking/app.js b/submissions/TaniaBondarenko/js-html-movie-seat-booking/app.js new file mode 100644 index 0000000..e584519 --- /dev/null +++ b/submissions/TaniaBondarenko/js-html-movie-seat-booking/app.js @@ -0,0 +1,96 @@ +const SEATS = document.querySelector(".seats"); +let bookingButton; +let shopContainer; +let ticketChosen; +let ticketClass; +let totalPrice = 0; +let count = 0; + +function createShopContainer() { + shopContainer = document.createElement("div"); + shopContainer.setAttribute("class", "shopContainer"); + SEATS.appendChild(shopContainer); +} + +SEATS.addEventListener("click", chooseTicket); + +function chooseTicket({ target }) { + ticketChosen = target; + if (!target.matches("input")) { + return; + } else if (!target.classList.contains("clicked")) { + createBookingButton(); + rowSeat = ticketChosen.value.split("-"); + target.classList.add("clicked"); + addTicket(); + } else { + defineTicketClass(); + target.classList.remove("clicked"); + document.getElementsByClassName(`${target.value}`)[0].remove(); + totalPrice -= price; + count -= 1; + } +} + +function addTicket() { + defineTicketClass(); + let bookTicket = document.createElement("div"); + bookTicket.setAttribute("class", `bookTicket ${ticketChosen.value}`); + shopContainer.appendChild(bookTicket); + bookTicket.innerHTML += ` + Row ${rowSeat[0]} + Seat ${rowSeat[1]} + ${ticketClass} + ${price} usd + `; + totalPrice += price; + count += 1; +} + +function defineTicketClass() { + let row = ticketChosen.parentElement.parentElement; + if (row.classList.contains("rowVip")) { + ticketClass = "VIP"; + price = 300; + } else { + ticketClass = "LUX"; + price = 100; + } +} + +let createBookingButton = (function () { + let executed = false; + return function () { + if (!executed) { + executed = true; + bookingButton = document.createElement("div"); + bookingButton.setAttribute("class", "submitButton"); + bookingButton.innerHTML = ``; + SEATS.appendChild(bookingButton); + createShopContainer(); + bookingButton.addEventListener("click", buyTicket, { once: true }); + } + }; +})(); + +function buyTicket() { + let paidDiv = document.createElement("div"); + paidDiv.innerHTML = `
Total price for ${count} tickets - ${totalPrice}usd`; + shopContainer.appendChild(paidDiv); + stopNextActions(); + createPaidButton(); +} + +function stopNextActions() { + let inputs = Array.from(document.querySelectorAll("input")); + inputs.forEach((element) => element.setAttribute("disabled", "disabled")); + bookingButton.remove(); +} + +function createPaidButton() { + let paidButton = document.createElement("div"); + paidButton.setAttribute("class", "paidButton"); + paidButton.innerHTML = ``; + shopContainer.appendChild(paidButton); + paidButton.scrollIntoView({ block: "end" }); +} diff --git a/submissions/TaniaBondarenko/js-html-movie-seat-booking/index.html b/submissions/TaniaBondarenko/js-html-movie-seat-booking/index.html new file mode 100644 index 0000000..c72a38b --- /dev/null +++ b/submissions/TaniaBondarenko/js-html-movie-seat-booking/index.html @@ -0,0 +1,173 @@ + + + + + + Movie-seat-booking + + + +
+
+
Poster to film
+
+
+
+
Lux
+ 100 + usd +
+ +
+
+
Vip
+ 300 + usd +
+
+
+
+
Occupied seat
+
+
Blocked seat
+
+
+ +
+
+

2001: A Space Odyssey

+

2h 29min

+

Adventure, Sci-Fi

+

IMDb 8.3

+ +
+
+ + + +
+
SCREEN
+ +
+
+ 1 + + + + + + + 1 +
+
+ 2 + + + + + + + 2 +
+
+ 3 + + + + + + + 3 +
+
+
+ 4 + + + + + + + 4 +
+
+
+ +
+ + + diff --git a/submissions/TaniaBondarenko/js-html-movie-seat-booking/styles.css b/submissions/TaniaBondarenko/js-html-movie-seat-booking/styles.css new file mode 100644 index 0000000..973f158 --- /dev/null +++ b/submissions/TaniaBondarenko/js-html-movie-seat-booking/styles.css @@ -0,0 +1,409 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + background-color: #9b9b9b; + font-family: Verdana, Geneva, Tahoma, sans-serif; +} + +.mainContainer { + display: flex; + width: 70%; + height: auto; + flex-direction: row; + justify-content: center; + margin: auto; + background-color: #e3d5c6; +} + +.screenImg { + fill: grey; +} + +.screenText { + text-align: center; + margin-bottom: 10px; +} + +.posterContainer, +.cinemaContainer { + position: relative; + margin-top: 16px; +} + +.posterImg, +.seat, +.hiddenCheckbox:checked + .seat, +.rowVip .hiddenCheckbox:checked + .seat, +.mainContainer, +.badgeSeat.lux, +.badgeSeat.vip, +.booking, +.lastButton { + box-shadow: 1px 2px 3px #020204; +} + +.posterImg { + width: 250px; + height: 360px; + position: relative; +} + +.badgeSeat.lux { + background-color: #e0730e; +} + +.badge, +.legend { + display: flex; +} + +.badgeSeat, +.ticketType { + position: relative; + padding-left: 10px; +} + +.occupiedSeat, +.blockedSeat { + position: relative; + height: 40px; + width: 30px; + box-shadow: 2px 3px 4px #020204; +} + +.description { + padding-left: 5px; +} + +.booking, +.lastButton { + font-size: 16px; + border-radius: 5%; +} + +.submitButton { + padding-left: 20px; + padding-top: 20px; + text-align: center; + margin-bottom: 0; +} + +.filmInfo { + position: relative; + width: 100%; + height: 200px; + margin-left: 20px; + line-height: 25px; + margin-bottom: -30px; +} + +.cinemaContainer { + width: 100%; + height: 100%; +} + +.seats { + height: 200px; + position: relative; + justify-content: center; + margin: auto; + display: flex; + flex-wrap: wrap; +} + +.seat { + border-top-right-radius: 30%; + border-top-left-radius: 30%; + background-color: #e0730e; +} + +.rowVip .seat, +.badgeSeat.vip { + background-color: #bf4f0f; +} + +.empty { + visibility: hidden; +} + +hr { + margin-bottom: 10px; +} + +.hiddenCheckbox:focus + .seat { + outline: none; + border-top-right-radius: 30%; + border-top-left-radius: 30%; +} + +.seat:hover, +.booking:hover, +.lastButton:hover, +.seat:active, +.hiddenCheckbox:focus + .seat { + box-shadow: 3px 5px 4px #020204; +} + +.hiddenCheckbox:hover + .seat, +.hiddenCheckbox:focus + .seat { + cursor: pointer; +} + +.seat .hiddenCheckbox.disabled { + pointer-events: none; +} + +.hiddenCheckbox { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + clip: rect(0 0 0 0); + overflow: hidden; +} + +.hiddenCheckbox.booked:checked + .seat.booked, +.booking, +.occupiedSeat, +.lastButton { + background-color: #b09a86; +} + +.hiddenCheckbox:checked + .seat, +.rowVip .hiddenCheckbox:checked + .seat { + background-color: #a32432; + box-shadow: 6px 6px 5px white; +} + +.hiddenCheckbox.disabled.notActive + .seat, +.blockedSeat { + background-color: #ef4222; + cursor: not-allowed; +} + +.hiddenCheckbox.booked + .seat.booked { + cursor: not-allowed; +} + +.booking:focus, +.lastButton:focus, +.booking:active, +.lastButton:active { + background-color: #eba963; +} + +.bookTicket { + position: relative; + border: none; + padding: 5px; + display: flex; + flex-direction: row; + width: 100%; + margin-bottom: 5px; +} + +.bookTicketRow, +.bookTicketSeat, +.BookTicketClass, +.price { + margin-right: 3px; +} + +.shopContainer { + position: relative; + width: 100%; + margin-top: 30px; + border: none; + height: 180px; + overflow-y: auto; +} + +.paidButton { + position: relative; + margin-top: 20px; + display: flex; + justify-content: center; +} + +.lastButton { + text-align: center; +} + +@media screen and (min-width: 300px) { + .mainContainer { + width: 90%; + height: 1200px; + flex-direction: column; + } + + .posterContainer { + padding-top: 20px; + padding-left: 10px; + } + + .posterImg { + width: 200px; + height: 280px; + } + + .poster { + display: flex; + position: relative; + justify-content: center; + } + + .badge { + flex-direction: row; + } + + .badge, + .legend { + padding: 10px 0 10px 0; + justify-content: flex-start; + } + + .description, + .ticketType { + padding-right: 30px; + } + + .badgeSeat.lux, + .badgeSeat.vip, + .occupiedSeat, + .blockedSeat { + width: 20px; + height: 30px; + flex-shrink: 0; + } + + .filmTitle { + font-size: 18px; + } + + .filmInfo { + font-size: 14px; + margin-top: -10px; + } + + .seats { + width: 280px; + } + + .seat { + width: 30px; + height: 30px; + position: relative; + border: 1px solid black; + display: inline-block; + } + + .booking { + width: 150px; + height: 30px; + margin-bottom: 50px; + } + + .lastButton { + width: 150px; + height: 30px; + margin-bottom: 10px; + } +} + +@media screen and (min-width: 600px) { + .mainContainer { + flex-direction: row; + height: 900px; + } + + .posterContainer { + flex-direction: row; + margin-top: 35px; + } + + .badge, + .legend { + justify-content: space-between; + } + + .filmInfo { + width: 80%; + margin-top: 35px; + } + + .seats { + width: 250px; + } +} + +@media screen and (min-width: 800px) { + .mainContainer { + flex-direction: row; + width: 70%; + } + + .booking, + .lastButton { + width: 180px; + height: 40px; + margin-bottom: 30px; + } + + .lastButton { + margin-bottom: 10px; + } + + .posterImg { + width: 250px; + height: 360px; + } + + .badgeSeat.lux, + .badgeSeat.vip, + .occupiedSeat, + .blockedSeat { + width: 30px; + height: 40px; + } + + .filmTitle { + font-size: 19px; + } +} + +@media screen and (min-width: 1100px) { + .booking { + width: 200px; + height: 50px; + margin-bottom: 10px; + } + + .lastButton { + width: 200px; + height: 30px; + margin-bottom: 10px; + } + + .seat { + width: 45px; + height: 40px; + margin-right: 5px; + margin-bottom: 10px; + position: relative; + border: 1px solid black; + display: inline-block; + } + + .seats { + width: 450px; + } + + .filmTitle { + font-size: 20px; + } +}