JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<script src="http://bagger.ucoz.kz/jquery.complexify.min.js"></script>
<script src="http://bagger.ucoz.kz/jquery.complexify.banlist.js"></script>
<div id="demo">
    <input type="password" id="password" placeholder="Password" />
    <div id="progressbar">
        <div id="progress"></div>
    </div>
    <div id="status">
        <div id="complexity">0%</div>
        <div id="complexityLabel">Complexity</div>
    </div>
</div>

CSS

#demo {
    width:380px;
    margin-right:auto;
    margin-left:auto;
}
#progressbar {
    width:388px;
    height:48px;
    display:block;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    overflow:hidden;
    background-color: white;
}
#progress {
    display:block;
    height:100px;
    width:0%;
}
.progressbarValid {
    background-color:green;
    background-image: -o-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
    background-image: -moz-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
    background-image: -webkit-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
    background-image: -ms-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
    background-image: linear-gradient(-90deg, #8AD702 0%, #389100 100%);
}
.progressbarInvalid {
    background-color:red;
    background-image: -o-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
    background-image: -moz-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
    background-image: -webkit-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
    background-image: -ms-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
    background-image: linear-gradient(-90deg, #F94046 0%, #92080B 100%);
}
#status {
    height:150px;
    width:388px;
    border:1px solid #ccc;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    background-color: white;
}
#password {
    width:100%;
    height:40px;
    font-size:30px;
    line-height:40px;
    border-radius: 8px;
    padding: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    margin-bottom: 9px;
    color: #555555;
    border: 1px solid #cccccc;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-text-security: disc;
    -webkit-appearance: textfield;
    outline: none;
}
#complexityLabel {
    width:100%;
    text-align:center;
...

JavaScript

$(document).ready(function () {
    $("#password").complexify({}, function (valid, complexity) {
        if (!valid) {
            $('#progress').css({
                'width': complexity + '%'
            }).removeClass('progressbarValid').addClass('progressbarInvalid');
        } else {
            $('#progress').css({
                'width': complexity + '%'
            }).removeClass('progressbarInvalid').addClass('progressbarValid');
        }
        $('#complexity').html(Math.round(complexity) + '%');
    });
});