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

ProjectSourceCode/src/resources/css/league-page/league-table.css

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

ProjectSourceCode/src/resources/routes/club-pages/redirect-to-club-url.js

@@ -1,5 +1,5 @@
 // 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) => {
       // Get the club ID from the clicked club logo's clubID attribute
       const clubId = element.getAttribute('clubID');

ProjectSourceCode/src/views/pages/leagues-page.hbs

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