refactored api calls for clarity

app.py

@@ -42,16 +42,17 @@ def serve_monster_sprite(selected_monster):
 def serve_favicon():
     return send_from_directory( '','static/img/favicon.ico')
 
-@app.route("/get_families")
+#API Calls
-def get_families():
+
+@app.route("/api/families")
+def json_families():
     cursor = g.db.cursor()
     cursor.execute("SELECT DISTINCT name FROM families")
     families = [row[0] for row in cursor.fetchall()]
     return jsonify(families)
 
-
+@app.route("/api/monsters")
-@app.route("/get_monsters")
+def json_monsters():
-def get_monsters():
     selected_family = request.args.get("family")
     cursor = g.db.cursor()
 
@@ -69,6 +70,7 @@ def get_monsters():
     monsters = [row[0] for row in cursor.fetchall()]
     return jsonify(monsters)
 
+# Render HTML Templates
 
 @app.route("/monster/<monster_name>")
 def monster_stats(monster_name):

static/js/indexListener.js

@@ -6,7 +6,7 @@ document.addEventListener("DOMContentLoaded", function () {
     updateMonsterDropdownByFamily();
 
     // Fetch families data from the server and populate families dropdown
-    fetch("/get_families")
+    fetch("/api/families")
         .then(response => response.json())
         .then(data => {
             populateDropdown(familyDropdown, data);

static/js/updateMonsterDropdownByFamily.js

@@ -2,7 +2,7 @@ function updateMonsterDropdownByFamily() {
     const selectedFamily = familyDropdown.value;
 
     // Fetch monsters data from the server based on the selected family
-    fetch(`/get_monsters?family=${selectedFamily}`)
+    fetch(`/api/monsters?family=${selectedFamily}`)
         .then(response => response.json())
         .then(data => populateDropdown(monsterDropdown, data))
         .catch(error => console.error("Error fetching monsters:", error));