NHL Standings (Original)

by Michael Mandarino

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<table id="tbl-contest" class="table table-sm table-bordered table-hover table-striped" >
    <thead class="thead-dark">
        <tr>
            <th class="hidden">
            </th>
            <th class="hidden">
            </th>
            <th colspan="2">
                Division 1
            </th>
            <th colspan="2">
                Division 2
            </th>
            <th colspan="2">
                Division 3
            </th>
            <th colspan="4">
                Division 4
            </th>
            <th colspan="4">
                Division 5
            </th>
            <th colspan="4">
                Division 6
            </th>
            <th colspan="2">
                Bonus
            </th>
        </tr>
        <tr>
            <th>
                Player
            </th>
            <th>
                Score
            </th>

            <th>
                Team
            </th>
            <th>
                PTS
            </th>
            <th>
                Team
            </th>
            <th>
                PTS
            </th>
            <th>
                Team
            </th>
            <th>
                PTS
            </th>
            <th>
                Team
            </th>
            <th>
                PTS
            </th>
            <th>
                Team
            </th>
            <th>
                PTS
            </th>
            <th>
                Team
            </th>
            <th>
                PTS
            </th>
            <th>
                Team
            </th>
           ...

SCSS

table.table {
    margin: 0;

    thead,
    tbody {
        tr{
            th,td{
                padding: 4px;
                text-align: center; 
                vertical-align: middle;

                &.hidden {
                    visibility: hidden;
                }
            }

        }
    }
    thead {
        &.thead-dark{
            th {
                background-color: #61bb46;
                border-color: #4d9537;
            }
        }
    }
    tbody {
        tr {
            &:hover{
                background-color: #00afba;
            }
            &.active {
                background-color: #000;
                color: #fff;
            }
            td {
                &.player {
                    font-weight: bold;
                    min-width: 120px;
                }
                &.score {
                    border-left-width: 2px;
                    font-weight: bold;
                    min-width: 75px;
                }
            }
        }
    }

    &#tbl-contest {
        tr {
            td.team {
                border-left-width: 2px;
                min-width: 85px;
                height: 50px;
            }
        }
    }
    &#tbl-stats {
        tr {
            th.team {
                min-width: 175px;
            }
        }
    }
}

table.dataTable thead .sorting {
    background-image: none;
}

JavaScript

var request = new XMLHttpRequest();
//https://stackoverflow.com/questions/46503558/how-to-use-multiple-xmlhttprequest
request.open('GET', 'https://statsapi.web.nhl.com/api/v1/standings/byLeague', true);

request.onload = function() {

    // Begin accessing JSON data here
    var data = JSON.parse(this.response);

    if (request.status >= 200 && request.status < 400) {
        var totalGames = 82;
        var objTeamRecords = data.records[0].teamRecords;

        $.each(objTeamRecords, function(index, stats) {
            var trO = "<tr>";
            var trC = "</tr>"
            var tdO = "<td>";
            var tdC = "</td>";
            var id = stats.team.id;
            var team = stats.team.name;
            var rank = parseInt(stats.leagueRank);
            var wins = stats.leagueRecord.wins;
            var losses = stats.leagueRecord.losses;
            var ot = stats.leagueRecord.ot;
            var points = stats.points;
            var streak = stats.streak.streakCode;
            var gPlayed = stats.gamesPlayed;
            var gRemaing = parseInt(totalGames - stats.gamesPlayed);

            if (rank === 99) {
                rank = "--"
            }

            //STANDINGS - OVERALL
            $('table#tbl-stats tbody').append('<tr id="teamid-' + id + '">' + tdO + rank + tdC + '<td class="team-name">' + team + /*' - ' + id +*/ tdC + '<td class="team-points">' + points + tdC + tdO + wins + tdC + tdO + losses + tdC + tdO + ot + tdC + tdO + streak + tdC + tdO + gPlayed + tdC + tdO + gRemaing + tdC + trC);
        });

        //Set Contest Fields
        $('#tbl-contest tbody tr.player-wrp').each(function() {
            var totalScore = 0;

            //Teams
            $(this).find('td.team').each(function() {
                var pickID = $(this).attr('class').split('teamid-').pop().split(' ')[0];
                var pickTeam = $('#tbl-stats tbody').find('tr#teamid-' + pickID).find('td.team-name').text();

                var pickTeamShort =...