Simple NBA MVP Voter

With the NBA All-Star weekend coming up in a couple weeks, I thought it would be fun to design a single page application centered around a simple MVP vote.

The HTML and CSS for this page did not take much time to design. The layout was very simple. The Javascript, however, took a bit more time. After styling the page with HTML and CSS, I used Javascript to pull some elements out of the HTML.

After getting the elements, I was able to add event listeners and begin adding functionality to the page. The first event listener I added was on the “Players” tab.

When the “Players” tab is clicked, it sends a fetch request to the API. What gets returned is an array of the first 25 NBA players listed on this API. This array then goes through a function that builds an HTML element for each player and appends it to the page.

For the “Teams” tab, the fetch request returns the team name, city, conference, and division.

The player element displays the player’s name, team, position, the amount of votes they have, and a vote button. I then added an event listener on the vote button to increase the amount of votes.

The final event listener I added was on the the Submit button above the Player’s list. This event would close the “Players” and ”Teams” tabs, and adds a banner at the bottom of the screen to represent the MVP. The MVP is decided by which player has the highest amount of votes when the “Submit” button is clicked.

Overall, this was a very basic page. After styling with HTML and CSS, the Javascript was fairly simple. To pull up the information on the players and teams, I sent fetch requests to https://www.balldontlie.io/api/v1 and for the submit and vote buttons, I added event listeners that would add functionality to each button. There is still plenty room for improvement for this page, but for now I wanted to put together a simple page that tied together HTML, CSS and Javascript.