Расписание из файла

С возвращением в «Звёздный свет»! Сайт кинотеатра уже в интернете, но страница с расписанием пока похожа на афишу на стене: пять строк её таблицы вписаны в HTML вручную, и каждый раз, когда расписание меняется, кому-то приходится переписывать страницу. В этом проекте вы оживите страницу с помощью JavaScript, который уже знаете. Расписание будет приходить из файла с данными, посетитель выберет день, займёт места в зале и забронирует их с помощью формы, а страница запомнит его билеты.

Файлы. В редакторе лежит ваш сайт: showtimes.html, index.html и style.css. В предпросмотре открыта первая страница, showtimes.html, а её ссылки ведут на главную страницу и обратно. Два файла новые. script.js пока пустой, а showtimes.html уже подключает его в конце body. В showtimes.json хранится расписание: массив объектов вроде этого:

{
    "id": 1,
    "day": "Пятница",
    "time": "17:30",
    "film": "Роботы в отпуске",
    "hall": "Малый зал",
    "price": 450,
    "taken": ["A1", "A2", "C4", "C5"]
}

Кроме того, что показывает таблица, у каждого сеанса есть номер (id), цена одного билета в рублях (price) и места, которые уже проданы (taken). Они понадобятся позже в проекте.

Таблица. Скрипт будет рисовать строки таблицы, поэтому ему нужно место для них, которое можно очистить и заполнить заново, не трогая строку заголовков. В HTML для частей таблицы есть два элемента: thead (голова таблицы) содержит строку заголовков, а tbody (тело таблицы) — строки с данными. С ними таблица выглядит так же:

<table>
    <thead>
        <tr>
            <th>День</th>
            <th>Время</th>
            <th>Фильм</th>
            <th>Зал</th>
        </tr>
    </thead>
    <tbody id="showtime-rows"></tbody>
</table>

Для каждого сеанса скрипт создаёт tr с td для каждого столбца и добавляет его в tbody, точно так же, как вы создавали элементы списка в курсе JavaScript. Четыре ячейки в каждой строке означали бы одни и те же три строки кода четыре раза, поэтому напишите для них функцию:

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

Совет: как в мини-проекте «Киновечер», храните сеансы в переменной, а таблицу рисуйте функцией showShowtimes(). В следующих упражнениях таблица будет меняться, и вы будете вызывать функцию снова.