added family and location update js

static/js/indexListener.js

@@ -22,5 +22,7 @@ document.addEventListener("DOMContentLoaded", function () {
         updateIframes();
         updateMonsterStats();
         updateMonsterName();
+        updateMonsterFamily();
+        updateMonsterLocation();
     });
 });

static/js/updateMonsterFamily.js

@@ -0,0 +1,16 @@
+function updateMonsterFamily() {
+    // Get the selected monster from the dropdown
+    var selectedMonster = document.getElementById("monsterDropdown").value;
+
+    // Make an API request to get the stats for the selected monster
+    fetch(`/api/monster/stats?monster=${selectedMonster}`)
+      .then(response => response.json())
+      .then(data => {
+        // Update the HTML content with the monster family
+        var familyContainer = document.getElementById("monsterFamilyContainer");
+        familyContainer.innerHTML = `<h2>${data.Family}</h2>`;
+      })
+      .catch(error => {
+        console.error("Error fetching monster family:", error);
+      });
+  }

static/js/updateMonsterLocation.js

@@ -0,0 +1,23 @@
+function updateMonsterLocation() {
+  // Get the selected monster from the dropdown
+  var selectedMonster = document.getElementById("monsterDropdown").value;
+
+  // Make an API request to get the stats for the selected monster
+  fetch(`/api/monster/stats?monster=${selectedMonster}`)
+    .then(response => response.json())
+    .then(data => {
+      // Check if location is not null before updating HTML content
+      if (data.Location !== null) {
+        // Update the HTML content with the monster location
+        var locationContainer = document.getElementById("monsterLocationContainer");
+        locationContainer.innerHTML = `<h2>${data.Location}</h2>`;
+      } else {
+        // Handle the case when location is null (optional)
+        var locationContainer = document.getElementById("monsterLocationContainer");
+        locationContainer.innerHTML = "";  // Clear the content or provide a default message
+      }
+    })
+    .catch(error => {
+      console.error("Error fetching monster location:", error);
+    });
+}

templates/app.html

@@ -33,19 +33,19 @@
     <!-- Monster name will be displayed here -->
   </div>
 
+  <div id="monsterFamilyContainer">
+    <!-- Monster Family will be displayed here-->
+  </div>
+  
   <div id="monsterStatsContainer">
     <!-- Monster stats will be displayed here -->
   </div>
   
   <div id="monsterLocationContainer">
-    <!-- Monster Location will be displayed here
+    <!-- Monster Location will be displayed here-->
-    TODO Add location to stats api -->
   </div>
 
-  <div id="monsterFamilyContainer">
+
-    <!-- Monster Family will be displayed here
-    TODO Add family to stats api -->
-  </div>
 
 
   <div class="grid items-center justify-center grid-cols-1 ml-4">