From 0463e156a01b3447703c38191a9744a7f20cfc36 Mon Sep 17 00:00:00 2001 From: Hanna-Syniavska Date: Thu, 25 Feb 2021 11:49:36 +0200 Subject: [PATCH 1/4] fix eslint errors --- .../hannasyn/js-movie-seat-booking/index.html | 400 ++++++++++++++ .../hannasyn/js-movie-seat-booking/script.js | 140 +++++ .../hannasyn/js-movie-seat-booking/style.css | 487 ++++++++++++++++++ 3 files changed, 1027 insertions(+) create mode 100644 submissions/hannasyn/js-movie-seat-booking/index.html create mode 100644 submissions/hannasyn/js-movie-seat-booking/script.js create mode 100644 submissions/hannasyn/js-movie-seat-booking/style.css diff --git a/submissions/hannasyn/js-movie-seat-booking/index.html b/submissions/hannasyn/js-movie-seat-booking/index.html new file mode 100644 index 0000000..ac9a82d --- /dev/null +++ b/submissions/hannasyn/js-movie-seat-booking/index.html @@ -0,0 +1,400 @@ + + + + + + + Choose seats + + +
+
+ + +
+
+
+
+ Book your ticket! +
+
+

Soul

+ soul_poster +
+
+
+
+

Choose date and time

+
+ + + + + +
+
+ + + + + + + + + + +
+
+
+
+
+

Pick your seat

+

Screen

+
+
+ + +
+
+ + + + +
+
+ + +
+
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+ + +
+
+
+
+

Your order info:

+

Movie: "Soul"

