JSFiddle - React, Tailwind, and code Playground

by Dan Wright

HTML

<body>
    <div id="formContainer">
        <div class="formHeader">
             <h2>Get in touch</h2>

        </div>
        <form method="post" action="#" class="formContact">
            <ul>
                <li>
                    <label class="formLabel" for="firstName">First Name<span class="formHelp">* Must have more than 3 chars</span><span class="formError">This field is required</span><span class="formComp">Complete</span>

                    </label>
                    <input id="firstName" class="required" name="firstName" value="First Name" />
                </li>
                <li>
                    <label class="formLabel">Surname Name<span class="formHelp">* Must have more than 3 chars</span>

                    </label>
                    <input class="voluntary" name="surnameName" value="" />
                </li>
                <li>
                    <label class="formLabel">Contact Email<span class="formHelp">* Prefered contact email</span>

                    </label>
                    <input class="required" name="email" type="email" placeholder="Contact Email" />
                </li>
                <li>
                    <label class="formLabel">Message<span class="formHelp">* Max 1000 chars</span>

                    </label>
                    <textarea class="required" name="message" placeholder="Write your message here" maxlength="1000"></textarea>
                </li>
            </ul>
        </form>
        <div class="formFooter">
            <div class="formFootCol1">
                <input id="submit" name="submit" type="submit" value="Submit" />
            </div>
            <div class="formFootCol2">
                <p class="formComments">Once Complete plese click Submit</p>
                <p class="formComments">Fields mark with a '*' are manditory</p>
            </div>
        </div>
    </div>
</body>

CSS

/* 
height:100% implies the element is going to have the 100% height of its parent container.

height:auto means, the element will have flexible height i.e. its height will depend upon the height of children elements of it 

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
*/
 body {
    width:960px;
    background-color: #efefef;
}
#formContainer {
    height:700px;
    width:480px;
    margin:0 auto;
    background-color:white;
}
.formHeader {
    height:100%;
    max-height:47px;
    width:100%;
    max-width:460px;
    background-color: #d5d5d5;
    padding:10px;
    margin:0;
}
#formContainer h2 {
    padding:0;
    margin:0;
}
form.formContact {
    width:100%;
    max-width:400px;
    height:auto;
    padding:10px;
    margin:0 auto;
    background-color: #efefef;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
li {
    margin:0;
    padding:0;
}
span {
    opacity : 0;
    filter : alpha(opacity=0);
}
span.formHelp, span.formError, span.formComp {
    font-size:0.75em;
    font-style:italic;
    padding-left:10px;
}
span.formHelp {
    color:blue;
}
span.formError {
    color:red;
}
span.formComp {
    color:green;
}
label.formLabel {
    display:block;
    height:25px;
    width:100%;
    max-width:400px;
    padding-top:10px;
    font-size:1em;
    margin:0 auto;
}
ul li:nth-child(1) label {
    padding-top:0px
}
label.formLabel, input, textarea {
    letter-spacing:2px;
}
input, textarea {
    width:100%;
    max-width:398px;
    padding:0;
    margin:0 auto;
    text-indent:5px;
    border:1px solid #d5d5d5;
}
input:focus, textarea:focus {
    border:1px solid #97d6eb;
}
textarea {
    resize:none;
    height:324px;
}
input {
    height:27px;
}
.required {
    background:rgb(248, 106, 86);
    background:rgba(248, 106, 86, 0.3);
    /* background-color:#FCC0B8; 
       opacity : 0.2;
       filter : alpha(opacity=20); */
}
.voluntary {
    background:rgb(173, 255, 47);
    background:rgba(173, 255, 47, 0.3);
}
.complete {
   ...

JavaScript

$(function () {
    var newId = $('form.formContact').on('focus', 'input, textarea', function (focusedId) {
        console.log(this);
        console.log($(this).attr('id'));
        console.log(focusedId);

        var input = $(this).attr('id');
        alert(input + ' id');
        var defaultVal = $(this).val();
        alert(defaultVal + ' valueStart');
        //var userfname = input.val();
        //alert(userfname + ' userfname');

        if ($(this).hasClass('required')) {
            $(this).removeClass('required');
            $(this).addClass('cursorFocusRequired');
        } else {
            $(this).removeClass('voluntary');
            $(this).addClass('cursorFocusVoluntary');
        }
    });

    var oldId = $('form.formContact').on('blur', 'input, textarea', function (bluredId) {
        console.log(this); // logs the list item that was clicked
        console.log($(this).attr('id'));
        console.log(bluredId);
        
        var userVal = 

        if ($(this).hasClass('cursorFocusRequired')) {
            $(this).removeClass('cursorFocusRequired');
            $(this).addClass('required');
        } else {
            $(this).removeClass('cursorFocusVoluntary');
            $(this).addClass('voluntary');
        }
    });

    $('#submit').click(function () {
        var fnameFin = $('#firstName').val();
        alert(fnameFin);
        var lname = $('#lname').val();
        var age = $('#age').val();

    });
});




//$( '<li>a new list item!</li>' ).appendTo( '#my-unordered-list' );