update images to match with api response

web/encounter.js

@@ -17,17 +17,31 @@ document.getElementById('terrainForm').addEventListener('submit', function(event
         //Handle null encounter
         let encounterText = json.encounter ? json.encounter : "No Encounter";
         let resultSection = document.getElementById('resultSection');
-        resultSection.style.textAlign = 'center'; // To center text
-        resultSection.style.fontSize = '1.5em'; // Relative to current font-size (1.5 times the size of the current font)
-        resultSection.style.fontWeight = 'bold'; //To make it bold like H3
-        resultSection.innerText = encounterText;
+        resultSection.innerHTML = '';
+
+        // Create an image element and set its src to the corresponding jpeg image
+        let imgElement = document.createElement("img");
+        imgElement.alt = encounterText;
+        imgElement.width = 500; // You can set width as per your choice
+        imgElement.height = 500; // You can set height as per your choice
+        imgElement.onerror = function() {
+            this.onerror=null;
+            this.src='./img/404.jpg';
+        }
+        imgElement.src = "./img/" + encounterText + ".jpg";
+
+        // Append the image element to the resultSection
+        resultSection.appendChild(imgElement);
     }).catch(err => {
         err.text().then(errorMessage => {
+            let imgElement = document.createElement("img");
+            imgElement.src = "./img/404.jpg";
+            imgElement.width = 500;
+            imgElement.height = 500;
+
             let resultSection = document.getElementById('resultSection');
-            resultSection.style.textAlign = 'center';
-            resultSection.style.fontSize = '1.5em';
-            resultSection.style.fontWeight = 'bold';
-            resultSection.innerText = errorMessage;
+            resultSection.innerHTML = '';
+            resultSection.appendChild(imgElement);
         })
     });
 });