Через пару недель уик-энд NBA All-Star, и я подумал, что было бы забавно разработать одностраничное приложение, основанное на простом голосовании за MVP.
Разработка HTML и CSS для этой страницы не заняла много времени. Планировка была очень простой. Однако Javascript занял немного больше времени. После оформления страницы с помощью HTML и CSS я использовал Javascript, чтобы извлечь некоторые элементы из HTML.
Получив элементы, я смог добавить прослушиватели событий и приступить к добавлению функциональности на страницу. Первый прослушиватель событий, который я добавил, находился на вкладке «Игроки».
При нажатии на вкладку «Игроки» он отправляет запрос на выборку в API. Возвращается массив первых 25 игроков НБА, перечисленных в этом API. Затем этот массив проходит через функцию, которая создает элемент HTML для каждого игрока и добавляет его на страницу.
Для вкладки «Команды» запрос на выборку возвращает название команды, город, конференцию и подразделение.
Элемент player отображает имя игрока, команду, позицию, количество голосов, которые у него есть, и кнопку голосования. Затем я добавил прослушиватель событий на кнопку голосования, чтобы увеличить количество голосов.
Последний прослушиватель событий, который я добавил, находился на кнопке «Отправить» над списком проигрывателя. Это событие закроет вкладки «Игроки» и «Команды» и добавит баннер внизу экрана, представляющий MVP. MVP определяется по тому, какой игрок набрал наибольшее количество голосов при нажатии кнопки «Отправить».
В целом, это была очень простая страница. После стилизации с помощью HTML и CSS Javascript стал довольно простым. Чтобы получить информацию об игроках и командах, я отправил запросы на выборку на https://www.balldontlie.io/api/v1, а для кнопок отправки и голосования я добавил прослушиватели событий, которые добавили бы функциональности каждой кнопке. . Для этой страницы еще есть много возможностей для улучшения, но сейчас я хотел собрать простую страницу, которая связала бы HTML, CSS и Javascript.
