JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
Ishgard experience calculator
</h1>

<form>
  <div>
    <input id="startLevel" type="number" min="20" max="79" value="20"/>
    <label>starting level</label>
  </div>
  <div>
    <input id="endLevel" type="number" min="1" max="80" value="50"/>
    <label>ending level</label>
  </div>
  <div>
    <input id="expPer" type="number" min="1" max="20000000" value="146469"/>
    <label>experience per turn-in</label>
  </div>
</form>

<div>
  <h2>Result</h2>
  <p id="output"></p>
</div>

CSS

body {
  font-family: sans-serif;
  color: #48f;
  background-color: #20262e;
  padding-left: 30px;
}

label {
  color: #ccc;
}

input {
  width: 8em;
  background-color: black;
  border-style: none;
  color: #ccc;
  padding: 5px;
  margin: 3px;
}

b {
  color: #6af;
}

h2 {
  margin-top: 30px;
}

JavaScript

const LEVELS = [0, 300, 600, 1100, 1700, 2300, 4200, 6000, 7350, 9930, 11800, 15600, 19600, 23700, 26400, 30500, 35400, 40500, 45700, 51000, 56600, 63900, 71400, 79100, 87100, 95200, 109800, 124800, 140200, 155900, 162500, 175900, 189600, 203500, 217900, 232320, 249900, 267800, 286200, 304900, 324000, 340200, 356800, 373700, 390800, 408200, 437600, 467500, 498000, 529000, 864000, 1058400, 1267200, 1555200, 1872000, 2217600, 2592000, 2995200, 3427200, 3888000, 4470000, 4873000, 5316000, 5809000, 6364000, 6995000, 7722000, 8575000, 9593000, 10826000, 12449000, 13881000, 15556000, 17498600, 19750000, 22330000, 25340000, 28650000, 32750000, 37650000];

function update() {
	let lv = parseInt(startLevel.value, 10);
  const end = parseInt(endLevel.value, 10);
  const each = parseInt(expPer.value, 10);
 	let result = 'Turn-ins required: ';
  
  if (lv > end) result += 'impossible';
  else {
  	let expNeeded = 0;
    while (lv < end) expNeeded += LEVELS[lv++];
    result += Math.ceil(expNeeded / each);
  }
  
  output.textContent = result;
}

[startLevel, endLevel, expPer].forEach(el => el.addEventListener('change', update));
update();