Widget:Calculator/Experience

<style>

1. xp-calculator { background-color: #1e1e1e; border: 1px solid #333; border-radius: 5px; padding: 15px; max-width: 400px; color: #ccc; }
2. xp-calculator .calc-section { display: grid; gap: 12px; }
3. xp-calculator .calc-section:first-of-type { padding-bottom: 15px; border-bottom: 1px solid #333; margin-bottom: 15px; }
4. xp-calculator label { display: flex; flex-direction: column; gap: 4px; }
5. xp-calculator input { background-color: var(--bg-main, #1e1f22); color: var(--text-main, #b6b4b2); border: 1px solid var(--border-color-base, #2d2d2d); border-radius: 4px; padding: 6px 8px; font-size: 14px; width: 100%; box-sizing: border-box; }
6. xp-calculator .result-line { font-size: 1.1em; }
7. xp-calculator .result-line b { color: #fff; margin-left: 5px; }

</style>

   <label>Current XP: <input type="number" id="currentXp" value="0" min="0"></label>
   <label>Desired Level: <input type="number" id="desiredLevel" value="1" min="1" max="100"></label>

XP Remaining: 0

   <label>XP / Action: <input type="number" id="xpPerAction" value="1" min="1"></label>

Actions Remaining: 0

<script> (function() {

 const xpTable = {2:99,3:210,4:333,5:470,6:622,7:791,8:978,9:1185,10:1414,11:1667,12:1947,13:2256,14:2598,15:2976,16:3393,17:3854,18:4363,19:4925,20:5546,21:6232,22:6989,23:7825,24:8749,25:9769,26:10896,27:12141,28:13516,29:15035,30:16713,31:18567,32:20616,33:22880,34:25382,35:28147,36:31202,37:34579,38:38311,39:42436,40:46996,41:52037,42:57609,43:63769,44:70579,45:78108,46:86433,47:95637,48:105814,49:117067,50:129510,51:143269,52:158484,53:175309,54:193915,55:214491,56:237246,57:262410,58:290240,59:321018,60:355057,61:392703,62:434338,63:480386,64:531315,65:587643,66:649943,67:718848,68:795059,69:879351,70:972582,71:1075701,72:1189756,73:1315908,74:1455440,75:1609773,76:1780476,77:1969287,78:2178128,79:2409124,80:2664626,81:2947234,82:3259825,83:3605580,84:3988019,85:4411034,86:4878932,87:5396475,88:5968931,89:6602127,90:7302510,91:8077208,92:8934109,93:9881935,94:10930335,95:12089982,96:13372681,97:14791491,98:16360855,99:18096750,100:20016848};
 const currentXpEl = document.getElementById('currentXp');
 const desiredLevelEl = document.getElementById('desiredLevel');
 const xpPerActionEl = document.getElementById('xpPerAction');
 const xpRemainingEl = document.getElementById('xpRemaining');
 const actionsRemainingEl = document.getElementById('actionsRemaining');
 function getNumericValue(input, min = 0, max = Infinity) {
   let value = parseInt(input.value, 10) || min;
   value = Math.max(min, Math.min(value, max));
   input.value = value;
   return value;
 }
 function updateCalculations() {
   const currentXp = getNumericValue(currentXpEl, 0);
   const desiredLevel = getNumericValue(desiredLevelEl, 1, 100);
   const xpPerAction = getNumericValue(xpPerActionEl, 1);
   const requiredXp = xpTable[desiredLevel] || 0;
   const xpNeeded = Math.max(0, requiredXp - currentXp);
   const actionsNeeded = xpPerAction > 0 ? Math.ceil(xpNeeded / xpPerAction) : 0;
   xpRemainingEl.textContent = xpNeeded.toLocaleString();
   actionsRemainingEl.textContent = actionsNeeded.toLocaleString();
 }
 document.querySelectorAll('#currentXp, #desiredLevel, #xpPerAction').forEach(el => el.addEventListener('input', updateCalculations));
 document.addEventListener('DOMContentLoaded', updateCalculations);

})(); </script>