JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<html>
    <body>
        <form>
            <fieldset><p>
                <label>Username: <input type="text" name="user" id="user" /></label></p><br /><p>
                <label>Password: <input type="password" name="passw" id ="passw" /></label></p>
                <label><input type="submit" value="Log in" name="submitBUT" style="width: 65px; height: 25px; background-color: green; color: white; font-weight: bold;" id="submitBUT" /><div id="helllo"></div></label>
            </fieldset>
        </form>
    </body>
</html>

JavaScript

var subBut = document.getElementById('submitBUT');
var users = ['hithere', 'Peter112', 'Geksj', 'lOsja', 'fInduS', '323DssaAA', 'f1fsus'];
var passes = ['mllesl', 'Petboy', 'Heneeesh', 'Olga', '234dasdf77/', 'minls', 'ew832ja'];
var output = [];
function submi(u, p) {
    for (var i = 0; i < users.length; i++) {
        if (users[i] == u) {
            output.push(i);
        }
    }
    for (var o = 0; o < output.length; o++) {
        if (passes[output[o]] == p) {
            return p + ' was a correct password.';
        }
    }
    return 'Error, please try again';
}
subBut.onclick = function() { 
    document.getElementById('helllo').innerHTML=
        submi(document.getElementById('user').value, document.getElementById('passw').value);
    return false;
};