Port changed back to 3000

ProjectSourceCode/docker-compose.yaml

@@ -29,7 +29,7 @@ services:
     depends_on:
       - db
     ports:
-      - '3000:3001'
+      - '3000:3000'
     volumes:
       - ../ProjectSourceCode:/home/node/app  # Mount ProjectSourceCode directory
       - ../ProjectSourceCode/node_modules:/home/node/app/node_modules  # Mount node_modules directory

ProjectSourceCode/src/index.js

@@ -88,6 +88,15 @@ app.use(fetchMatchesData);
 const convert_time = require('./resources/js/navigation-bar/scoreboard-header/convert-time');
 app.use(convert_time);
 
+/************************ 
+ Homepage Routes
+*************************/
+
+const { app, redirectToLeaguePage } = require('ProjectSourceCode/src/resources/js/homepage/create-league-routes.js');
+
+// Serve static files
+app.use(express.static('public'));
+
 
 /************************ 
  Login Page Routes
@@ -175,5 +184,5 @@ app.get('/', (req, res) => {
 // <!-- Section 5 : Start Server-->
 // *****************************************************
 // starting the server and keeping the connection open to listen for more requests
-app.listen(3001);
+app.listen(3000);
 console.log('Server is listening on port 3000');

ProjectSourceCode/src/resources/js/homepage/create-league-routes.js

@@ -1,18 +1,25 @@
+// create-league-routes.js
+
 const express = require('express');
-const app = express();
 const exphbs = require('express-handlebars');
 
+const app = express();
+
 app.engine('hbs', exphbs({ extname: '.hbs' }));
 app.set('view engine', 'hbs');
 
+// Define the redirectToLeaguePage function
+function redirectToLeaguePage(leagueName) {
+    window.location.href = '/views/pages/league-page/league-page.hbs?leagueName=' + encodeURIComponent(leagueName);
+}
+
 // Define a route to render the league-page.hbs template
 app.get('/league-page/:leagueName', (req, res) => {
   const leagueName = req.params.leagueName;
   // Here you might fetch data related to the clicked league
   // Pass the data to the template and render it
-  res.render('league-page', { leagueName });
+  res.render('league-page/league-page', { leagueName });
 });
 
-app.listen(3000, () => {
-  console.log('Server is running on http://localhost:3000');
-});
+// Export the app and redirectToLeaguePage function
+module.exports = { app, redirectToLeaguePage };

ProjectSourceCode/src/views/pages/home.hbs

@@ -1,37 +1,27 @@
-  <div class="container mt-5">
-    <h1 class="mb-4 underlined-header">Leagues</h1>
+<div class="container mt-5">
+    <h1 class="mb-4 underlined-header" id="leagues-header">Leagues</h1>
     <div class="card-container">
-      <div class="row g-3">
-        
-        <!-- 🇬🇧 Premier League -->
-        <a href="league-page.hbs" class="card-link">
-          {{> homepage/league-card leagueName="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png"}}
-        </a>
-        
-        <!-- 🇪🇸 La Liga -->
-        {{> homepage/league-card leagueName="La Liga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
-        
-        <!-- 🇩🇪 Bundesliga -->
-        {{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
-        
-        <!-- 🇮🇹 Serie A -->
-        {{> homepage/league-card leagueName="Serie A" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
-        
-        <!-- 🇫🇷 Ligue 1 -->
-        {{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
-        
-        <!-- 🇧🇷 Brasilerao -->
-        {{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
-        
-        /* Script to generate league URLs */
-        <script>
-          function redirectToLeaguePage(leagueName) 
-          {
-            window.location.href = '/league-page/' + encodeURIComponent(leagueName);
-          }
-        </script>
-      </div>
+        <div class="row g-3" id="card-row">
+            <!-- 🇬🇧 Premier League -->
+            <a href="#" onclick="redirectToLeaguePage('Premier League')" class="card-link">
+                {{> homepage/league-card leaguename="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png"}}
+            </a>
+
+            <!-- 🇪🇸 La Liga -->
+            {{> homepage/league-card leagueName="La Liga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+
+            <!-- 🇩🇪 Bundesliga -->
+            {{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+
+            <!-- 🇮🇹 Serie A -->
+            {{> homepage/league-card leagueName="Serie A" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+
+            <!-- 🇫🇷 Ligue 1 -->
+            {{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+
+            <!-- 🇧🇷 Brasileirao -->
+            {{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
+            
+        </div>
     </div>
-  </div>
-
-
+</div>

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

@@ -0,0 +1 @@
+<h1>Hello</h1>