diff --git a/submissions/evgeniy24/html-movie-seat-booking/index.html b/submissions/evgeniy24/html-movie-seat-booking/index.html index 1e91d1e..0672ce8 100644 --- a/submissions/evgeniy24/html-movie-seat-booking/index.html +++ b/submissions/evgeniy24/html-movie-seat-booking/index.html @@ -67,23 +67,96 @@

Dune (2021)

+

Choose Date and Time

    -
  1. 1 MON
    2. -
  2. 2 TUE
    3. -
  3. 3 WED
    4. -
  4. 4 THU
    5. -
  5. 5 FRI
    6. -
  6. 6 SAT
    7. -
  7. 5 SUN
    8. +
  8. + +
    9. +
  9. + +
    10. +
  10. + +
    11. +
  11. + +
    -
  1. 11:00
    2. -
  2. 15:00
    3. -
  3. 17:30
    4. -
  4. 19:30
    5. -
  5. 22:00
    6. +
  6. + +
    7. +
  7. + +
    8. +
  8. + +
@@ -105,17 +178,17 @@

Dune (2021)

@@ -504,10 +577,16 @@

Dune (2021)

+
+

Selected tickets

+
+ +
+ diff --git a/submissions/evgeniy24/html-movie-seat-booking/js/app.js b/submissions/evgeniy24/html-movie-seat-booking/js/app.js new file mode 100644 index 0000000..c6d2f7a --- /dev/null +++ b/submissions/evgeniy24/html-movie-seat-booking/js/app.js @@ -0,0 +1,46 @@ +const BOOKING_WRAP = document.querySelector('.booking-wrap'); +const SUMMARY_SEATS = document.querySelector('.summary-position'); + + +const showCinemaHall = function (...elements) { + elements.forEach((element) => { + element.classList.add('display-element') + }) +} + +const renderSelectedSeats = function (seat) { + const positionElement = document.createElement('li'); + positionElement.className = "summary-position__element"; + + const rowCellPrice = seat.value.split('_'); + + positionElement.innerHTML = ` +
Row: ${rowCellPrice[0]}
+
Seat: ${rowCellPrice[1]}
+
${rowCellPrice[2]} $
+ ` + SUMMARY_SEATS.append(positionElement); +} + +const renderSummaryBooking = function () { + const cinemaHall = document.querySelector('.cinema-hall'), + summary_date = document.querySelector('.summary-date'), + selectedSeats = document.querySelectorAll('.seats-input:checked'), + selectedDateInput = document.querySelector('.date__input:checked'), + selectedTimeInput = document.querySelector('.time__input:checked'); + + if (selectedDateInput && selectedTimeInput) { + showCinemaHall(cinemaHall); + summary_date.innerHTML = ` + ${selectedDateInput.value} + ${selectedTimeInput.value} + ` + } + + SUMMARY_SEATS.innerHTML = ''; + selectedSeats.forEach(renderSelectedSeats); +}; + +document.addEventListener('DOMContentLoaded', () => { + BOOKING_WRAP.addEventListener('change', renderSummaryBooking); +}) \ No newline at end of file diff --git a/submissions/evgeniy24/html-movie-seat-booking/styles/media.css b/submissions/evgeniy24/html-movie-seat-booking/styles/media.css index 7fbacb8..4e2b51f 100644 --- a/submissions/evgeniy24/html-movie-seat-booking/styles/media.css +++ b/submissions/evgeniy24/html-movie-seat-booking/styles/media.css @@ -37,6 +37,15 @@ width: 14px; height: 14px; } + + .booking-information { + + } + + .summary-position__element { + color: #ffb400; + font-size: 18px; + } } /* Smartphones landscape----------- */ @media only screen and (min-width: 415px) and (max-width: 767px) { diff --git a/submissions/evgeniy24/html-movie-seat-booking/styles/reset.css b/submissions/evgeniy24/html-movie-seat-booking/styles/reset.css index ddac727..19cc26d 100644 --- a/submissions/evgeniy24/html-movie-seat-booking/styles/reset.css +++ b/submissions/evgeniy24/html-movie-seat-booking/styles/reset.css @@ -37,6 +37,7 @@ body { line-height: 1.5; } +ul, ul[class], ol[class] { list-style: none; diff --git a/submissions/evgeniy24/html-movie-seat-booking/styles/styles.css b/submissions/evgeniy24/html-movie-seat-booking/styles/styles.css index 9a5f74a..ce6a1c9 100644 --- a/submissions/evgeniy24/html-movie-seat-booking/styles/styles.css +++ b/submissions/evgeniy24/html-movie-seat-booking/styles/styles.css @@ -26,6 +26,10 @@ header { align-items: center; } +.display-element { + display: flex !important; +} + .main-wrap { max-width: 1200px; padding: 0 1em; @@ -109,6 +113,7 @@ header { -webkit-appearance: none; -moz-appearance: none; appearance: none; + cursor: pointer; } .rating__star:checked, @@ -187,6 +192,7 @@ main { display: -webkit-box; display: -ms-flexbox; display: flex; + flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; @@ -194,7 +200,12 @@ main { -ms-flex-pack: center; justify-content: center; overflow: hidden; - margin: 1em 0; + margin: 0.5em 0; +} + +.template__header { + margin-bottom: 5px; + color: #edeaeb; } .date__list, @@ -217,32 +228,36 @@ main { -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + text-align: center; + font-weight: bold; + padding: 5px; margin: 0 0.5em; - padding: 0.4em; border: solid 2px #d4d4d4; border-radius: 3px; } .date__item:hover, .time__item:hover { - cursor: pointer; - background-color: #ffb400; + background-color: #ffffff; color: black; + cursor: pointer; } -.date__item a, -.time__item a { - text-align: center; - color: #d4d4d4; - text-decoration: none; +.date__input:checked + .date__item, +.time__input:checked + .time__item { + background-color: #ffb400; + color: black; } -.date__item:hover a, -.time__item:hover a { - color: black; +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + clip: rect(0 0 0 0); + overflow: hidden; } .time__item { @@ -262,11 +277,6 @@ main { border-radius: 5px; } -.item--active { - background-color: #ffb400; - color: black; -} - .item--active a { color: black; } @@ -275,7 +285,6 @@ main { width: 90%; display: -webkit-box; display: -ms-flexbox; - display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; @@ -286,7 +295,8 @@ main { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; - margin: 1em 0; + margin: 1em 0; + display: none; } .cinema-screen { @@ -339,12 +349,12 @@ main { .seats-input:focus { border: 2px solid #2ea151; - transition: 0.2s ease-in; - -webkit-transform: scale(1.2); - transform: scale(1.2); } .seats-input:hover { + -webkit-transform: scale(1.2); + transform: scale(1.2); + transition: 0.2s ease-in; cursor: pointer; } @@ -415,6 +425,30 @@ main { cursor: pointer; } +.booking-information { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.summary-date { + margin: 10px 0; + color: #fff; +} + +.summary-position__element { + display: flex; + flex-direction: row; + font-size: 18px; + font-weight: bold; +} + +.summary-position__element div { + margin-left: 15px; +} + footer { height: 50px; }