Your Tickets

The last step: a visitor who comes back wants to see what they've booked. Below the seat picker, add a section with a list of their tickets:

<section id="your-tickets">
    <h2>Your tickets</h2>
    <ul id="tickets"></ul>
</section>

Draw the list from bookings with a function showTickets(): an item for each booking, with the day, time and film, and the booked seats: Friday 5:30 pm, Robots on Vacation: C6, C7. A booking keeps only the showtime's id. The day, time and film are in the showtime with that id, and find() finds it in showtimes. So the list can only be drawn once the showtimes are loaded: call showTickets() at the end of loadShowtimes(), and again after each booking.

That's the whole project. The showtimes page of Starlight Cinema now loads its showtimes from a data file, and says so when it's loading or when something went wrong. The visitor can choose a day, open a showtime, pick seats and see what they cost, and book them with a form that checks what they typed. And the page remembers their tickets when they come back. The cinema can now change its schedule by editing showtimes.json, without touching the page. Save the new and changed files into your site's folder and upload the folder again, as in the lesson Putting It Online, and it all works there too. Just don't be surprised when you open showtimes.html straight from the folder on your computer: browsers don't let fetch() read files from your disk, so the showtimes don't load. A web server answers fetch(), just as the preview does, so online, the page loads showtimes.json.

If you'd like to keep going, you already know everything these need: a Cancel button for each ticket (filter(), save, draw again), or the price of each booking in its item.

What's next. Your site works, and now it's time to make it look modern. The next course in the path, Tailwind CSS, teaches a different way of styling pages: instead of writing your own CSS rules, you put ready-made classes right into the HTML. Then, in the project The Cinema in Tailwind, you'll restyle this very site with it, including the seats and tickets that your script creates.