issue#7 solved

src/main/webapp/js/requests.js

@@ -127,4 +127,22 @@ function createPokemonType() {
     }).then(response => updatePokemonTypesTable())
 }
 
+function deletePokemonType() {
+    let idPokemon = document.getElementById("pokemonId").value;
+    fetch(`/pokemon/api/pokemonTypes/${idPokemon}`, {
+        method: 'DELETE'
+    })
+        .then(response => {
+            if (response.ok) {
+                // Trainer deleted successfully, update UI
+                updatePokemonTypesTable(); // Reload trainer table
+                updateDetails(''); // Clear details panel
+            } else {
+                console.error('Failed to delete Pokemon type:', response.status);
+            }
+        })
+        .catch(error => {
+            console.error('Error deleting Pokemon type:', error);
+        });
+}
 

src/main/webapp/pokemonTypes.html

@@ -33,6 +33,10 @@
 
     <h1>Pokemon Types</h1>
 
+    <br>
+
+    <h4>Create a Pokemon type</h4>
+
     <form id="createPokemonTypeForm" onsubmit="createPokemonType()">
     <div class = "form-group">
             <label for = "pokemonName">Name</label>
@@ -106,7 +110,7 @@
 <!--            <label for = "generation">Generation</label>-->
 <!--            <input type = "text" class = "form-control" id = "generation" required>-->
 <!--        </div>-->
-<!--        <div class = "form-group">-->x
+<!--        <div class = "form-group">-->
 <!--            <label for = "isLegendary">Is Legendary?</label>-->
 <!--            <input type = "text" class = "form-control" id = "isLegendary" required>-->
 <!--        </div>-->
@@ -116,6 +120,19 @@
     <br>
     <br>
 
+    <h4>Delete a Pokemon type</h4>
+
+    <form id = "deletePokemonTypeForm" onsubmit = "deletePokemonType()">
+        <div class = "form-group">
+            <label for = "pokemonId">Pokemon ID</label>
+            <input type = "text" class = "form-control" id = "pokemonId">
+        </div>
+        <button type = "submit" class = "btn btn-primary">Delete Pokemon type</button>
+    </form>
+
+    <br>
+    <br>
+
     <div class="container">
         <div class="row">
             <div id="tableDiv" class="col-8">No data</div>