diff --git a/submissions/BlueLamantine/index.html b/submissions/BlueLamantine/html-movie-seat-booking/index.html similarity index 91% rename from submissions/BlueLamantine/index.html rename to submissions/BlueLamantine/html-movie-seat-booking/index.html index 3cb177f..083d517 100644 --- a/submissions/BlueLamantine/index.html +++ b/submissions/BlueLamantine/html-movie-seat-booking/index.html @@ -18,6 +18,7 @@ /> +
@@ -170,13 +171,13 @@

-

Regular seat

+

Regular seat - 5$

-

Love seat

+

Love seat - 12$

@@ -210,7 +211,7 @@

id="seat11" class="main__checkbox" name="seat" - value="1/1" + value="1/1/5" aria-label="row 1 seat 1" /> @@ -221,7 +222,7 @@

id="seat12" class="main__checkbox" name="seat" - value="1/2" + value="1/2/5" aria-label="row 1 seat 2" /> @@ -232,7 +233,7 @@

id="seat13" class="main__checkbox" name="seat" - value="1/3" + value="1/3/5" aria-label="row 1 seat 3" /> @@ -243,7 +244,7 @@

id="seat14" class="main__checkbox" name="seat" - value="1/4" + value="1/4/5" aria-label="row 1 seat 4" /> @@ -254,7 +255,7 @@

id="seat15" class="main__checkbox" name="seat" - value="1/5" + value="1/5/5" aria-label="row 1 seat 5" /> @@ -267,7 +268,7 @@

id="seat21" class="main__checkbox" name="seat" - value="2/1" + value="2/1/5" aria-label="row 2 seat 1" /> @@ -278,7 +279,7 @@

id="seat22" class="main__checkbox" name="seat" - value="2/2" + value="2/2/5" aria-label="row 2 seat 2" /> @@ -289,7 +290,7 @@

id="seat23" class="main__checkbox" name="seat" - value="2/3" + value="2/3/5" aria-label="row 2 seat 3" disabled /> @@ -301,7 +302,7 @@

id="seat24" class="main__checkbox" name="seat" - value="2/4" + value="2/4/5" aria-label="row 2 seat 4" disabled /> @@ -313,7 +314,7 @@

id="seat25" class="main__checkbox" name="seat" - value="2/5" + value="2/5/5" aria-label="row 2 seat 5" disabled /> @@ -325,7 +326,7 @@

id="seat26" class="main__checkbox" name="seat" - value="2/6" + value="2/6/5" aria-label="row 2 seat 6" /> @@ -336,7 +337,7 @@

id="seat27" class="main__checkbox" name="seat" - value="2/7" + value="2/7/5" aria-label="row 2 seat 7" /> @@ -349,7 +350,7 @@

id="seat31" class="main__checkbox" name="seat" - value="3/1" + value="3/1/5" aria-label="row 3 seat 1" /> @@ -360,7 +361,7 @@

id="seat32" class="main__checkbox" name="seat" - value="3/2" + value="3/2/5" aria-label="row 3 seat 2" /> @@ -371,7 +372,7 @@

id="seat33" class="main__checkbox" name="seat" - value="3/3" + value="3/3/5" aria-label="row 3 seat 3" /> @@ -382,7 +383,7 @@

id="seat34" class="main__checkbox" name="seat" - value="3/4" + value="3/4/5" aria-label="row 3 seat 4" /> @@ -393,7 +394,7 @@

id="seat35" class="main__checkbox" name="seat" - value="3/5" + value="3/5/5" aria-label="row 3 seat 5" /> @@ -404,7 +405,7 @@

id="seat36" class="main__checkbox" name="seat" - value="3/6" + value="3/6/5" aria-label="row 3 seat 6" /> @@ -415,7 +416,7 @@

id="seat37" class="main__checkbox" name="seat" - value="3/7" + value="3/7/5" aria-label="row 3 seat 7" /> @@ -426,7 +427,7 @@

id="seat38" class="main__checkbox" name="seat" - value="3/8" + value="3/8/5" aria-label="row 3 seat 8" /> @@ -437,7 +438,7 @@

id="seat39" class="main__checkbox" name="seat" - value="3/9" + value="3/9/5" aria-label="row 3 seat 9" /> @@ -448,7 +449,7 @@

id="seat310" class="main__checkbox" name="seat" - value="3/10" + value="3/10/5" aria-label="row 3 seat 10" /> @@ -461,7 +462,7 @@

id="seat41" class="main__checkbox" name="seat" - value="4/1" + value="4/1/5" aria-label="row 4 seat 1" /> @@ -472,7 +473,7 @@

id="seat42" class="main__checkbox" name="seat" - value="4/2" + value="4/2/5" aria-label="row 4 seat 2" /> @@ -483,7 +484,7 @@

id="seat43" class="main__checkbox" name="seat" - value="4/3" + value="4/3/5" aria-label="row 4 seat 3" /> @@ -494,7 +495,7 @@

id="seat44" class="main__checkbox" name="seat" - value="4/4" + value="4/4/5" aria-label="row 4 seat 4" /> @@ -505,7 +506,7 @@

id="seat45" class="main__checkbox" name="seat" - value="4/5" + value="4/5/5" aria-label="row 4 seat 5" disabled /> @@ -517,7 +518,7 @@

id="seat46" class="main__checkbox" name="seat" - value="4/6" + value="4/6/5" aria-label="row 4 seat 6" disabled /> @@ -529,7 +530,7 @@

id="seat47" class="main__checkbox" name="seat" - value="4/7" + value="4/7/5" aria-label="row 4 seat 7" disabled /> @@ -541,7 +542,7 @@

