JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

<form>
  
    <div style="position:relative">
        <input id="firstName"
            name="firstName"
            class="userInput"
            type="text"
            size="30"
            maxlength="30"
            value=""
            onkeydown="hideHint( this.id );"
            onblur="showHint( this.id );"
            />
        <span id="firstNameHint"
            class="hintSpan"
            onclick="focusInput( this.id );">
                First Name
        </span>
    </div>

    
    <div style="position:relative">
        <input id="lastName"
            name="lastName"
            class="userInput"
            type="text"
            size="30"
            maxlength="30"
            value=""
            onkeydown="hideHint( this.id );"
            onblur="showHint( this.id );"
            />
        <span id="lastNameHint"
            class="hintSpan"
            onclick="focusInput( this.id );">
                Last Name
        </span>
    </div>
    
    <div style="position:relative">
        <input id="email"
            name="email"
            class="userInput"
            type="text"
            size="30"
            maxlength="30"
            value=""
            onkeydown="hideHint( this.id );"
            onblur="showHint( this.id );"
            />
        <span id="emailHint"
            class="hintSpan"
            onclick="focusInput( this.id );">
                Email (ex: [email protected])
        </span>
    </div>
    
    <div style="position:relative">
        <input id="companyName"
            name="companyName"
            class="userInput"
            type="text"
            size="30"
            maxlength="30"
            value=""
            onkeydown="hideHint( this.id );"
            onblur="showHint( this.id );"
            />
        <span id="companyNameHint"
            class="hintSpan"
            onclick="focusInput( this.id );">
                Company/Organization
        </span>
    </div>
    
    <div...

CSS

.hintSpan{
    font-family: sans-serif;
    font-size: 14px;
    position: absolute;
    top: 9px;
    color: #999;
    left: 10px;
    display: block;
}

.userInput
{
    padding-left: 8px;
    padding-right: 8px;
}

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: 3px;
    margin: 5px;
    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);
}

#pwStatus
{
  -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;
    margin: 5px;
    display: none;
}

.pwShort {
    background-color: rgb(127, 0, 0);
    width: 35px;
}
.pwSimple {
    background-color: rgb(127, 0, 0);
    width: 70px;
}
.pwGood {
    background-color: rgb(0, 63, 191);
    width: 105px;
}
.pwStrong {
    background-color: rgb(0, 191, 63);
    width: 140px;
}

JavaScript

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

function verifyPassword( userString )
{
    if( userString.length < 12 )
    {
        return -1;
    }
    if( strengthLevel( userString ) < 3 )
    {
        return -2;
    }
    return 0;
}

function updatePasswordStatus( userString, textId, graphicId )
{
    var textElement = document.getElementById( textId );
    var graphicElement = document.getElementById( graphicId );
    
    var verifyResult = verifyPassword( userString );
    if( verifyResult == -1 )
    {
        textElement.innerHTML = "too short";
        graphicElement.className = "pwShort";
        return;
    }
    
    var levelResult = strengthLevel( userString );
    switch( levelResult )
    {
    case 3:
        textElement.innerHTML = "good";
        graphicElement.className = "pwGood";
        break;
    case 4:
        textElement.innerHTML = "strong";
        graphicElement.className = "pwStrong";
        break;
    default:
        textElement.innerHTML = "too simple";
        graphicElement.className = "pwSimple";
    }
}

function focusInput( idString )
{
    var e = document.getElementById( idString.replace( /Hint/g, "" ) );
    e.focus();
}

function hideHint( idString )
{
    var e = document.getElementById( idString + "Hint" );
    e.style.display = "none";
}

function showHint( idString )
{
    if( document.getElementById( idString ).value === "" )
    {
        var e = document.getElementById( idString + "Hint" );
        e.style.display = "block";
    }
}

function pwHideStatus( userString ) {
    if( verifyPassword( userString ) >= 0 )
    {
        var e = document.getElementById( 'pwStatus' );
       ...