sportsru / table-task

Тестовое задание для младшего разработчика пользовательских интерфейсов

#Тестовое задание для младшего разработчика пользовательских интерфейсов

Отобразить на веб-странице турнирную таблицу чемпионата на основе данных, содержащихся в JSON-файле seriea.json. HTML-код таблицы должен формироваться динамически на стороне браузера при загрузке страницы. Внешний вид таблицы должен соответствовать макету.

Таблица должна корректно отображаться в двух последних версиях наиболее распространенных браузеров (Edge, Chrome, Firefox, Safari, iOS Safari).

Не допускается использование фреймворков (таких как Angular, React). Возможно использование DOM-библиотек типа jQuery без дополнительных плагинов. Также допускается использование шаблонизаторов (handlebars, ejs, jade и др.).

Таблица должна занимать всю ширину экрана. При этом все столбцы таблицы, кроме столбца с названием команды, должны иметь фиксированную ширину в соответствии с макетом. Минимальная ширина столбца с названием команды - 150 пикселей.

Таблица должна корректно отображаться на экранах с небольшой шириной. На таких экранах допускается не показывать колонки количества забитых и пропущенных голов, а также колонки количества выигрышей, ничьих и поражений, если таблица не умещается на экране по ширине.

Название команды должно быть оформлено в виде ссылки, ведущей на страницу этой команды (поле tag_url в JSON-файле).

Описание полей в JSON-файле: JSON-файл содержит в себе объект, в котором по ключу teams хранится массив данных о командах турнира. Каждый элемент этого массива является объектом, содержащим следующие поля:

• name - название команды (Команда)

• flag_country - название страны, которую представляет команда

• tag_url - URL страницы команды

• matches - количество сыгранных командой матчей в турнире (М)

• win - количество выигрышей (В)

• draw - количество ничьих (Н)

• lose - количество поражений (П)

• score - количество набранных очков (О)

• goals - количество забитых мячей (Заб)

• conceded_goals - количество пропущенных мячей (Проп)

• place - место команды в турнирной таблице

• color - поле, показывающее, необходимо ли выделять цветом место команды в таблице. Может иметь значения "1" (зелёный), "2" (светло-зелёный), "4" (красный), пустая строка "" (отсутствие выделения).

При наличии свободного времени кандидат может реализовать дополнительный функционал таблицы – сортировку строк таблицы по различным показателям: по месту в таблице, названию (в алфавитном порядке), количеству выигрышей, ничьих, поражений, забитых и пропущенных мячей, очков. Вид и реализация необходимого для осуществления сортировки пользовательского интерфейса остаётся на усмотрение кандидата.

Готовое задание должно быть оформлено в виде репозитория на Github. Дополнительно можно разместить задание на хостинге, например, Github Pages.