+
+ +
+ + +
+
+
+
+ + + + diff --git a/submissions/hannasyn/js-movie-seat-booking/script.js b/submissions/hannasyn/js-movie-seat-booking/script.js new file mode 100644 index 0000000..6ed263c --- /dev/null +++ b/submissions/hannasyn/js-movie-seat-booking/script.js @@ -0,0 +1,140 @@ +/* eslint-disable no-param-reassign */ +const bookingButton = document.querySelector('#booking-button'); +const hall = document.querySelector('.hall'); +const bookedField = document.querySelector('.booked'); +const checkoutScreen = document.querySelector('#checkout'); +const backButton = document.querySelector('#back-button'); +const payButton = document.querySelector('#pay-button'); +const checkoutContent = document.querySelector('#checkout-content'); +const sceduleContainer = document.querySelector('.schedule'); +const price = 10; + +const ticketTemplate = ` +
+

Row: {{ rowNum }}

+

Seat: {{ seatNum }}

+

Price: $${price}

+
`; + +function addTicket(container, templateItem) { + container.insertAdjacentHTML('beforeend', templateItem); +} + +function removeTicket(container, item) { + container.removeChild(item); +} + +function uncheckSeats() { + const checkedSeats = document.querySelectorAll('.seats__input:checked'); + // eslint-disable-next-line no-return-assign + checkedSeats.forEach((seat) => (seat.checked = false)); +} + +function clearBookedField({ target }) { + if (target.classList.contains('schedule__input')) { + bookedField.innerHTML = ''; + uncheckSeats(); + } +} + +function fillBookedField(templateMain, templateItem, target, container, item) { + if (!bookedField.hasChildNodes()) { + bookedField.innerHTML = templateMain; + } else if (!target.checked) { + removeTicket(container, item); + } else { + addTicket(container, templateItem); + } +} + +function setBookedField({ target }) { + if (!target.classList.contains('seats__input')) { + return; + } + + const [rowNum, seatNum] = target.value.split('-'); + const chosenDate = document.querySelector('.input-date:checked').value; + const chosenTime = document.querySelector('.input-time:checked').value; + const ticketId = target.value; + const chosenTicket = ticketTemplate + .replace('{{ ticketId }}', `${ticketId}`) + .replace('{{ rowNum }}', `${rowNum}`) + .replace('{{ seatNum }}', `${seatNum}`); + + const bookedTemplate = `
+

Your booking:

+

+ Date: ${chosenDate} +

+

+ Time: ${chosenTime} +

+ ${chosenTicket} +
`; + + const bookedContainer = document.querySelector('.booked__container'); + const bookedItem = document.getElementById(`${ticketId}`); + + fillBookedField( + bookedTemplate, + chosenTicket, + target, + bookedContainer, + // eslint-disable-next-line comma-dangle + bookedItem + ); +} + +function fillCheckout() { + const chosenDate = document.querySelector('.input-date:checked').value; + const chosenTime = document.querySelector('.input-time:checked').value; + const chosenTickets = [...document.querySelectorAll('.seats__input:checked')]; + + let totalPrice = 0; + + const checkoutTemplate = ` +

+ Date: ${chosenDate} +

+

+ Time: ${chosenTime} +

+ + ${chosenTickets + .map((ticket) => { + const [rowNum, seatNum] = ticket.value.split('-'); + totalPrice += price; + const checkoutTicketTemplate = ticketTemplate + .replace('{{ rowNum }}', `${rowNum}`) + .replace('{{ seatNum }}', `${seatNum}`); + return checkoutTicketTemplate; + }) + .join('')} +
+ Total: $${totalPrice} +
+ `; + checkoutContent.innerHTML = checkoutTemplate; +} + +function showCheckoutScreen(e) { + e.preventDefault(); + fillCheckout(); + checkoutScreen.classList.add('show'); +} + +backButton.addEventListener('click', () => { + checkoutScreen.classList.remove('show'); +}); + +payButton.addEventListener('click', () => { + // eslint-disable-next-line no-alert + alert('Thank you for order!'); + setTimeout(() => { + checkoutScreen.classList.remove('show'); + }, 1000); +}); + +sceduleContainer.addEventListener('click', clearBookedField); +hall.addEventListener('click', setBookedField); +bookingButton.addEventListener('click', showCheckoutScreen); diff --git a/submissions/hannasyn/js-movie-seat-booking/style.css b/submissions/hannasyn/js-movie-seat-booking/style.css new file mode 100644 index 0000000..4710c27 --- /dev/null +++ b/submissions/hannasyn/js-movie-seat-booking/style.css @@ -0,0 +1,487 @@ +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap'); +* { + padding: 0; + margin: 0; + border: 0; +} + +*, +*:before, +*:after { + box-sizing: border-box; +} + +:focus, +:active { + outline: none; +} + +a:focus, +a:active { + outline: none; +} + +html, +body { + font-family: 'Quicksand', sans-serif; + height: 100%; + width: 100%; + line-height: 1; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +input, +button, +textarea { + font-family: inherit; +} + +input::-ms-clear { + display: none; +} + +button { + cursor: pointer; +} + +button::-moz-focus-inner { + padding: 0; + border: 0; +} + +a, +a:visited, +a:hover { + text-decoration: none; +} + +ul, +ol { + list-style: none; +} + +img { + vertical-align: top; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +.header { + background-color: #111111; +} +.header__container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.container { + max-width: 90vw; + margin: auto; + padding: 20px 0; +} + +.logo { + flex: 0 0 100px; + color: #65b6e9; + font-size: 28px; + font-weight: 700; + letter-spacing: 0.3em; +} +.navigation { + flex: 1 1 auto; +} +.navigation__list { + display: flex; + justify-content: flex-end; +} +.navigation__item { + margin: 0 20px 0 0; +} +@media (max-width: 500px) { + .navigation__item { + margin: 0 10px 0 0; + } +} +.navigation__link { + color: #c2c2c2; + font-size: 18px; + transition: 0.2s linear; +} +.navigation__link:focus, +.navigation__link:hover { + color: #ffffff; +} + +.main { + background-color: #191919; + position: relative; +} +.main__message { + line-height: 60px; + font-size: 20px; + color: #c2c2c2; +} + +.movie { + margin: 50px 0; + display: flex; + justify-content: space-between; + align-items: center; +} +@media (max-width: 768px) { + .movie { + align-items: flex-start; + } +} +.movie__column { + flex: 0 0 50%; +} +@media (max-width: 767px) { + .movie__column { + flex: 1 1 auto; + } + .movie__column:nth-of-type(1) { + margin: 0 30px 0 0; + } +} +.movie__title { + margin: 0 0 30px; + padding: 0 0 0 60px; + position: relative; + font-size: 32px; + font-weight: 700; + letter-spacing: 0.1em; + color: #6073ca; +} +.movie__title::before { + content: '8.1 IMDb'; + position: absolute; + top: 50%; + left: 0; + transform: translate(0, -50%); + width: 48px; + height: 48px; + border: 3px solid #6073ca; + border-radius: 50%; + display: flex; + align-items: center; + font-size: 12px; + letter-spacing: 0em; + text-align: center; +} +@media (max-width: 767px) { + .movie__poster { + width: 100%; + } +} + +.schedule { + color: #c2c2c2; +} +.schedule__title { + margin: 0 0 50px; + font-size: 24px; +} +.schedule__date { + display: flex; +} +@media (max-width: 500px) { + .schedule__date { + flex-wrap: wrap; + } +} +.schedule__item { + margin: 0 3vw 20px 0; + cursor: pointer; +} +.schedule__input:checked + .schedule__circle { + background-color: #65b6e9; +} +.schedule__input:checked + .schedule__clock { + color: #65b6e9; + text-decoration: underline; +} +.schedule__input:focus + .schedule__circle { + border: 1px solid #6073ca; +} +.schedule__input:focus + .schedule__clock { + text-decoration: none; +} +.schedule__circle { + display: flex; + justify-content: center; + align-items: center; + margin: 10px 0 0; + width: 30px; + height: 30px; + border-radius: 50%; + background-color: #c2c2c2; + color: #191919; + transition: 0.3s ease; +} +.schedule__time { + margin: 50px 0 70px; + display: flex; + flex-wrap: wrap; + max-width: 75%; +} +@media (max-width: 930px) { + .schedule__time { + max-width: 90%; + } +} +@media (max-width: 767px) { + .schedule__time { + margin: 40px 0; + } +} +.schedule__clock { + padding: 5px; + display: block; + box-sizing: border-box; +} + +.input-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + clip: rect(0 0 0 0); + overflow: hidden; +} + +.button { + padding: 10px 15px; + border-radius: 20px; + transition: 0.2s ease-in-out; + background-color: #65b6e9; + font-size: 18px; + color: #191919; +} +.button:hover, +.button:focus { + background-color: #437a9c; +} + +.hall { + margin: 30px 0 0; + text-align: center; +} +.hall__title { + color: #c2c2c2; + font-size: 24px; +} +.hall__screen { + position: relative; + margin: 80px 0; + text-align: center; + font-size: 18px; + letter-spacing: 0.3em; + color: #747474; +} +.hall__screen::before { + content: ''; + position: absolute; + top: 40px; + left: 50%; + transform: translate(-50%, 0); + width: 80vw; + height: 0px; + border-top: 2px solid #c2c2c2; + border-radius: 50%; + z-index: 0; +} + +.seats { + max-width: 70vw; + margin: 120px auto 0; +} +.seats__row { + display: flex; + justify-content: center; + margin: 20px 0; +} +.seats__column { + display: flex; + margin: 0 5vw 0 0; +} +.seats__column:nth-of-type(3) { + margin: 0; +} +@media (max-width: 500px) { + .seats__column { + margin: 0 4vw 0 0; + } +} +.seats__item { + margin: 0 10px 0 0; +} +@media (max-width: 500px) { + .seats__item { + margin: 0 7px 0 0; + } +} +.seats__input:checked + .seats__square { + background-color: #65b6e9; + color: #191919; +} +.seats__input:focus + .seats__square { + border: 2px solid #6073ca; +} +.seats__input:disabled + .seats__square { + background-color: #353535; + color: #353535; + cursor: default; +} +.seats__square { + display: flex; + justify-content: center; + align-items: center; + width: 25px; + height: 30px; + border-radius: 50% 50% 0 0; + background-color: #747474; + color: #747474; + cursor: pointer; +} +@media (max-width: 500px) { + .seats__square { + width: 20px; + height: 25px; + border-radius: 40% 40% 0 0; + } +} +.seats__button { + margin: 20px 0; +} + +.footer { + background-color: #111111; + padding: 12px 0; +} +.footer__text { + color: #c2c2c2; + font-size: 20px; +} +.footer__link { + color: #65b6e9; +} + +.booked { + margin: 60px auto 20px; + max-width: 80vw; +} +.booked__title { + font-size: 28px; + margin: 0 0 10px; + color: #65b6e9; +} +.booked__container { + padding: 20px; + background-color: #353535; + border: 2px solid #747474; + border-radius: 20px; + color: #c2c2c2; +} +.booked__time { + margin: 10px 0; +} +.booked__item { + margin: 20px auto; + display: flex; + justify-content: space-between; + padding: 10px; + max-width: 50%; + min-width: 250px; + border: 1px solid #65b6e9; + border-radius: 20px; +} +.highlight-text { + color: #6073ca; + font-weight: 700; +} + +.checkout { + display: none; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + background-color: #191919; + color: #ffffff; +} +.checkout.show { + display: block; +} +.checkout__container { + max-width: 70vw; + margin: 80px auto; + font-size: 20px; + text-align: center; +} +.checkout__title { + font-size: 32px; + position: relative; + padding: 0 0 20px; + margin: 0 0 30px; +} +.checkout__title::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translate(-50%, 0); + width: 80%; + height: 1px; + background-color: #c2c2c2; +} +.checkout__item { + margin: 20px auto; + display: flex; + justify-content: space-between; + padding: 15px; + max-width: 70%; + min-width: 300px; + border: 1px solid #747474; + border-radius: 20px; +} +.checkout__details { + margin: 20px 0; +} +.checkout__price { + position: relative; + padding: 0 0 20px; + margin: 0 0 30px; +} +.checkout__price::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translate(-50%, 0); + width: 80%; + height: 1px; + background-color: #c2c2c2; +} +.checkout__buttons { + margin: 20px 0 0; +} +.checkout__button { + margin: 0 20px 0; +} From 65f67dd92465c582bd7934df42983b9c28b174bb Mon Sep 17 00:00:00 2001 From: Hanna-Syniavska Date: Thu, 25 Feb 2021 14:25:46 +0200 Subject: [PATCH 2/4] refactoring code --- .../hannasyn/js-movie-seat-booking/script.js | 118 +++++++++--------- 1 file changed, 58 insertions(+), 60 deletions(-) diff --git a/submissions/hannasyn/js-movie-seat-booking/script.js b/submissions/hannasyn/js-movie-seat-booking/script.js index 6ed263c..518d2dd 100644 --- a/submissions/hannasyn/js-movie-seat-booking/script.js +++ b/submissions/hannasyn/js-movie-seat-booking/script.js @@ -1,12 +1,19 @@ -/* eslint-disable no-param-reassign */ +/* eslint-disable no-alert */ const bookingButton = document.querySelector('#booking-button'); const hall = document.querySelector('.hall'); -const bookedField = document.querySelector('.booked'); const checkoutScreen = document.querySelector('#checkout'); const backButton = document.querySelector('#back-button'); const payButton = document.querySelector('#pay-button'); -const checkoutContent = document.querySelector('#checkout-content'); const sceduleContainer = document.querySelector('.schedule'); +const bookedContainer = document.querySelector('.booked__container'); +const dateContainer = document.querySelector('#dateContainer'); +const timeContainer = document.querySelector('#timeContainer'); +const bookedItemContainer = document.querySelector('#bookedItemContainer'); +const checkoutTickets = document.querySelector('#checkoutTickets'); +const checkoutDate = document.querySelector('#checkoutDate'); +const checkoutTime = document.querySelector('#checkoutTime'); +const checkoutTotalPrice = document.querySelector('#checkoutTotalPrice'); +const body = document.querySelector('body'); const price = 10; const ticketTemplate = ` @@ -16,34 +23,40 @@ const ticketTemplate = `

Price: $${price}

`; -function addTicket(container, templateItem) { - container.insertAdjacentHTML('beforeend', templateItem); +function addTicket(ticket) { + bookedItemContainer.insertAdjacentHTML('beforeend', ticket); } -function removeTicket(container, item) { - container.removeChild(item); +function removeTicket(item) { + bookedItemContainer.removeChild(item); } function uncheckSeats() { const checkedSeats = document.querySelectorAll('.seats__input:checked'); - // eslint-disable-next-line no-return-assign - checkedSeats.forEach((seat) => (seat.checked = false)); + checkedSeats.forEach((seat) => { + // eslint-disable-next-line no-param-reassign + seat.checked = false; + }); } -function clearBookedField({ target }) { +function clearBookedField() { + bookedContainer.classList.remove('show'); + bookedItemContainer.innerHTML = ''; + uncheckSeats(); +} + +function clickedScedule({ target }) { if (target.classList.contains('schedule__input')) { - bookedField.innerHTML = ''; - uncheckSeats(); + clearBookedField(); } } -function fillBookedField(templateMain, templateItem, target, container, item) { - if (!bookedField.hasChildNodes()) { - bookedField.innerHTML = templateMain; - } else if (!target.checked) { - removeTicket(container, item); +function fillBookedField(ticket, target, item) { + if (!target.checked) { + removeTicket(item); } else { - addTicket(container, templateItem); + bookedContainer.classList.add('show'); + addTicket(ticket); } } @@ -55,34 +68,18 @@ function setBookedField({ target }) { const [rowNum, seatNum] = target.value.split('-'); const chosenDate = document.querySelector('.input-date:checked').value; const chosenTime = document.querySelector('.input-time:checked').value; + const ticketId = target.value; const chosenTicket = ticketTemplate .replace('{{ ticketId }}', `${ticketId}`) .replace('{{ rowNum }}', `${rowNum}`) .replace('{{ seatNum }}', `${seatNum}`); + dateContainer.innerHTML = chosenDate; + timeContainer.innerHTML = chosenTime; - const bookedTemplate = `
-

Your booking:

-

- Date: ${chosenDate} -

-

- Time: ${chosenTime} -

- ${chosenTicket} -
`; + const currentBookedItem = document.getElementById(`${ticketId}`); - const bookedContainer = document.querySelector('.booked__container'); - const bookedItem = document.getElementById(`${ticketId}`); - - fillBookedField( - bookedTemplate, - chosenTicket, - target, - bookedContainer, - // eslint-disable-next-line comma-dangle - bookedItem - ); + fillBookedField(chosenTicket, target, currentBookedItem); } function fillCheckout() { @@ -92,49 +89,50 @@ function fillCheckout() { let totalPrice = 0; - const checkoutTemplate = ` -

- Date: ${chosenDate} -

-

- Time: ${chosenTime} -

- - ${chosenTickets + checkoutDate.innerHTML = chosenDate; + checkoutTime.innerHTML = chosenTime; + + const chosenTicket = chosenTickets .map((ticket) => { const [rowNum, seatNum] = ticket.value.split('-'); totalPrice += price; const checkoutTicketTemplate = ticketTemplate .replace('{{ rowNum }}', `${rowNum}`) - .replace('{{ seatNum }}', `${seatNum}`); + .replace('{{ seatNum }}', `${seatNum}`) + .replace('id="{{ ticketId }}"', ''); return checkoutTicketTemplate; }) - .join('')} -
- Total: $${totalPrice} -
- `; - checkoutContent.innerHTML = checkoutTemplate; + .join(''); + + checkoutTotalPrice.innerHTML = totalPrice; + checkoutTickets.innerHTML = chosenTicket; } function showCheckoutScreen(e) { e.preventDefault(); + if (!bookedItemContainer.hasChildNodes()) { + alert('First choose your seat!'); + return; + } fillCheckout(); + body.classList.add('lock'); checkoutScreen.classList.add('show'); } -backButton.addEventListener('click', () => { +function closeCheckoutScreen() { checkoutScreen.classList.remove('show'); -}); + body.classList.remove('lock'); +} payButton.addEventListener('click', () => { - // eslint-disable-next-line no-alert alert('Thank you for order!'); setTimeout(() => { - checkoutScreen.classList.remove('show'); + closeCheckoutScreen(); + clearBookedField(); }, 1000); }); -sceduleContainer.addEventListener('click', clearBookedField); +backButton.addEventListener('click', closeCheckoutScreen); +sceduleContainer.addEventListener('click', clickedScedule); hall.addEventListener('click', setBookedField); bookingButton.addEventListener('click', showCheckoutScreen); From a91db8c6051d4cedad22adf8c782dac1947f9b73 Mon Sep 17 00:00:00 2001 From: Hanna-Syniavska Date: Thu, 25 Feb 2021 14:26:41 +0200 Subject: [PATCH 3/4] change templates --- .../hannasyn/js-movie-seat-booking/index.html | 48 ++++++++++++++----- .../hannasyn/js-movie-seat-booking/style.css | 18 +++++-- 2 files changed, 50 insertions(+), 16 deletions(-) diff --git a/submissions/hannasyn/js-movie-seat-booking/index.html b/submissions/hannasyn/js-movie-seat-booking/index.html index ac9a82d..def0a28 100644 --- a/submissions/hannasyn/js-movie-seat-booking/index.html +++ b/submissions/hannasyn/js-movie-seat-booking/index.html @@ -372,23 +372,45 @@

Pick your seat

-
+
+
+

Your booking:

+

+ Date: {{chosenDate}} +

+

+ Time: {{chosenTime}} +

+
+
+
+
+
+

Your order info:

+

Movie: "Soul"

+
+

+ Date: {{chosenDate}} +

+

+ Time: {{chosenTime}} +

+
+
+ Total: ${{totalPrice}} +
+
+
+ + +
+
+
-
-
-

Your order info:

-

Movie: "Soul"

-
- -
- - -
-
-
+