Updates league page routes to use league ID instead of name

ProjectSourceCode/src/resources/routes/league-pages/generate-league-routes.js

@@ -6,12 +6,12 @@ const app = express();
 // Define a function to generate league routes
 module.exports = function generateLeagueRoutes(app) {
     // Define a route to handle requests to "/league/:leagueName"
-    app.get('/league/:leagueName', (req, res) => {
+    app.get('/league/:leagueID', (req, res) => {
         // Extract the league name from the URL parameters
-        const leagueName = req.params.leagueName;
+        const leagueID = req.params.leagueID;
 
         // Render the league page template using Handlebars
-        res.render('pages/league-page', { leagueName: leagueName });
+        res.render('pages/league-page', { leagueID: leagueID });
     });
 };
 

ProjectSourceCode/src/views/pages/home.hbs

@@ -3,32 +3,32 @@
     <div class="card-container">
         <div class="row g-3" id="card-row">
             <!-- 🇬🇧 Premier League -->
-            <a href="#" onclick="redirectToLeaguePage('Premier League')" class="card-link" id="league-card">
+            <a href="#" onclick="redirectToLeaguePage('2021')" class="card-link" id="league-card">
                 {{> homepage/league-card leagueName="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png"}}
             </a>
 
             <!-- 🇪🇸 La Liga -->
-            <a href="#" onclick="redirectToLeaguePage('La Liga')" class="card-link" id="league-card">
+            <a href="#" onclick="redirectToLeaguePage('2014')" class="card-link" id="league-card">
                 {{> homepage/league-card leagueName="La Liga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
             </a>
 
             <!-- 🇩🇪 Bundesliga -->
-            <a href="#" onclick="redirectToLeaguePage('Bundesliga')" class="card-link" id="league-card">
+            <a href="#" onclick="redirectToLeaguePage('2002')" class="card-link" id="league-card">
                 {{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/bundesliga/icon.png" title="./img/homepage/bundesliga/title.png"}}
             </a>
 
             <!-- 🇮🇹 Serie A -->
-            <a href="#" onclick="redirectToLeaguePage('Serie A')" class="card-link" id="league-card">
+            <a href="#" onclick="redirectToLeaguePage('2019')" class="card-link" id="league-card">
                 {{> homepage/league-card leagueName="Serie A" logo="./img/homepage/serie-a/icon.png" title="./img/homepage/serie-a/title.png"}}
             </a>
 
             <!-- 🇫🇷 Ligue 1 -->
-            <a href="#" onclick="redirectToLeaguePage('Ligue 1')" class="card-link" id="league-card">
+            <a href="#" onclick="redirectToLeaguePage('2015')" class="card-link" id="league-card">
                 {{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/ligue-1/icon.png" title="./img/homepage/ligue-1/title.png"}}
             </a>
 
             <!-- 🇧🇷 Brasileirao -->
-            <a href="#" onclick="redirectToLeaguePage('Brasileirao')" class="card-link" id="league-card">
+            <a href="#" onclick="redirectToLeaguePage('2013')" class="card-link" id="league-card">
                 {{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/brasileirao/icon.png" title="./img/homepage/brasileirao/title.png"}}
             </a>
 

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

@@ -2,7 +2,7 @@
 
     <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
     <div class="container" id="league-information-container">
-
+        <img src="{{ leagues.competition.league_emblem }}" alt="League Emblem">
     </div>
 
     <!-- Container to display all stats for league <- bottom rest of the container -->