Hyper Stat Counter

Very... improvised, but whatever!

HTML

a<table id="container">
    <tr>
        <td>Your level:</th>
            <td>
                <input type="text" id="inputLevel" value="0" onkeydown="if (event.keyCode == 13) pointCounter()">
                <button onclick="pointCounter()">Submit</button>
            </td>
            <th class="topHeader">Stat</th>
            <th class="topHeader">Increase</th>
            <th class="topHeader">Max Level</th>
    </tr>
    <tr>
        <td>Level:</td>
        <td id="level">0</td>
            <td>STR</td>
            <td>15~150</td>
            <td>10</td>
    </tr>
    <tr>
        <td>Hyper Stat Points:</td>
        <td id="points">0</td>
        <td>DEX</td>
        <td>15~150</td>
        <td>10</td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td>INT</td>
        <td>15~150</td>
        <td>10</td>
    </tr>
    <tr>
        <td></td>
        <th class="topHeader">Points to Max</th>
        <td>LUK</td>
        <td>15~150</td>
        <td>10</td>
    </tr>
    <tr>
        <th>Max Level 5:</th>
        <td>25</td>
        <td>HP</td>
        <td>2%~20%</td>
        <td>10</td>
    </tr>
    <tr>
        <th>Max Level 10:</th>
        <td>150</td>
        <td>MP</td>
        <td>2%~20%</td>
        <td>10</td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td>Demon Force</td>
        <td>10~50</td>
        <td>5</td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td>Speed</td>
        <td>4~20</td>
        <td>5</td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td>Jump</td>
        <td>2~10</td>
        <td>5</td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td>Critical rate</td>
        <td>1%~15%</td>
        <td>10</td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td>Minimum critical</td>
        <td>1%~10%</td>
        <td>10</td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td>Maximum critical</td>
        <td>1%~15%</td>
        <td>10</td>
    </tr>
    <tr>
    ...

CSS

html, body {
    height: 100vh;
    width: 100vw;
}
#container {
    margin: 0 auto;
}
input {
    width: 30px;
}
th.topHeader {
    border-bottom: solid 1px black;
    box-sizing: border-box;
}
tr td:nth-last-child(3), tr th:nth-last-child(3) {
    border-left: 1px solid black;
}
tr td:last-child, tr th:last-child {
    border-right: 1px solid black;
}
tr td:last-child {
    text-align: center;
}
tr:last-child td:nth-child(n+2) {
    border-bottom: 1px solid black;
}

JavaScript

function isInt(value) {
    var x;
    return isNaN(value) ? !1 : (x = parseFloat(value), (0 | x) === x);
}

function pointCounter() {
    var curLevel = document.getElementById("inputLevel").value;
    var curCheck = 140;
    var curIncrem = 3;
    if (!isInt(curLevel)) curLevel = 207;
    for (var curCount = 0; curCheck <= curLevel; curCount += curIncrem, curCheck++) {
        if (curCheck % 10 === 0 && curCheck > 140) curIncrem++;
    }
    document.getElementById("level").innerHTML = curLevel;
    document.getElementById("points").innerHTML = curCount;
}

pointCounter();