Author: | jrobind |
---|---|
Views Total: | 3,999 views |
Official Page: | Go to website |
Last Update: | May 12, 2020 |
License: | MIT |
Preview:

Description:
soccer.js is a JavaScript library that helps you dynamically generate a sortable, expandable, responsive football league table using plain JavaScript.
How to use it:
1. Load the necessary JavaScript and CSS files in the document.
<link rel="stylesheet" href="dist/styles/soccer.min.css" /> <script src="dist/scripts/soccer.min.js"></script>
2. Create an empty container to hold the football league table.
<div class="league-table"></div>
3. Add teams to the league table.
soccer.addTeam(['Team 1', 'Team 2', 'Team 3', ...);
4. Specify the stats for each team.
- played
- won
- drawn
- lost
- scored
- conceded
- goalDiff
- points
- position – represents league position
soccer.updateTeam([{ name: 'Team 1', played: 10, won: 3, drawn: 1, lost: 6, scored: 21, conceded: 24, points: 10 },{ name: 'Team 2', played: 10, won: 2, drawn: 2, lost: 6, scored: 15, conceded: 20, points: 6 }, { name: 'Team 3', played: 11, won: 10, drawn: 1, lost: 0, scored: 28, conceded: 6, points: 31 }]);
5. Render a football league table on the webpage and auto-sort and sort the teams.
soccer.renderLeague({ leagueName: 'CSSScript League' });
6. Collapse teams from a specific place and display a toggle button at the bottom of the league table.
soccer.renderLeague({ leagueName: 'CSSScript League', dropdown: 5 });
7. Set a promotion and relegation zone.
soccer.renderLeague({ leagueName: 'CSSScript League', zones: [1, 8] });
8. Resort the league table manually.
soccer.sort();
9. Swap teams.
soccer.override([1, 2]);
10. Remove a team from the league table.
soccer.deleteTeam('Team 2');