added dynamic selects in register

ProjectSourceCode/src/resources/css/login_and_registration.css

@@ -38,9 +38,9 @@ body {
 }
 
 /* Apply modern styling to inputs and select elements */
-.form-control,
+#form-control,
 select {
-    width: 100%; /* Make inputs and select elements same width */
+    width: 70%; /* Make inputs and select elements same width */
     padding: 0.375rem 0.75rem; /* Example padding */
     font-size: 1rem; /* Example font size */
     line-height: 1.5; /* Example line height */
@@ -51,6 +51,8 @@ select {
     margin-bottom: 10px; /* Example margin */
 }
 
+
+
 /* Adjust styling for form labels */
 .form-label {
     font-weight: bold; /* Example font weight */
@@ -61,4 +63,3 @@ select {
     margin-top: 10px; /* Example margin */
 }
 
-

ProjectSourceCode/src/resources/js/selectFunctions.js

@@ -0,0 +1,40 @@
+
+document.addEventListener("DOMContentLoaded", function() {
+
+
+    const league_select = document.getElementById('league_dropdown');
+    const team_select = document.getElementById('team_dropdown');
+  
+    league_select.addEventListener('change', updateTeamSelect);
+  
+    function updateTeamSelect() {
+      var selectedLeague = league_select.value;
+      var teamSelect = team_select;
+      
+      // Clear existing options
+      teamSelect.innerHTML = "";
+      
+      // Add options based on the selected value from the first select element
+      if (selectedLeague === "La Liga") {
+        // Add options for La Liga
+        addOption(teamSelect, "Option 1 for LL", "option1A");
+        addOption(teamSelect, "Option 2 for LL", "option2A");
+      } else if (selectedLeague === "Serie A") {
+        // Add options for Serie A
+        addOption(teamSelect, "Team 1 in Serie A", "option1B");
+        addOption(teamSelect, "Team 2 in Serie A", "option2B");
+      } else {
+        // Add options for Bundesliga
+        addOption(teamSelect, "Option 1 for Bun", "option1C");
+        addOption(teamSelect, "Option 2 for Bun", "option2C");
+      }
+    }
+  
+    function addOption(selectElement, text, value) {
+      var option = document.createElement("option");
+      option.text = text;
+      option.value = value;
+      selectElement.add(option);
+    }
+  });
+  

ProjectSourceCode/src/views/pages/register.hbs

@@ -2,49 +2,79 @@
   <div class="register-page">
     <div class="form-container">
       <h1 class="mt-5 mb-4">Register</h1>
-
       <form action="/register" method="POST" class="mt-3">
-
         <div class="mb-3">
           <label for="username" class="form-label">Username:</label>
           <input type="text" class="form-control" id="username" name="username" required>
         </div>
-
         <div class="mb-3">
           <label for="password" class="form-label">Password:</label>
           <input type="password" class="form-control" id="password" name="password" required>
         </div>
-
         <div class="dropdowns">
-          <div id="league_dropdown">
+          <div>
-            <label for="password" class="form-label">Preferred League :</label><br>
+            <label class="form-label">Preferred League :</label><br>
-            <select id="dropdown">
+            <select id="league_dropdown">
               <option value="option1">Premier League</option>
               <option value="option2">La Liga</option>
               <option value="option3">Bundesliga</option>
-              <option value="option3">Serie A</option>
+              <option value="option4">Serie A</option>
-              <option value="option3">Ligue 1</option>
+              <option value="option5">Ligue 1</option>
-              <option value="option3">Brasilerao</option>
+              <option value="option6">Brasilerao</option>
             </select>
           </div>
-
+          <div>
-          <div id="team_dropdown">
+            <label class="form-label">Favorite Team   :</label><br>
-            <label for="password" class="form-label">Favourite Team   :</label><br>
+            <select id="team_dropdown">
-            <select id="dropdown">
-              <option value="option1">Premier League</option>
-              <option value="option2">La Liga</option>
-              <option value="option3">Bundesliga</option>
-              <option value="option3">Serie A</option>
-              <option value="option3">Ligue 1</option>
-              <option value="option3">Brasilerao</option>
             </select>
           </div>
         </div>
-
         <button type="submit" class="btn btn-primary">Submit</button>
       </form>
-
       <p class="mt-3">Already have an account? <a href="/login">Login</a></p>
     </div>
   </div>
+  <script>
+    
+document.addEventListener("DOMContentLoaded", function() {
+
+
+    const league_select = document.getElementById('league_dropdown');
+    const team_select = document.getElementById('team_dropdown');
+  
+    league_select.addEventListener('change', updateTeamSelect);
+  
+    function updateTeamSelect() {
+      var selectedLeague = league_select.value;
+      var teamSelect = team_select;
+      
+      // Clear existing options
+      teamSelect.innerHTML = "";
+      
+      // Add options based on the selected value from the first select element
+      if (selectedLeague === "La Liga") {
+        // Add options for La Liga
+        addOption(teamSelect, "Option 1 for LL", "option1A");
+        addOption(teamSelect, "Option 2 for LL", "option2A");
+      } else if (selectedLeague === "Serie A") {
+        // Add options for Serie A
+        addOption(teamSelect, "Team 1 in Serie A", "option1B");
+        addOption(teamSelect, "Team 2 in Serie A", "option2B");
+      } else {
+        // Add options for Bundesliga
+        addOption(teamSelect, "Option 1 for Bun", "option1C");
+        addOption(teamSelect, "Option 2 for Bun", "option2C");
+      }
+    }
+  
+    function addOption(selectElement, text, value) {
+      var option = document.createElement("option");
+      option.text = text;
+      option.value = value;
+      selectElement.add(option);
+    }
+  });
+  
+  </script>
 </body>
+