JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id='nav'>
    <label for='speed'>&nbsp;Speed
        <br />
        <input type='number' class='C1' id='speed' placeholder='1-10' max='10' min='1' />
    </label>
    <br />
    <label for='Iron'>&nbsp;Iron
        <br />
        <input type='number' class='C1' id='Iron' placeholder='1-5' max='5' min='1' />
    </label>
    <br />
    <label for='Ice'>&nbsp;Ice
        <br />
        <input type='number' class='C1' id='Ice' placeholder='1-5' max='5' min='1' />
    </label>
    <br />
    <label for='Mass'>&nbsp;Mass
        <br />
        <input type='number' class='C1' id='Mass' placeholder='1-5' max='5' min='1' />
    </label>
    <br />
    <label for='Diameter'>&nbsp;Diameter
        <br />
        <input type='number' class='C1' id='Diameter' placeholder='1-5' max='5' min='1' />
    </label>
    <br />
    <p id='spacer'>&nbsp;</p>
    <p id='enterSign' onclick='saveitem()'>Press Enter</p>
    <button id='btnReset' onclick='resetPage()'>Reset</button>
</div>

CSS

.valid {
    border-color: limegreen;
}
.invalid {
    border-color: red;
}

JavaScript

window.onkeyup = function (e) {

    var inputs = document.querySelectorAll('.C1'),
        current, min, max, test;

    for (var i = 0, len = inputs.length; i < len; i++) {

        current = inputs[i];

        min = parseInt(current.min, 10);
        max = parseInt(current.max, 10);

        isValid = current.value >= min && current.value <= max;
        if (current.value !== current.defaultValue) {
            if (isValid) {
                current.classList.remove('invalid');
                current.classList.add('valid');
            } else {

                current.classList.remove('valid');
                current.classList.add('invalid');
            }
        }
    }


    document.getElementById('enterSign').style.display = "block";
    document.getElementById('spacer').style.display = "none";
    if (event.which == 13) {
        saveitem();
    }
};