diff --git a/submissions/kasionio/js-cinema-booking/index.css b/submissions/kasionio/js-cinema-booking/index.css new file mode 100644 index 0000000..cde1f12 --- /dev/null +++ b/submissions/kasionio/js-cinema-booking/index.css @@ -0,0 +1,207 @@ +* { + margin: 0; + border: 0; + box-sizing: border-box; + color: white; + text-decoration: none; +} + +html { + height: 100%; +} + +body { + min-width: 320px; + display: flex; + flex-direction: column; + height: 100%; +} + +.main { + display: flex; + justify-content: center; + flex: 1 0 auto; + background: url(img/sex-education_left.png) no-repeat calc(50% - 500px), + url(img/sex-education_right.png) no-repeat calc(50% + 500px), + linear-gradient(0deg, #99fff8, white 50%, #99fff8); +} + +.header { + text-align: center; +} + +.header_main { + background-color: #008b81; + color: #fff; + text-transform: uppercase; + line-height: 2; + flex: 0 0 auto; +} + +.article { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + height: 100%; + text-align: center; +} + +.main-container { + width: 500px; + background-color: #728673; +} + +.screen_text { + text-transform: uppercase; + letter-spacing: 2px; +} + +.seat:checked + label, +.selected { + background-color: pink; +} + +.seat:disabled + label, +.unavailable { + background-color: #c9c9c9; +} + +.seat:disabled + label:hover { + cursor: not-allowed; +} + +.seat:focus + label { + border: 1px solid red; +} + +.seat:active + label { + transform: scale(1.3); + border: 2px solid red; +} + +.square { + display: inline-block; + width: 15px; + height: 15px; + border-radius: 3px; +} + +.available { + background-color: #008b81; +} + +.submit-button { + width: 150px; + height: 50px; + margin: 10px; + border-radius: 10px; + background-color: #375f81; + outline: none; +} + +.submit-button:hover { + cursor: pointer; + background-color: #294b69; +} + +.submit-button:active { + border: 1px #fff solid; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + border: 0; + clip: rect(0 0 0 0); +} + +.label { + display: inline-block; + margin: 6px; + width: 30px; + height: 30px; + background-color: #008b81; + border: #375f81 1px solid; + border-radius: 4px; +} + +label:hover { + background-color: #02dfd0; + cursor: pointer; +} + +.comfort { + width: 40px; + margin: 10px; +} + +.footer { + background-color: #008b81; + flex: 0 0 auto; +} + +.footer-content { + margin: auto; + display: flex; + justify-content: space-around; + align-items: center; + padding: 20px; + width: 50vw; +} + +.legend-item, +.price-item { + margin: 10px; +} + +.legend, +.price { + display: flex; + flex-direction: column; + +} + +.legend::after, +.price::after { + content: ''; + position: relative; + margin-top: 20px; + width: 100%; + border-bottom: 1px solid #fff; +} + +.place { + height: 100px; + width: 200px; + overflow-y: auto; +} + +.email:before { + content: '\2709 '; +} + +.tel::before { + content: '\1F57F '; +} + +@media screen and (max-width: 680px) { + .main { + background: linear-gradient(0deg, #99fff8, white 50%, #99fff8); + } + + .modal-content { + width: 80%; + } +} + +@media screen and (max-width: 1400px) { + .footer-content { + flex-direction: column; + width: 100%; + } +} diff --git a/submissions/kasionio/js-cinema-booking/index.html b/submissions/kasionio/js-cinema-booking/index.html new file mode 100644 index 0000000..5fe1019 --- /dev/null +++ b/submissions/kasionio/js-cinema-booking/index.html @@ -0,0 +1,160 @@ + + + + + + + Cinema booking + + +
+

Sex education

+
+
+
+
+
+

Select your seat

+
+
+ + + Screen + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + +
+
+
+
+
+

Legend:

+
+
+ + Available + + Unavailable + + Selected +
+
+
+

Selected:

+

+

+
+
+

Total amount: + 0$ +

+
+
+ +
+
+
+
+ + + + diff --git a/submissions/kasionio/js-cinema-booking/index.js b/submissions/kasionio/js-cinema-booking/index.js new file mode 100644 index 0000000..1b0dca0 --- /dev/null +++ b/submissions/kasionio/js-cinema-booking/index.js @@ -0,0 +1,31 @@ +const form = document.getElementById('form'); +const totalPrice = document.getElementById('total-price'); +const chosenPlaces = document.getElementById('place'); +const paymentButton = document.getElementById('paymentButton'); +const chosenTickets = []; +const TICKET_PRICE = 10; + +const chooseTickets = ({target}) => { + target.checked ? addTicket(target.value) : removeTicket(target.value); + + let chosenTicketsNodes = chosenTickets.map(ticket => { + const [row, place] = ticket.split('-'); + return ` +
+ row: ${row}, + place: ${place} +
+ `; + }); + chosenPlaces.innerHTML = chosenTicketsNodes.join(''); + countTicketsPrice(); +} + +const countTicketsPrice = () => totalPrice.textContent = chosenTickets.length * TICKET_PRICE; +const addTicket = ticket => chosenTickets.push(ticket); +const removeTicket = ticket => chosenTickets.splice(chosenTickets.indexOf(ticket), 1); + +const showTotal = () => alert(`Tickets: ${chosenTickets.join(', ')}. Total price: ${totalPrice.textContent}$`); + +form.addEventListener('input', chooseTickets); +paymentButton.addEventListener('click', showTotal);