Issue #2 solved

src/main/webapp/js/requests.js

@@ -111,4 +111,41 @@ function updateDetailsTrainers(trainerId) {
       </div>
     </div>
     `
+}
+
+
+function createTrainer() {
+    const name = document.getElementById('trainerName').value;
+    const profileUrl = document.getElementById('trainerProfileUrl').value;
+
+    const trainer = {
+        name: name,
+        profileUrl: profileUrl
+    };
+
+    fetch('/pokemon/api/trainers', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(trainer),
+    })
+        .then(response => response.json())
+        .then(data => {
+            console.log('Success:', data);
+            // Refresh the trainers table
+            fetch('/pokemon/api/trainers')
+                .then(res => res.json())
+                .then(data => {
+                    pokemonTrainers = data;
+                    createPokemonTrainersTable();
+                })
+                .catch(err => {
+                    console.error(`Unable to fetch Pokemon Trainers: ${err.status}`);
+                    console.error(err);
+                });
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+        });
 }
\ No newline at end of file

src/main/webapp/trainers.html

@@ -40,5 +40,17 @@
     </div>
 </div>
 
+<form id="createTrainerForm" onsubmit="event.preventDefault(); createTrainer();">
+    <div class="form-group col-md-6">
+        <label for="trainerName">Name</label>
+        <input type="text" class="form-control" id="trainerName" required>
+    </div>
+    <div class="form-group col-md-6">
+        <label for="trainerProfileUrl">Profile URL (optional)</label>
+        <input type="text" class="form-control" id="trainerProfileUrl">
+    </div>
+    <button type="submit" class="btn btn-primary">Create Trainer</button>
+</form>
+
 </body>
 </html>
\ No newline at end of file