PoE2 Loot Tracker

by stvnmntjy

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>PoE2 Loot Tracker</title>
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://getbootstrap.com/docs/5.3/assets/css/docs.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col">
          <h4>Currencies</h4>
          <div id="currencyCont"></div>
          <h4>Distilled</h4>
          <div id="distilledCont"></div>
        </div>
        <div class="col">
          <h4>Gems</h4>
          <div id="gemCont"></div>
          <h4>Essences</h4>
          <div id="essenceCont"></div>
          <h4>Catalysts</h4>
          <div id="catalystCont"></div>
          <h4>Splinters</h4>
          <div id="splinterCont"></div>
        </div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

JavaScript

function createSwitch({ id, text }) {
  return `
    <div class="form-check form-switch my-3">
        <input class="form-check-input" type="checkbox" role="switch" id=${id}>
        <label class="form-check-label" for=${id}>${text}</label>
    </div>
    `
}

const gems = [
  {
    id: "54c8e16a66b0db7dd3fd61ca189af017eb4f97c3",
    text: "Skill Gem",
  },
  {
    id: "1dca20f09a7935c197903f2ec6173cd52cb14c1f",
    text: "Spirit Gem",
  },
  {
    id: "6ded81348a8d959d92dda2b32b554fdd9c6ad2fd",
    text: "Support Gem",
  },
]

const currencies = [
  {
    id: "d66b48d49c1aab54980e4820d16762f9f5a633d5",
    text: "Albino Rhoa Feather",
  },
  {
    id: "975ea181c841c31943b8bfba34c5753a8e66ab59",
    text: "Alchemy Shard",
  },
  {
    id: "97afffe02c9286349d6083dc1b89fd3eed6c4723",
    text: "Arcanist's Etcher",
  },
  {
    id: "54aa9f2b7794ce9d18e440845dca7b0d739b2047",
    text: "Armourer's Scrap",
  },
  {
    id: "9f1c73f3f37854c4cea798d8c2a5543356eb4904",
    text: "Artificer's Orb",
  },
  {
    id: "ed4cbf9f6b3e17d8a287d4c13c56701a3e8f3688",
    text: "Artificer's Shard",
  },
  {
    id: "8cf094c87038f94b32b253416f10f81ac94c1aa7",
    text: "Black Scythe Artifact",
  },
  {
    id: "d4620307409a52428cbd13a02826c553a6c19daf",
    text: "Blacksmith's Whetstone",
  },
  {
    id: "6667214b1b88ecefce9234bb2fb8405a784f1391",
    text: "Broken Circle Artifact",
  },
  {
    id: "d4994288f3c6c431ce19d8a7b8999ec3e256eaea",
    text: "Bronze Key",
  },
  {
    id: "7bf07cf3f45b917a6112566273a6f1c54326101f",
    text: "Chance Shard",
  },
  {
    id: "89d9f96735bcb90bf3a1248e78bd7cea517ea2ea",
    text: "Chaos Orb",
  },
  {
    id: "56ad2ac6c89c3af9d44e96ac632e7706dab24dd7",
    text: "Divine Orb",
  },
  {
    id: "8f6c63ea52c68e01eb717f6aa54475fafb848c08",
    text: "Exalted Orb",
  },
  {
    id: "a86dbec76f88a5f101ae3fa48fae8df3a9713468",
    text: "Exotic Coinage",
  },
  {
    id: "773be02485e9be48be023123ab1b746daa6a6e18",
    text: "Gemcutter's Prism",
 ...