assets/js/wordfinder-home.js in word-games-theme-2.4.1 vs assets/js/wordfinder-home.js in word-games-theme-2.4.2

@@ -67,58 +67,54 @@
         })
     })
 })
 
 
-// Define the loadScript function first
-const loadScript = (FILE_URL, data = {}, async = true, type = "text/javascript") => {
+const loadResource = (FILE_URL, data = {}, async = true, type = "text/javascript") => {
     return new Promise((resolve, reject) => {
-        const scriptEle = document.createElement("script");
-        scriptEle.type = type;
-        scriptEle.async = async;
-        scriptEle.src = FILE_URL;
+        let resourceEle;
 
-        // Set additional data as attributes on the script element
+        if (type === "text/javascript") {
+            resourceEle = document.createElement("script");
+        } else if (type === "text/css") {
+            resourceEle = document.createElement("link");
+            resourceEle.rel = "stylesheet";
+        } else {
+            reject({
+                status: false,
+                message: `Unsupported resource type: ${type}`,
+            });
+            return;
+        }
+
+        resourceEle.type = type;
+        resourceEle.async = async;
+        resourceEle.href = FILE_URL;
+
         Object.keys(data).forEach((key) => {
-            scriptEle.setAttribute(`data-${key}`, data[key]);
+            resourceEle.setAttribute(`data-${key}`, data[key]);
         });
 
-        scriptEle.addEventListener("load", () => {
+        resourceEle.addEventListener("load", () => {
             resolve({ status: true });
         });
 
-        scriptEle.addEventListener("error", () => {
+        resourceEle.addEventListener("error", () => {
             reject({
                 status: false,
-                message: `Failed to load the script ${FILE_URL}`,
+                message: `Failed to load the resource ${FILE_URL}`,
             });
         });
 
-        document.body.appendChild(scriptEle);
+        if (type === "text/javascript") {
+            document.body.appendChild(resourceEle);
+        } else if (type === "text/css") {
+            document.head.appendChild(resourceEle);
+        }
     });
 };
 
-// Now you can use the loadScript function with additional data
-function checkQueryParam() {
-    const urlParams = new URLSearchParams(window.location.search);
-    const paramName = 'search';
-    if (urlParams.has(paramName)) {
-        const additionalData = {
-            url: "{{site.url}}",
-            range: "{{page.blanktilerange}}"
-        };
-        var p1 = loadScript("/assets/js/wordfinder.js", additionalData)
-            .then((data) => {
-                console.log(data);
-            })
-            .catch((error) => {
-                console.error(error);
-            });
-    }
-}
-checkQueryParam();
-
 const formElement = document.querySelector("#form");
 formElement.addEventListener("submit", function (e) {
     e.preventDefault();
 
     document.querySelector(".fillterWrapper").classList.add("hide")
@@ -178,21 +174,57 @@
         });
     }
 
     const paramName = 'search';
     if (new URLSearchParams(window.location.search).has(paramName)) {
-        // Additional data to pass to the script
         const additionalData = {
             url: "{{site.url}}",
             range: "{{page.blanktilerange}}"
-        };
-
-        var p1 = loadScript("/assets/js/wordfinder.js", additionalData)
+        }
+        loadResource("/assets/css/wordfinder-result.css", additionalData, true, "text/css")
             .then((data) => {
-                console.log(data);
-                  getData(txtBox.value.toLowerCase());
+                console.log("CSS loaded:", data);
+                // Once the CSS is loaded, create the script element for JavaScript
+                const jsScript = document.createElement("script");
+                jsScript.src = "/assets/js/wordfinder.js";
+                jsScript.onload = () => {
+                    getData(txtBox.value.toLowerCase());
+                };
+                document.body.appendChild(jsScript);
             })
             .catch((error) => {
-                console.error(error);
+                console.error("Error loading resource:", error);
             });
     }
 });
+
+
+
+// Now you can use the loadScript function with additional data
+function checkQueryParam() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const paramName = 'search';
+    if (urlParams.has(paramName)) {
+        const additionalData = {
+            url: "{{site.url}}",
+            range: "{{page.blanktilerange}}"
+        };
+        loadResource("/assets/css/wordfinder-result.css", additionalData, true, "text/css")
+            .then((data) => {
+                console.log("CSS loaded:", data);
+                // Once the CSS is loaded, create the script element for JavaScript
+                const jsScript = document.createElement("script");
+                jsScript.src = "/assets/js/wordfinder.js";
+                jsScript.onload = () => {
+                    console.log("JS loaded");
+                    getData(txtBox.value.toLowerCase());
+                };
+                document.body.appendChild(jsScript);
+            })
+            .catch((error) => {
+                console.error("Error loading resource:", error);
+            });
+    }
+}
+checkQueryParam();
+
+