JSFiddle - React, Tailwind, and code Playground

by Saeed Abbaspour

HTML

<!-- Submitted Job History -->
<div class="layout-main" style="display:none">
    <table>
        <thead class="table-header">
            <th data-sort="int">Job Number</th>
            <th data-sort="string">Job Description</th>
            <th data-sort="int">Submission Date</th>
            <th>Status</th>
        </thead>
        <tr>
            <td>1234</td>
            <td>Apple</td>
            <td>02/01/2015</td>
            <td><a href="" class="btn default">Draft</a>
            </td>
        </tr>
        <tr>
            <td>4323</td>
            <td>Banana</td>
            <td>01/03/2015</td>
            <td><a href="" class="btn submit">Submitted</a>
            </td>
        </tr>
        <tr>
            <td>5463</td>
            <td>Orange</td>
            <td>01/01/2015</td>
            <td><a href="" class="btn process">Processing</a>
            </td>
        </tr>
        <tr>
            <td>123</td>
            <td>Some Painting</td>
            <td>01/01/2015</td>
            <td><a href="" class="btn notification">Notification</a>
            </td>
        </tr>
        <tr>
            <td>5634</td>
            <td>123</td>
            <td>01/01/2015</td>
            <td><a href="" class="btn complete">Finished</a>
            </td>
        </tr>
    </table>
</div>
<!-- Submitted Job Review/Display Modal -->
<div class="layout-main" style="display:none">
	<div>You have not submitted a job yet!</div>
	<div class="row"> 
		<a href="#new-job" id="submit-job" style="float:right; margin-top:10px" class="btn submit">Submit New Job</a>
    </div>
</div>
<!-- New Job Modal -->
<div id="new-job" class="layout-main">
    <div id="tab-container">
        <!-- Tbas Navigation -->
        <ul>
            <li>
            	<a href="#tabs-1"> Search </a>
            </li>
            <li>
            	<a href="#tabs-2"> Purpose </a>
            </li>
            <li>
            	<a href="#tabs-3"> Actions </a>
            </li>
            <li>
  ...

CSS

/* 

    Job Status Color Coding: 

        default:        #337AB7;
        submit:         #5CB85C;
        process:        #F0AD4E;
        notification:   #D9534F;
        complete:       #333;
        reset:          #c0c0c0;

*/

    @import url(http://fonts.googleapis.com/css?family=Lato:400, 100, 100italic, 300, 300italic, 400italic, 700, 700italic, 900, 900italic);


    /* Grid System */
    [class*='col-'] {
        float: left;
        padding: 0;
    }
    /* Use rows to create horizontal groups of columns */
    .row {
        margin: 0;
    }
    .row:after, .row:before {
        content:"";
        display: table;
        clear: both;
    }
    /* Content should be placed within columns, and only columns may be immediate children of rows */
    .col-1 {
        width: calc(100% * 1 / 12);
    }
    .col-2 {
        width: calc(100% * 2 / 12);
    }
    .col-3 {
        width: calc(100% * 3 / 12);
    }
    .col-4 {
        width: calc(100% * 4 / 12);
    }
    .col-5 {
        width: calc(100% * 5 / 12);
    }
    .col-6 {
        width: calc(100% * 6 / 12);
    }
    .col-7 {
        width: calc(100% * 7 / 12);
    }
    .col-8 {
        width: calc(100% * 8 / 12);
    }
    .col-9 {
        width: calc(100% * 9 / 12);
    }
    .col-10 {
        width: calc(100% * 10 / 12);
    }
    .col-11 {
        width: calc(100% * 11 / 12);
    }
    .col-12 {
        width: calc(100% * 12 / 12);
    }
    /* Move columns to the right using .col-md-offset-* classes */
    .col-offset-1 {
        margin-left: calc(100% * 1 / 12);
    }
    .col-offset-2 {
        margin-left: calc(100% * 2 / 12);
    }
    .col-offset-3 {
        margin-left: calc(100% * 3 / 12);
    }
    .col-offset-4 {
        margin-left: calc(100% * 4 / 12);
    }
    .col-offset-5 {
        margin-left: calc(100% * 5 / 12);
    }
    .col-offset-6 {
        margin-left: calc(100% * 6 / 12);
    }
    .col-offset-7 {
        margin-left: calc(100% * 7 / 12);
    }
    .col-offset-8 {
 ...

JavaScript

//Search for objects and add them to the selection 
$(document).ready(function() {

    var $search_form     = $("form[name='dynamic_query']");
    
    var _api_base_url    = "/api/v1/artifact/search/";
    
    var $results         = $("#results");
    var $pixelator       = null;
    
    

    $search_form.on("submit", function(event) {
        event.stopPropagation();

        
        // find the input fields that are contained within the form...
        var _api_url = ""; // start with an empty string, and then add the relevant query string attributes and values...
        $search_form.find("input").each(function(index, entity) {
            var $field = $(entity);
            var $name  = $field.attr("name"); // as we give our <input> tags the same names as the query string attributes that they populate, we can generate our api call dynamically
            var $value = $field.val();
            
            // console.log("form field: name: ", $name, "value: ", $value);
            
            if($value && $value.length > 0) { // make sure the value is non-empty, this should have additional error checking to make sure the string is not just whitespace, etc...
                _api_url += ((_api_url.length == 0)?"?":"&") + $name + "=" + encodeURIComponent($value);
            }
        });
        
        _api_url = _api_base_url + _api_url + ((_api_url.length == 0)?"?":"&") + "limit=5"; // apply an optional limit to our call (sets number of records per page)
    
        // console.log(_api_url);


        if(_api_url) {
            // call the api via ajax...
            $.ajax({
                type:"GET",
                url:"/static/scripts/ajax/ajax.related_objects.php?url="+encodeURIComponent(_api_url), // we need to use our 'pass through' script to call the api...
                dataType:"json",
                success:function(data){ // specify the ajax callback method (this receives the data back from the HTTP call if it was successful)...
    ...