#Тестовое задание для младшего разработчика пользовательских интерфейсов
Отобразить на веб-странице турнирную таблицу чемпионата на основе данных, содержащихся в 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.