JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

<label for="username2">username</label>
			<input type="text" name="username" id="username2"><br>

			<label for="password2" class="password_label">password<span class="bar">
                <span class="perc password_strength"></span>
                <span class="human"></span>
                </span>
                </label>
			<input type="password" name="password" id="password2"><br>

CSS

label {
	display:inline-block;
	width:100px;
	line-height: 28px;
}

input[type=text], input[type=password] {
	border:solid 1px #333;
	padding:5px;
	width: 300px;
	position: relative;
	z-index: 2;
	background:transparent;
}


.password_label {
	position: relative;
}
.password_label span.bar {
	position: absolute;
	top: 0px;
	bottom: 0;
	left: 104px;
	width: 310px;
	height: 27px;
    text-align:right;
}

.human {
    position: relative;
margin-right: 5px;
}

.password_label span.bar .perc {
	position:absolute;
	top: 0px;
	bottom: 0;
	left: 0;
	width: 0%;
	height: 27px;
	background-color: #FF9999;
}

JavaScript

$(document).ready(function(event){
	$('input[name=password]').on('keypress keyup keydown', function(event) {

		
        var pass = $(this).val();
        scorePassword(pass);

	});

});


function scorePassword(pass) {
    var score = 0;
    if (!pass)
        return score;

    // award every unique letter until 5 repetitions
    var letters = new Object();
    for (var i=0; i<pass.length; i++) {
        letters[pass[i]] = (letters[pass[i]] || 0) + 1;
        score += 5.0 / letters[pass[i]];
    }

    // bonus points for mixing it up
    var variations = {
        digits: /\d/.test(pass),
        lower: /[a-z]/.test(pass),
        upper: /[A-Z]/.test(pass),
        nonWords: /\W/.test(pass),
    }

    variationCount = 0;
    for (var check in variations) {
        variationCount += (variations[check] == true) ? 1 : 0;
    }
    score += (variationCount - 1) * 10;

    score = parseInt(score);

    if( score > 100 )
    {
    	score = 100;
    }

    var color = '#FF9999';
    
    
     $('.human').text('weak');
    if( score > 40 )
    {
    	color = '#FFFF73';
        $('.human').text('average');
    }
    if( score > 60 )
    {
    	color = '#85B200';
        $('.human').text('medium');
    }
    if( score > 80 )
    {
    	color = '#00D900';
       $('.human').text('strong');
    }

    $('.password_strength').css('background-color',color).stop().animate({
    	width: score + '%'},
    	300 );
}