Showtimes from a File

Welcome back to Starlight Cinema! Its website is online, but the showtimes page is still like a poster on the wall: the five rows of its table are written by hand in the HTML, and whenever the schedule changes, someone has to rewrite the page. In this project, you'll bring the page to life with the JavaScript you've learned. The showtimes will come from a data file, the visitor will choose a day, pick seats in the hall and book them with a form, and the page will remember their tickets.

The files. The editor has your website: showtimes.html, index.html and style.css. The preview shows showtimes.html, the first page, and its links take you to the home page and back. Two files are new. script.js is still empty, and showtimes.html already loads it at the end of its body. showtimes.json holds the showtimes: an array of objects like this one:

{
    "id": 1,
    "day": "Friday",
    "time": "5:30 pm",
    "film": "Robots on Vacation",
    "hall": "Small hall",
    "price": 9,
    "taken": ["A1", "A2", "C4", "C5"]
}

Besides what the table shows, each showtime has a number (id), the price of one ticket in dollars (price) and the seats that are already sold (taken). You'll need them later in the project.

The table. The script will draw the rows of the table, so it needs a place for them that it can empty and fill again without touching the heading row. HTML has two elements for the parts of a table: thead (table head) holds the heading row, and tbody (table body) holds the rows with data. The table looks the same with them:

<table>
    <thead>
        <tr>
            <th>Day</th>
            <th>Time</th>
            <th>Film</th>
            <th>Hall</th>
        </tr>
    </thead>
    <tbody id="showtime-rows"></tbody>
</table>

For each showtime, the script creates a tr with a td for each column and appends it to the tbody, just as you created list items in the JavaScript course. Four cells in each row would mean the same three lines four times, so write a function for them:

function addCell(row, text) {
    const cell = document.createElement("td");
    cell.textContent = text;
    row.append(cell);
}

A tip: as in the Film Night checkpoint, keep the showtimes in a variable, and draw the table with a function, showShowtimes(). In the next exercises, the table will change, and you'll call the function again.