diff --git a/web/chargen.html b/web/chargen.html
new file mode 100644
index 0000000..71226ad
--- /dev/null
+++ b/web/chargen.html
@@ -0,0 +1,24 @@
+
+
+
+
+ Gamma World Character Generator
+
+
+
+ Gamma World Character Generator
+ Generate A Character
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/chargen.js b/web/chargen.js
new file mode 100644
index 0000000..6758566
--- /dev/null
+++ b/web/chargen.js
@@ -0,0 +1,67 @@
+document.getElementById('characterForm').addEventListener('submit', function(event) {
+ event.preventDefault(); // Prevents form from submitting normally
+
+ // Retrieves selected character type
+ var charType = document.getElementById('charType').value;
+
+ // Makes a POST request to endpoint with selected charType as parameter
+ fetch('http://gammaworld.gmgauthier.com/character/generate', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({ chartype: charType }) // Data sent to server
+ })
+ .then(response => response.json()) // Gets the response and returns it as JSON
+ .then(data => { // When promise is resolved
+
+ var resultSection = document.getElementById('resultSection');
+ resultSection.innerHTML = '';
+
+ // Display animal-stock if it exists
+ if(data['animal-stock']){
+ resultSection.innerHTML += `Animal Stock:
`;
+ var animalStock = data['animal-stock'];
+ for(var prop in animalStock){
+ resultSection.innerHTML += ` - ${prop}: ${animalStock[prop]}
`;
+ }
+ resultSection.innerHTML += "
";
+ }
+
+ // Printing abilities
+ resultSection.innerHTML += "Abilities:
";
+ var abilities = data.abilities;
+ for(var ability in abilities) {
+ resultSection.innerHTML += ` - ${ability}: ${abilities[ability]}
`;
+ }
+ resultSection.innerHTML += "
";
+
+ // Display hp, gold, domars
+ resultSection.innerHTML += `hp: ${data.hp}
`;
+ resultSection.innerHTML += `gold: ${data.gold}
`;
+ resultSection.innerHTML += `domars: ${data.domar}
`;
+ resultSection.innerHTML += "
";
+
+ // Display mutations if they exist
+ if(data.mutations){
+ resultSection.innerHTML += `Mutations:
`;
+ var mutations = data.mutations;
+ resultSection.innerHTML += ` - Mental (${mutations.count.mental}): ${mutations.mental.join(', ')}
`;
+ resultSection.innerHTML += ` - Physical (${mutations.count.physical}): ${mutations.physical.join(', ')}
`;
+ }
+
+ // Display cybermods if they exist
+ if(data.cybermods){
+ resultSection.innerHTML += `Cybermods:
`;
+ var cybermods = data.cybermods;
+ if (data.cybermods.mental) {
+ resultSection.innerHTML += ` - Mental (${cybermods.count.mental}): ${cybermods.mental.join(', ')}
`;
+ }
+ if (data.cybermods.physical) {
+ resultSection.innerHTML += ` - Physical (${cybermods.count.physical}): ${cybermods.physical.join(', ')}
`;
+ }
+ }
+
+ })
+ .catch(error => console.error('Error:', error));
+});
\ No newline at end of file