solution to exercise 2

src/main/webapp/TrainerData.html

@@ -39,6 +39,11 @@
             <div id="detailsDiv" class="col-4">No data</div>
         </div>
     </div>
+    <form id="Form">
+        <label for="name">name:</label><br>
+        <input type="text" id="name" name="name" value=""><br>
+        <input type="submit" value="Submit" onclick="submitForm()">
+    </form>
 
 </body>
 </html>
\ No newline at end of file

src/main/webapp/js/requests.js

@@ -111,20 +111,29 @@ function createPokemonTypesTable() {
             </tbody>
         </table>
     `
+
+}
+function submitForm() {
+    let name = document.getElementById("name").value;
+    let trainer = {name: name,
+    created : new Date().toISOString(), id: Math.random *100, lastUpDate: new Date().toISOString(), profileUrl: "https://www.google.com"};
+    fetch('/pokemon/api/trainers', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(trainer)
+    })
+        .then(res => res.json())
+        .then(data => {
+            console.log(data);
+            trainers.push(data);
+            createTrainerTable();
+        })
+        .catch(err => {
+            console.error(`unable to create trainer: ${err.status}`);
+            console.error(err);
+        });
+
+
 }
-// function addTrainer() {
-//     // Retrieve trainer details from the form
-//     var trainerName = document.getElementById("trainerName").value;
-//     var trainerID = document.getElementById("trainerID").value;
-//
-//     // Create a new row in the table with the trainer details
-//     var newRow = "<tr><td>" + trainerName + "</td><td>" + trainerID + "</td></tr>";
-//     document.getElementById("tableDiv").innerHTML += newRow;
-//
-//     // Clear the form fields
-//     document.getElementById("trainerName").value = "";
-//     document.getElementById("trainerID").value = "";
-//
-//     // Close the modal
-//     $('#addTrainerModal').modal('hide');
-// }
\ No newline at end of file