id="seat48" class="main__checkbox" name="seat" - value="4/8" + value="4/8/5" aria-label="row 4 seat 8" disabled /> @@ -553,7 +554,7 @@

id="seat49" class="main__checkbox" name="seat" - value="4/9" + value="4/9/5" aria-label="row 4 seat 9" /> @@ -564,7 +565,7 @@

id="seat410" class="main__checkbox" name="seat" - value="4/10" + value="4/10/5" aria-label="row 4 seat 10" /> @@ -577,7 +578,7 @@

id="seat51" class="main__checkbox" name="seat" - value="5/1" + value="5/1/12" aria-label="row 5 seat 1" /> @@ -588,7 +589,7 @@

id="seat52" class="main__checkbox" name="seat" - value="5/2" + value="5/2/12" aria-label="row 5 seat 2" /> @@ -599,7 +600,7 @@

id="seat53" class="main__checkbox" name="seat" - value="5/3" + value="5/3/12" aria-label="row 5 seat 3" /> @@ -610,7 +611,7 @@

id="seat54" class="main__checkbox" name="seat" - value="5/4" + value="5/4/12" aria-label="row 5 seat 4" disabled /> @@ -622,7 +623,7 @@

id="seat55" class="main__checkbox" name="seat" - value="5/5" + value="5/5/12" aria-label="row 5 seat 5" /> @@ -633,7 +634,7 @@

id="seat56" class="main__checkbox" name="seat" - value="5/6" + value="5/6/12" aria-label="row 5 seat 6" /> @@ -644,7 +645,7 @@

id="seat57" class="main__checkbox" name="seat" - value="5/7" + value="5/7/12" aria-label="row 5 seat 7" /> @@ -654,14 +655,24 @@

- +

SELECTED SEATS

+
    +
    + + + +
    diff --git a/submissions/BlueLamantine/style.css b/submissions/BlueLamantine/html-movie-seat-booking/style.css similarity index 94% rename from submissions/BlueLamantine/style.css rename to submissions/BlueLamantine/html-movie-seat-booking/style.css index eb89a81..6174e23 100644 --- a/submissions/BlueLamantine/style.css +++ b/submissions/BlueLamantine/html-movie-seat-booking/style.css @@ -330,7 +330,36 @@ fieldset { .order { padding: 20px; display: flex; - justify-content: center; + padding: 20px; + flex-direction: column; + align-items: center; +} +.order.modal { + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.88); +} +.tickets { + padding-left: 0px; + display: flex; + flex-direction: column; + align-items: center; +} +.tickets li { + padding: 10px; + font-size: 18px; +} +.tickets li span:first-child { + margin-right: 20px; +} +.buttons { + padding: 10px; + margin-top: 20px; } .order__submit { padding: 10px 60px; @@ -338,7 +367,7 @@ fieldset { background-color: red; border: 3px solid red; color: white; - margin-bottom: 20px; + margin: 20px; } .order__submit:hover, .order__submit:focus { @@ -349,6 +378,9 @@ fieldset { .order__submit:focus { outline: none; } +.hidden { + display: none; +} @media (max-width: 1255px) { .poster { position: relative; diff --git a/submissions/BlueLamantine/movie-seat-booking-js/main.js b/submissions/BlueLamantine/movie-seat-booking-js/main.js new file mode 100644 index 0000000..58c2399 --- /dev/null +++ b/submissions/BlueLamantine/movie-seat-booking-js/main.js @@ -0,0 +1,81 @@ +class Ticket { + constructor() { + this.orderForm = document.querySelector('#ticketsForm'); + this.tickets = document.querySelector('#tickets'); + this.purchaseButton = document.querySelector('#purchaseButton'); + this.confirmButton = document.querySelector('#confirmButton'); + this.editButton = document.querySelector('#editButton'); + this.totalPrice = document.querySelector('#totalPrice'); + this.orderSection = document.querySelector('.order'); + this.addListeners(this.orderForm, this.purchaseButton, this.editButton); + this.priceCounter = 0; + } + + addListeners(form, purchase, edit) { + form.addEventListener('change', ({ target }) => { + if (target.type === 'checkbox') { + this.manageTickets(target); + } + }); + + purchase.addEventListener('click', () => { + if (this.tickets.children.length !== 0) { + this.showModal(purchase, edit); + } + }); + + edit.addEventListener('click', () => { + this.hideModal(purchase, edit); + }); + } + + manageTickets(target) { + const [row, seat, price] = target.value.split('/'); + if (target.checked === true) { + this.addTicket(row, seat, price); + this.priceCounter += Number(price); + } else { + this.removeTicket(row, seat); + this.priceCounter -= Number(price); + } + this.totalPrice.innerHTML = this.priceCounter + '$'; + } + + getHtmlTicket(row, seat, price) { + return ` +
  • + Row ${row} seat ${seat} + Price: ${price}$ +
    • + `; + } + + addTicket(row, seat, price) { + this.tickets.insertAdjacentHTML( + 'beforeend', + this.getHtmlTicket(row, seat, price) + ); + } + + removeTicket(row, seat) { + const findElement = document.querySelector(`#ticket${row}${seat}`); + findElement.parentNode.removeChild(findElement); + } + + showModal(purchase, edit) { + purchase.classList.add('hidden'); + this.confirmButton.classList.remove('hidden'); + this.confirmButton.innerHTML = `Confirm (${this.priceCounter}$)`; + edit.classList.remove('hidden'); + this.orderSection.classList.add('modal'); + } + + hideModal(purchase, edit) { + this.orderSection.classList.remove('modal'); + purchase.classList.remove('hidden'); + this.confirmButton.classList.add('hidden'); + edit.classList.add('hidden'); + } +} + +new Ticket();