The Seats

To keep things simple, both halls of Starlight Cinema, the big one and the small one, have the same seats: five rows, A to E, with eight seats in each row. In the seat picker, each seat will be a button with its row and number on it: A1, A2, and so on, up to E8.

The script creates the buttons in two loops, one inside the other, as in the exercise Nested Loops. The outer loop goes through the rows, and for each row, the inner loop goes through the numbers from 1 to 8:

const seatRows = ["A", "B", "C", "D", "E"];
const seatsInRow = 8;

for (const letter of seatRows) {
    for (let number = 1; number <= seatsInRow; number++) {
        const seat = `${letter}${number}`;
        // Create the button of the seat here...
    }
}

seat is "A1", "A2" and so on, up to "E8".

Write a function showSeats() that draws the seats of the chosen showtime into an empty div with the id seats, which you add to the seat picker below its heading. The function has to know which showtime is chosen, and so will the next exercises. So chooseShowtime() keeps it in a variable, chosenShowtime (null at first), before it calls showSeats().

The seats in the showtime's taken are already sold. They get the class taken, and they mustn't be clickable: set their disabled to true, as you did with the button in the lesson Timers and Waiting. includes() tells you whether a seat is in taken.

The look. Forty buttons one after another would wrap like the words of a paragraph. Lay them out as a grid with eight columns, as in the lesson CSS Grid of the CSS course: repeat(8, 1fr) gives eight columns of the same width.

Typical mistakes:

• Forgetting to empty #seats at the start of showSeats(). Choose another showtime, and its seats are added after the old ones.