Hyper Stat Calculator

Helps you figure out your optimal hyper stat configuration in terms of resulting amounts.

HTML

<form>
  <fieldset>
    <legend>
      Hyper Stat Calculator
    </legend>
    <table id="levelInfo">
      <tr>
        <td>Level: </td>
        <td>
          <select id="inputLevel" onchange="calcHyperStatPoints()"></select>
        </td>
      </tr>
      <tr>
        <td>Total Points: </td>
        <td id="hyperPoints"></td>
      </tr>
      <tr>
        <td>Current Points: </td>
        <td id="currentPoints"></td>
      </tr>
    </table>
    <table id="stats">
      <tr>
        <th>Stat</th>
        <th>Level</th>
        <th>Stat Amount</th>
      </tr>
      <tr>
        <td>STR</td>
        <td>
          <select data-max-level="10" data-id="str" data-type="0" data-value="15" onchange="updatePoints(this)"></select>
        </td>
        <td id="str"></td>
      </tr>
      <tr>
        <td>DEX</td>
        <td>
          <select data-max-level="10" data-id="dex" data-type="0" data-value="15" onchange="updatePoints(this)"></select>
        </td>
        <td id="dex"></td>
      </tr>
      <tr>
        <td>INT</td>
        <td>
          <select data-max-level="10" data-id="int" data-type="0" data-value="15" onchange="updatePoints(this)"></select>
        </td>
        <td id="int"></td>
      </tr>
      <tr>
        <td>LUK</td>
        <td>
          <select data-max-level="10" data-id="luk" data-type="0" data-value="15" onchange="updatePoints(this)"></select>
        </td>
        <td id="luk"></td>
      </tr>
      <tr>
        <td>HP</td>
        <td>
          <select data-max-level="10" data-percent data-id="hp" data-type="0" data-value="2" onchange="updatePoints(this)"></select>
        </td>
        <td id="hp"></td>
      </tr>
      <tr>
        <td>MP</td>
        <td>
          <select data-max-level="10" data-percent data-id="mp" data-type="0" data-value="2" onchange="updatePoints(this)"></select>
        </td>
        <td id="mp"></td>
      </tr>
      <tr>
        <td>Demon Force</td>
        <td>
          <select...

CSS

form {
  display: table;
  margin: 0 auto;
}

#levelInfo {
  margin: 0 auto;
}

input {
  width: 50px;
}

select {
  min-width: 45px;
}

table {
  border-collapse: collapse;
}

tr:not(:last-child) td,
th {
  border-bottom: 1px #bfbfbf solid;
}

td:last-child {
  text-align: right;
}

#stats option {
  color: green;
}

#stats option:disabled {
  color: #bf4040;
  background-color: #f6f3ee;
}

JavaScript

//------------------------------------------
// I know this code is ugly. If you can
// improve on it, just make sure to mention
// your iteration to me.
//------------------------------------------
var information = {
  currentLevel: 0,
  currentPoints: 0,
  currentUsed: 0,
  remainder: 0,
  currentStatLevels: {
    str: 0,
    dex: 0,
    int: 0,
    luk: 0,
    hp: 0,
    mp: 0,
    demFor: 0,
    speed: 0,
    jump: 0,
    critRate: 0,
    critDmg: 0,
    ignDef: 0,
    damage: 0,
    bDamage: 0,
    eleResist: 0,
    statResist: 0,
    stance: 0
  },
  levelAmounts: [0, 1, 2, 4, 8, 10, 15, 20, 25, 30, 35],
  levelTotals: [0, 1, 3, 7, 15, 25, 40, 60, 85, 115, 150],
  //specialIncr: [0, 1, 1, 1, 1, 1, 1, 2, 2, 2, 3],
  specialIncr: [0, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2]
};

function init() {
  var levelSelection = document.getElementById("inputLevel");
  var stats = document.getElementById("stats").getElementsByTagName("select");
  var optionElement;
  for (var countLevel = 140; countLevel < 251; countLevel++) {
    optionElement = document.createElement("option");
    optionElement.value = optionElement.text = countLevel;
    levelSelection.add(optionElement);
  }
  for (var eleCounter = 0; eleCounter < stats.length; eleCounter++) {
    var maxOptions = (stats[eleCounter].dataset.maxLevel == "5" ? 6 : 11);
    for (var statLevel = 0; statLevel < maxOptions; statLevel++) {
      optionElement = document.createElement("option");
      optionElement.value = optionElement.text = statLevel;
      stats[eleCounter].add(optionElement);
    }
    calculateStat(stats[eleCounter]);
  }
  calcHyperStatPoints();
}

function calcHyperStatPoints() {
  var inputLevel = document.getElementById("inputLevel").value;
  var checkLevel = 140;
  var increment = 3;
  for (var currentPoints = 0; checkLevel <= inputLevel; currentPoints += increment, checkLevel++) {
    if (checkLevel % 10 === 0 && checkLevel > 140) increment++;
  }
  if (information.currentLevel > inputLevel &&...