now getting the categoryName via the api

src/main/resources/static/js/headings/headings.js

 // get category from url params
 const urlParams = new URLSearchParams(window.location.search);
 const categoryId = window.location.pathname.split('/')[2];  // Assuming /categories/{id}
-const categoryName = urlParams.get('categoryName');
+let categoryName = "";
 
 // fetch category headings from api
 const apiUrl = '/getInfoByCategoryId';
 
+async function getCategoryName(){
+    try{
+        const response = await fetch(`/api/categories/${categoryId}`)
+        if (!response.ok) throw new Error (`Http error! status: ${response.status}`)
+
+        const category = await response.json()
+        categoryName = category.categoryTitle;
+        console.log('Category Name:', categoryName);
+    } catch (error) {
+        console.error('Error fetching category', error);
+    }
+}
+
 async function fetchCategoryHeadings() {
     try {
         const response = await fetch(`${apiUrl}/${categoryId}`);
@@ -33,9 +46,6 @@ function renderHeadings(headings) {
         const title = document.createElement('h2')
         title.innerHTML = `<i class="bi bi-file-earmark-text"></i> ${heading.infoTitle} `
 
-        // const description = document.createElement('p');
-        // description.textContent = heading.description
-
         const link = document.createElement('a')
         link.href = `/info/${heading.informationId}`;
         link.classList.add('heading-link');
@@ -47,19 +57,19 @@ function renderHeadings(headings) {
         link.appendChild(readMore);
 
         listItem.appendChild(title)
-        // listItem.appendChild(description)
         listItem.appendChild(link)
         container.appendChild(listItem)
     });
 }
 
-// change the title of the page bases on category
+async function init() {
+    await getCategoryName();
+    // change the title of the page based on category
     document.getElementById('category-name').textContent = categoryName ? `${categoryName}` : 'Category Name Not Found';
 
     // Fetch and render the category headings when the page loads
     fetchCategoryHeadings();
 
-
     // Get the category id from the url
     function getCategoryIdFromUrl() {
         const path = window.location.pathname;
@@ -80,7 +90,6 @@ function generateAddInfoPageUrl() {
 
     generateAddInfoPageUrl();
 
-
     // Function to toggle edit mode to enable multi-select for deletion
     function toggleEditMode() {
         const container = document.getElementById('headings-container');
@@ -188,3 +197,6 @@ async function deleteSelectedItems() {
     // Attach event listeners to toggle edit button and perform deletion
     document.getElementById('edit-mode-button').addEventListener('click', toggleEditMode);
     document.getElementById('delete-button').addEventListener('click', deleteSelectedItems);
+}
+
+init();