Add: function to display exceptions

.vscode/settings.json

@@ -21,7 +21,7 @@
       "**/CVS": true
    },
    "files.autoSave": "afterDelay",
-   "workbench.colorTheme": "Visual Studio Dark",
+   "workbench.colorTheme": "Night Owl Theme",
    "terminal.integrated.gpuAcceleration": "canvas",
    "editor.defaultFormatter": "HookyQR.beautify"
 }

assets/js/script.js

@@ -9,8 +9,22 @@ const resultsModal = new bootstrap.Modal(document.getElementById('resultsModal')
 document.getElementById("status").addEventListener("click", e => getStatus(e));
 document.getElementById("submit").addEventListener("click", e => postForm(e));
 
+function processOptions(form) {
+    let optArray = []; // Create an empty array to hold the options
+
+    for (let entry of form.entries()) {
+        if (entry[0] === "options") {
+            optArray.push(entry[1]); // If the entry is an option, push it to the array
+        }
+    }
+    form.delete("options"); // Delete the options key from the form data
+    form.append("options", optArray.join()); // Append the options array to the form data as a string¨
+
+    return form; // Return the modified form data
+}
+
 async function postForm(e) {
-    const form = new FormData(document.getElementById("checksform")); // Create a new FormData object from the form
+    const form = processOptions(new FormData(document.getElementById("checksform"))); // Create a new FormData object from the form
 
     const response = await fetch(API_URL, {
                         method: "POST",
@@ -25,6 +39,7 @@ async function postForm(e) {
     if (response.ok) {
         displayErrors(data);
     } else {
+        displayException(data); // Display the exception before throwing the error
         throw new Error(data.error);
     }
 }
@@ -58,6 +73,7 @@ async function getStatus(e) {
     if (response.ok) {
         displayStatus(data);
     } else {
+        displayException(data); // Display the exception before throwing the error
         throw new Error(data.error);
     }
 }
@@ -71,4 +87,16 @@ function displayStatus(data) {
     document.getElementById("results-content").innerHTML = results;
 
     resultsModal.show();
+}
+
+function displayException(data) {
+    let heading = `An Exception Occurred`; // Set the heading to the error message
+    results = `<div>The API returned status code as: ${data.status_code}</div>`; // Set the results to the error message
+    results += `<div>Error number: <strong>${data.error_no}</strong></div>`;
+    results += `<div>Error message: <strong>${data.error}</strong></div>`;
+
+    document.getElementById("resultsModalTitle").innerText = heading; // Set the innerText of the resultsModalTitle to the heading
+    document.getElementById("results-content").innerHTML = results; // Set the innerHTML of the results-content div to the results
+    resultsModal.show(); // Show the modal
+
 }