JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

<form>

    <div style="position: relative"><input type="text" name="fname" id="fname" onkeydown="document.getElementById('fname-placeholder').style.display = 'none';" onblur="if(this.value==''){document.getElementById('fname-placeholder').style.display = 'block';}" /><span id="fname-placeholder" onclick="document.getElementById('fname').focus();" style="color: #999; font-size: 13px; left: 5px; position: absolute; top: 3px; display: block; font-family: sans-serif">First Name</span></div>
    <div style="position: relative"><input type="text" name="lname" id="lname" onkeydown="document.getElementById('lname-placeholder').style.display = 'none';" onblur="if(this.value==''){document.getElementById('lname-placeholder').style.display = 'block';}" /><span id="lname-placeholder" onclick="document.getElementById('lname').focus();" style="color: #999; font-size: 13px; left: 5px; position: absolute; top: 3px; display: block; font-family: sans-serif">Last Name</span></div>
    <div style="position: relative"><input type="password" name="password" id="password" onkeydown="document.getElementById('password-placeholder').style.display = 'none'" onkeyup="update_password_status(document.getElementById('password').value, 'status_text', 'status_bar')" onblur="if(this.value==''){document.getElementById('password-placeholder').style.display = 'block';}" /><span id="password-placeholder" onclick="document.getElementById('password').focus();" style="color: #999; font-size: 13px; left: 5px; position: absolute; top: 3px; display: block; font-family: sans-serif">Password</span></div>
    <div id=status_text style="font-family:sans-serif; font-size: 13px">too short</div>
    <div style="background-color: #DDD; width: 140px; height: 5px"><div id=status_bar class=short style="height: 5px"></div></div>
<!--    
    <script type="text/javascript"
     src="http://www.google.com/recaptcha/api/challenge?k=6LeSl9ISAAAAAPi--9xhiy9q7GS0-r9TLkST4Ny7">
  </script>
  <noscript>
     <iframe...

CSS

input[type=text], textarea, [type=password] {
    -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
     outline: none;
    padding-left: 3px;
    border: 1px solid #DDDDDD;
}

input[type=text]:focus, textarea:focus, [type=password]:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

.short {
    background-color: rgb(127, 0, 0);
    width: 35px;
}
.simple {
    background-color: rgb(127, 0, 0);
    width: 70px;
}
.good {
    background-color: rgb(0, 63, 191);
    width: 105px;
}
.strong {
    background-color: rgb(0, 191, 63);
    width: 140px;
}

JavaScript

function strength_level( user_str ) {
    var upper = (user_str.replace(/[^A-Z]/g, "").length > 0);
    var lower = (user_str.replace(/[^a-z]/g, "").length > 0);
    var number = (user_str.replace(/[^0-9]/g, "").length > 0);
    var symbol = (user_str.replace(/[A-Za-z1-9]/g, "").length > 0);
    return (upper + lower + number + symbol);
}

function verify_password( user_str ) {
    if( user_str.length < 12 )
    {
        return -1;
    }
    if( strength_level( user_str ) < 3 )
    {
        return -2;
    }
    return 0;
}

function update_password_status( user_str, text_id, graphic_id ) {
    var text_element = document.getElementById( text_id );
    var graphic_element = document.getElementById( graphic_id );
    
    var verify_result = verify_password( user_str );
    if( verify_result == -1 ) {
        text_element.innerHTML = "too short";
        graphic_element.className = "short";
        return;
    }
    
    var level_result = strength_level( user_str );
    switch( level_result ) {
    case 3:
        text_element.innerHTML = "good";
        graphic_element.className = "good";
        break;
    case 4:
        text_element.innerHTML = "strong";
        graphic_element.className = "strong";
        break;
    default:
        text_element.innerHTML = "too simple";
        graphic_element.className = "simple";
    }
}