password.html

<html>
<head>
    <style>
    h3{color: red; display: inline;}
    h5{color: red;}
    </style>
</head>
<body>
<input type="text" id="test"></input>
<button onclick="checkStr()">Check</button>

<div id="count"></div>
</body>
</html>

<script>
var alpha = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
var ALPHA = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
var numerical = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
var symbols = [" ", "!", '"', "#", "$", "%", "&", "'", "(", ")", "*", "+", ",", "-", ".", "/", ":", ";", "<", "=", ">", "?", "@", "[", "\\", "]", "^", "_", "`", "{", "|", "}", "~"];


function checkStr(){
    //HTML elements used
    var pass = document.getElementById('test').value;
    var out = document.getElementById('count');


    //checks each letter of string to see if it matches anything in the 4 lists.
    var inca = false;
    var incA = false;
    var incn = false;
    var incs = false;
    for (var i = 0; i < pass.length; i++) {
        if(alpha.includes(pass[i])){inca = true;}
        else if(ALPHA.includes(pass[i])){incA = true;}
        else if(numerical.includes(pass[i])){incn = true;}
        else if(symbols.includes(pass[i])){incs = true;}
    }


    // figures out how many characters can be used based on your character set. Also increases strength by 1 for each set used.
    var set = 0;
    var strength = 0;
    if(inca){set += alpha.length; strength += 1;}
    if(incA){set += ALPHA.length; strength += 1;}
    if(incn){set += numerical.length; strength += 1;}
    if(incs){set += symbols.length; strength += 1;}
    var combos = Math.pow(set, pass.length);

    //section checks how many requirements are met and outputs as strength
    var state = "weak";
    if (strength == 1){state = "weak";}
    else if(strength == 2){state = "Ok";}
    else if(strength == 3){state = "good";}
    else if(strength == 4){state = "strong";}
    out.innerHTML = "your password is <h3>"+state+"</h3> with <h3>"+combos+"</h3> brute force tries";
}
</script>