English Premier League Table - Final Project

A Table displaying the current standings of the English Premier League using Bootstrap and Vue

League Standings

Position Club Played Won Drawn Lost GF GA GD Home Record Away Record Points
{{ team.position }} {{ team.team }} {{ team.GP }} {{ team.W }} {{ team.D }} {{ team.L }} {{ team.GF }} {{ team.GA }} {{ team.GD }} {{ team.Home }} {{ team.Away }} {{ team.Points }}

Automatic qualification for the Champions League

Entry into qualifying rounds of the Champions League

Relegation to the Championship (2nd division)


The Skeleton of this site was created from a free Bootstrap template called Freelancer. I kept the basic organizational structure and some of the stylistic elements and then removed much of the built in content to give myself room to make my table.

The table itself is built dynamically using Vue to read data originally from a JSON file I created. Using Vue also allowed me to bind styles to specific classes and assign these classes, again dynamically, to individually rows based on (in this case) their current league position. This allowed me to color code the table to make it easier to understand.

Video Explainer