English Premier League Table - Final Project
A Table displaying the current standings of the English Premier League using Bootstrap and Vue
A Table displaying the current standings of the English Premier League using Bootstrap and Vue
| 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.