JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

<body onload="formatJS();">
<div style="width:100%">
<form>
  
    <div>
        Name
        <br />
        <span style="position:relative">
            <span>
                <input id="firstName"
                    name="firstName"
                    class="userInput"
                    type="text"
                    size="22"
                    maxlength="30"
                    value=""
                    onkeydown="hideHint( this );"
                    onfocus="clearAlert( this );"
                    onblur="showHint( this ); requiredStatus( this );"
                    data-required="true"
                    />
                <span id="firstNameHint"
                    class="hintSpan"
                    onclick="focusInput( this );">
                        First
                </span>
            </span>
            <span id="firstNameAlert"
                class="alertSpan">
            </span>
        </span>
    
        
        <span style="position:relative">
            <input id="lastName"
                name="lastName"
                class="userInput"
                type="text"
                size="22"
                maxlength="30"
                value=""
                onkeydown="hideHint( this );"
                onfocus="clearAlert( this );"
                onblur="showHint( this ); requiredStatus( this );"
                />
            <span id="lastNameHint"
                class="hintSpan"
                onclick="focusInput( this );">
                    Last
            </span>
        </span>
        <span id="lastNameAlert"
            class="alertSpan">
        </span>
    </div>
    
    <br />
    
    <div style="clear:both">
        Email
        <br />
        <span style="position:relative">
            <input id="email"
                name="email"
                class="userInput"
                type="email"
                size="50"
                maxlength="30"
                value=""
               ...

CSS

body
{
    font-family: sans-serif;
    margin: 5px;
    font-size: 14px;
    background-image: url( 'http://dl.dropbox.com/u/12891826/phase_one.png' );
    background-repeat: repeat-y;
}

abbr
{
    border-bottom: 2px dotted #666;
}

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

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

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

.alertSpan
{
    font-family: sans-serif;
    font-size: 10px;
    color: rgb(191, 0, 0);
    display: none;
    margin: 5px;
    margin-top: 0px;
}

.userInput
{
    box-shadow: none;
    border: 1px solid #DDD;
    border-top: 1px solid #AAA;
}

textarea
{
    resize: none;
}

input, textarea, select
{
  -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;
}

input:hover, textarea:hover, select:hover
{
    border: 1px solid #777;
}

input:focus, textarea:focus, select:focus
{
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

input:disabled, textarea:disabled
{
    background-color: #FFF;
    color: #000;
}

.invalidInput
{
    border: 1px solid rgba(191, 0, 0, 1);
}

.invalidInput:hover
{
    border: 1px solid rgba(191, 0, 0, 1);
}

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

JavaScript

function formatJS()
{
    var all = document.getElementsByTagName( "*" );
    for( i = 0; i < all.length; i++ )
    {
        if( all[i].className.search( "hintSpan" ) != -1 )
        {
            all[i].style.display = "block";
        }
    }
}

var extraPOC = 1;
function addPOC()
{
    //sets max number of allowed extra POC's
    //currently set to 5
    if(extraPOC > 5)
    {
        alert("Only 5 extra POC's are allowed");
         return;   
    }
    
    //get the old div and make a new smaller div
    var pocDiv = document.getElementById('poc');
    var newDiv = document.createElement('div');
    
    ///////////////////////////////////////////////////////
    //create the spans to contain the text box for the title
    var titleWrapper = document.createElement('span');
    var titleSpan = document.createElement('span');
    titleSpan.setAttribute('style', 'position:relative');

    //make the text box
    var titleInput = document.createElement('input');
    titleInput.setAttribute('id', 'POC' + extraPOC);
    titleInput.setAttribute('name', 'POC' + extraPOC);
    titleInput.setAttribute('class', 'userInput');
    titleInput.setAttribute('type', 'text');
    titleInput.setAttribute('size', '22');
    titleInput.setAttribute('maxlength', '22');
    titleInput.setAttribute('value', '');
    titleInput.setAttribute('onkeydown', 'hideHint( this );');
    titleInput.setAttribute('onfocus', 'clearAlert( this );');
    titleInput.setAttribute('onblur', 'showHint( this );');
    titleInput.setAttribute('data-required', 'false');
    
    //make the hint span
    var inputHint= document.createElement('span');
    inputHint.setAttribute('id', 'POC' + extraPOC + 'Hint'); 
    inputHint.setAttribute('class', 'pocHintSpan');
    inputHint.setAttribute('onclick', 'focusInput( this );');
    inputHint.innerHTML = "Extra POC #" + extraPOC + " Title";
    
    //package the hint span and text box into the bigger span
    titleSpan.appendChild(titleInput);
   ...