Форма бронирования

Посетитель выбрал места. Теперь он бронирует их: вводит имя и email, а кинотеатр оставляет места за ним. Платить нужно будет в кассе, как сказано на странице. Добавьте в выбор мест форму под #summary:

<form id="booking-form" novalidate>
    <p>
        <label for="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">Забронировать</button>
</form>
<p id="confirmation"></p>

Как в мини-проекте «Форма регистрации», novalidate говорит браузеру не проверять email самому, потому что проверку делает ваш скрипт. А в style.css задайте .error красный цвет. Места не входят в форму, и это важно: button внутри формы отправляет форму при нажатии.

Проверки те же, что вы знаете из урока «События и формы»: не давайте странице загрузиться заново, обрезайте лишние пробелы в полях и показывайте каждую проблему рядом с её полем, все сразу. Одна проверка новая: бронирование без мест не имеет смысла.

Бронирование. Когда всё верно, храните бронирование в массиве bookings: объект с id сеанса, именем, email и местами, например:

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

С этого момента забронированные места считаются занятыми. Место занято, если оно есть в taken сеанса или в местах бронирования на тот же сеанс. Это подскажет функция с методом some():

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

Используйте её в showSeats() вместо chosenShowtime.taken.includes(seat).