JSFiddle - React, Tailwind, and code Playground

by ChaseWest

HTML

<div>
  <div>
    <label>Base Item Buy Price</label>
    <input id="item_price" />
  </div>
  <div>
    <label>Tier 1 Sell Price</label>
    <input id="tier_1_price" />
  </div>
  <div>
    <label>Tier 2 Sell Price</label>
    <input id="tier_2_price" />
  </div>
  <div>
    <label>Tier 3 Sell Price</label>
    <input id="tier_3_price" />
  </div>
  <div>
    <select id="item_type">
      <option>Item Type</option>
      <option value="144">One-handed Weapon</option>
      <option value="192">Two-handed Weapon</option>
      <option value="96">Armor and Bags</option>
      <option value="48">Helmet, boots, Capes and Off-hands</option>
    </select>
  </div>
  <div>
    <select id="item_tier">
      <option>Item Tier</option>
      <option value="adept">Tier 4</option>
      <option value="expert">Tier 5</option>
      <option value="master">Tier 6</option>
      <option value="grandmaster">Tier 7</option>
      <option value="elder">Tier 8</option>
    </select>
  </div>
  <div>
    <button id="calc_button">Calculate</button>
  </div>
  <div>
    <label>Tier 1 Profit</label>
    <input id="tier_1_profit" />
  </div>
  <div>
    <label>Tier 2 Profit</label>
    <input id="tier_2_profit" />
  </div>
  <div>
    <label>Tier 3 Profit</label>
    <input id="tier_3_profit" />
  </div>
</div>

JavaScript

const basePriceNode = document.querySelector('#item_price');
const tier1PriceNode = document.querySelector('#tier_1_price');
const tier2PriceNode = document.querySelector('#tier_2_price');
const tier3PriceNode = document.querySelector('#tier_3_price');
const tier1ProfitNode = document.querySelector('#tier_1_profit');
const tier2ProfitNode = document.querySelector('#tier_2_profit');
const tier3ProfitNode = document.querySelector('#tier_3_profit');

const itemType = document.querySelector('#item_type');
const calculateButton = document.querySelector('#calc_button');

const prices = {
  rune: {
    adept: 45,
    expert: 111,
    master: 244,
    grandmaster: 709,
    elder: 2724
  },
  soul: {
    adept: 151,
    expert: 375,
    master: 832,
    grandmaster: 2312,
    elder: 13606
  },
  relic: {
    adept: 624,
    expert: 1238,
    master: 4076,
    grandmaster: 20003,
    elder: 110000
  },
}

const enchantTiers = ['rune', 'soul', 'relic'];

calculateButton.addEventListener('click', function() {
   const numberOfMaterials = parseInt(itemType.value, 10);
   const itemTier = document.querySelector('#item_tier').value;
   const profitNodes = [tier1ProfitNode, tier2ProfitNode, tier3ProfitNode]
   const sellPriceNodes = [tier1PriceNode, tier2PriceNode, tier3PriceNode]
   
   enchantTiers.forEach(function(enchantTier, index) {
      const materialCost = numberOfMaterials * prices[enchantTier][itemTier];
      const baseItemPrice = parseInt(basePriceNode.value, 10) || 0;
      const sellPrice = sellPriceNodes[index].value || 0;
      
      const profit =  sellPrice - (baseItemPrice + materialCost);
      
      profitNodes[index].value = profit.toLocaleString();
   });
});