Picking Seats

Now the visitor picks their seats: a click on a free seat selects it, and another click unselects it. Below the seats, the page says how many are selected and what they cost together.

Keep the selected seats in an array, selectedSeats, just like the favorites in the Film Night checkpoint: includes() tells you whether a seat is selected, push() adds it, and filter() makes an array without it. After each change, draw the seats again with showSeats(), which gives the selected ones the class selected. The click handler of each seat goes on its button in showSeats(), created inside the loops, so that it knows its seat. The taken seats are disabled, so clicking them does nothing.

The price. The price of one ticket is in the showtime's price, so the total is selectedSeats.length * chosenShowtime.price. Show it in a paragraph with the id summary below the seats, every time showSeats() draws them, for example Seats: 2, total: $18. The dollar sign in front of ${…} in a template literal is just a character: `$${total}` gives $18.

Another showtime. Seats picked for Friday mean nothing on Saturday. When the visitor chooses a showtime, the selection starts again, empty.

Typical mistakes:

• Creating selectedSeats with const. filter() makes a new array, and putting it into a constant ends with TypeError: Assignment to constant variable.