JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<form id='targets' action='http://www.innovativephp.com' method='post'  >    
    <ul>
        <li ><div class='label_col'>Password</div><div class='field'><input type='text' name='test_field' id='password' /></div></li>
        <li class='error_msg' >
        <div class='label_col'>&nbsp;</div><div class='error_field' id='password_error_msg'>&nbsp;</div>
        </li>
            
                    
                        
                        <li><div class='label_col'>&nbsp;</div><div class='field'><input type='submit' value='Save' /><input type='reset' value='Reset' class='reset'/></div></li>
    </ul>   
</form>

CSS

.label_col{
 width:20%;
  padding:5px;  
float:left;
}

.field{
 width:75%;
      padding:5px;
 float:left;
}
.error_field{
 width:75%;

 float:left;
    

}
.error_msg{

 clear:both;  
   color:#f00;
}

li{
    width:100%;
    float:left;
}

#password_error_msg{
    width:200px;
    height:20px;
    border:1px solid #eee;
}
#password_meter{
 height:20px; 
  color:#fff;
  font-weight:bold;  
}

JavaScript

$('#password').keyup(function() {
    //$('#password_error_msg').html('').parent().hide();
    var password = $('#password').val();
    
    if(password.length < 6){
        $('#password_error_msg').html("<div id='password_meter'>Weak</div>");
        $('#password_meter').css('background-color','#C61515');
        $('#password_meter').css('width','25%');
        $('#password_error_msg').parent().show();  
    }else{
        var regex_simple = /^[a-z]$/;
        var regex_capital = /^[A-Z]$/;
        var regex_numbers = /^[0-9]$/;
        
        var simple_status  = '0';
        var capital_status = '0';
        var number_status  = '0';
        var status_count   = '0';
        
        for(i=0;i<password.length;i++){
            var check_character = password.charAt(i);

            if(regex_simple.test(check_character) && simple_status == '0'){
               simple_status = '1';
               status_count++;
            }
            if(regex_capital.test(check_character) && capital_status == '0'){
               capital_status = '1';
                status_count++;
            }
            if(regex_numbers.test(check_character) && number_status == '0'){
               number_status = '1';
                status_count++;
            }
        }
     
       switch(status_count){
                case 0:
               $('#password_error_msg').html("<div id='password_meter'>Excellent</div>");
        $('#password_meter').css('background-color','#eee');
        $('#password_meter').css('width','25%');
        $('#password_error_msg').parent().show();  
                break;
            case 1:
   
                $('#password_error_msg').html("<div id='password_meter'>Good</div>");
        $('#password_meter').css('background-color','#F9B7B7');
        $('#password_meter').css('width','55%');
        $('#password_error_msg').parent().show();  
                break;
                    
                    case 2:
          ...