movie seat booking with Javascript

Movie seat booking course from Brad Travacy.

Fetures:

select option value in html

perspective in css

changeing color of seats when click available seats

seats number and price from localStorage

HTML

the selection part with four options concludes value

brief vector demostration for user understanding

screen is for white screen display

there are 5 rows and each row contains 8 seats.total is 40 seats.

text show at the bottom with number and price.

CSS

the select with appearance none: without error shape.And for different browser using, apply -moz and -webkit.

every seat shaped and colored with different class name .

set the space between the first two coloum and the last two which is the aisle.

when hovering the seat, scale the size.

set the container toperspective:1000px. the shape of screen rotated 3d.

select DOMs with getElementById or querySelector

when click the seat,the class of seat toggled.

and run the updateSelectedCount()

all the selectedSeats is the NodeList. So it's better to map the seats to get the index of seat(index).And storage the index into local storage

NodeList.length is the seats' length.

Then pass the number and price into DOM.

When select different movie, choose different movie value and run setMovieData()

Also update the count again.

storage the movie index and price in localstorage.

When refresh teh page, the UI should show the data get from localStorage.

get the data from localstorage first.

if something in it,loop every seat index and add the occupied class.And also show the selected movie inde and price.

run the populateUI() and updatedCount() when load the page.

More:

Array.indexOf():the outcome is a number.First is 0. MDN

ElementNode.classList.add() and also remove,toggle and so on . MDN

When select all the seats DOMs, there is a NodeList.For convient loop,using [...] to convert to array.

CodemySite_Web development