Choosing a Showtime

Now for the main part: tickets. Each row of the table gets a button, Choose seats. Clicking it opens a seat picker below the table, with the day, time and film in its heading. In this exercise, you'll add the seat picker and open it; the seats themselves come in the next one.

The seat picker is a section of showtimes.html below the table:

<section id="seat-picker" hidden>
    <h2 id="picker-title"></h2>
</section>

The attribute hidden hides an element. A script shows it with seatPicker.hidden = false;, and true hides it again. That's handy for parts of a page that aren't needed yet.

The buttons are created by showShowtimes(), each in a fifth cell of its row. (Add a fifth, empty th to the heading row too, so that the line under the headings also runs above the buttons.) The click handler of each button must know which showtime is in its row. Create it inside the loop, as you did with the favorites in the Film Night checkpoint, and it remembers the showtime from its own iteration of the loop:

button.addEventListener("click", function () {
    chooseShowtime(showtime);
});

The function chooseShowtime() is yours to write: it fills in the heading and shows the seat picker. In the next exercises, it will do more.