Modification to table code. Just text and logo are now clickable

This commit is contained in:
Lucas Patenaude
2024-04-14 13:51:27 -06:00
parent 04225ccf1e
commit 386f113607
3 changed files with 11 additions and 4 deletions

View File

@@ -1,5 +1,7 @@
#league-table-container { #league-table-container {
width: 60%; width: 60%;
justify-content: center;
align-items: center;
} }
#standings-table { #standings-table {
@@ -7,9 +9,14 @@
padding: 5px; padding: 5px;
} }
#table-logo { #club-logo {
width: 20px; width: 20px;
margin-right: 5px; margin-right: 5px;
cursor: pointer;
}
#club-name {
cursor: pointer;
} }
#standings-table td { #standings-table td {

View File

@@ -1,5 +1,5 @@
// Add click event listener to club logos // Add click event listener to club logos
document.querySelectorAll('.club-logo').forEach(element => { document.querySelectorAll('#club-logo, #club-name').forEach(element => {
element.addEventListener('click', (event) => { element.addEventListener('click', (event) => {
// Get the club ID from the clicked club logo's clubID attribute // Get the club ID from the clicked club logo's clubID attribute
const clubId = element.getAttribute('clubID'); const clubId = element.getAttribute('clubID');

View File

@@ -32,8 +32,8 @@
{{#each league.standings}} {{#each league.standings}}
<tr> <tr>
<td>{{table.league_position}}</td> <td>{{table.league_position}}</td>
<td><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="club-logo" class="club-logo" clubID="{{table.team_id}}"></td> <td><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="club-logo" clubID="{{table.team_id}}"></td>
<td><p id="club-name">{{table.team_name}}</p></td> <td><span id="club-name">{{table.team_name}}</span></td>
<td>{{games_played}}</td> <td>{{games_played}}</td>
<td>{{wins}}</td> <td>{{wins}}</td>
<td>{{losses}}</td> <td>{{losses}}</td>