diff --git a/web/encounter.html b/web/encounter.html
new file mode 100644
index 0000000..700ce92
--- /dev/null
+++ b/web/encounter.html
@@ -0,0 +1,29 @@
+
+
+
+
+ Gamma World Game Play
+
+
+
+ Gamma World Encounter Check
+Choose Terrain Being Traverse
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/encounter.js b/web/encounter.js
new file mode 100644
index 0000000..6a497db
--- /dev/null
+++ b/web/encounter.js
@@ -0,0 +1,33 @@
+document.getElementById('terrainForm').addEventListener('submit', function(event) {
+ event.preventDefault();
+ var terrain = document.getElementById('terrainType').value;
+
+ fetch('https://gammaworld.gmgauthier.com/roll/encounter', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ "terrain": terrain
+ })
+ }).then(response => {
+ if (!response.ok) { throw response }
+ return response.json() //we only get here if there is no error
+ }).then(json => {
+ //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;
+ }).catch(err => {
+ err.text().then(errorMessage => {
+ let resultSection = document.getElementById('resultSection');
+ resultSection.style.textAlign = 'center';
+ resultSection.style.fontSize = '1.5em';
+ resultSection.style.fontWeight = 'bold';
+ resultSection.innerText = errorMessage;
+ })
+ });
+});
\ No newline at end of file