The Booking Form

The visitor has picked their seats. Now they book them: they type their name and email, and the cinema keeps the seats for them. They'll pay at the box office, as the page says. Add a form to the seat picker, below #summary:

<form id="booking-form" novalidate>
    <p>
        <label for="name">Name</label>
        <input id="name">
        <span id="name-error" class="error"></span>
    </p>
    <p>
        <label for="email">Email</label>
        <input id="email" type="email">
        <span id="email-error" class="error"></span>
    </p>
    <p id="seats-error" class="error"></p>
    <button type="submit">Book</button>
</form>
<p id="confirmation"></p>

As in the Sign-Up Form checkpoint, novalidate tells the browser not to check the email by itself, because your script does the checking. And in style.css, give .error a red color. The seats aren't in the form, and that matters: a button inside a form sends the form when it's clicked.

The checks are the ones you know from the lesson Events and Forms: stop the page from loading again, trim the fields, and show each problem next to its field, all at once. One check is new: a booking without seats makes no sense.

The booking. When everything is right, keep the booking in an array, bookings, as an object with the showtime's id, the name, the email and the seats, for example:

{ showtimeId: 1, name: "Anna", email: "anna@example.com", seats: ["C6", "C7"] }

From then on, the booked seats are taken. A seat is taken when it's in the showtime's taken, or in the seats of a booking for the same showtime. This function tells you, with some():

function isTaken(seat) {
    if (chosenShowtime.taken.includes(seat)) {
        return true;
    }
    return bookings.some((booking) => booking.showtimeId === chosenShowtime.id && booking.seats.includes(seat));
}

Use it in showSeats() instead of chosenShowtime.taken.includes(seat).