JSFiddle - React, Tailwind, and code Playground

by chrisfrisina

HTML

<html>
    <head></head>
    <body>

    <section class="techtable">
            <h1>Technologies / Compliance / Certifications</h1>
            <table cellspacing="0">
                <thead>
                    <tr>
                        <th>Category</th>
                        <th>Skill</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Elapsed Time</th>
                        <th>Version(s)</th>
                        <th>Expertise Rating</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Technology</td>
                        <td>J2EE</td>
                        <td>November, 2011</td>
                        <td></td>
                        <td></td>
                        <td>1.5, 1.6, 1.7</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>Technology</td>
                        <td>JS</td>
                        <td>April, 2012</td>
                        <td></td>
                        <td></td>
                        <td>N/A</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>Compliance</td>
                        <td>CIP</td>
                        <td>May, 2008</td>
                        <td>August, 2011</td>
                        <td></td>
                        <td></td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>Certification</td>
                        <td>Red Cross</td>
                        <td>May, 2007</td>
                        <td>April, 2013</td>
                        <td></td>
                        <td>First Aid, CPR</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>Compliance</td>
           ...

JavaScript

(function() {  
//TODO, make this function global
//Date
    function getCurrentDate() {
        var d = new Date();
        var m = new Array(7);
        var y = d.getFullYear();
        m[0] = "January";
        m[1] = "February";
        m[2] = "March";
        m[3] = "April";
        m[4] = "May";
        m[5] = "June";
        m[6] = "July";
        m[7] = "August";
        m[8] = "September";
        m[9] = "October";
        m[10] = "November";
        m[11] = "December";
        return m[d.getMonth()] + ", " + y;    
    };

//hide the Category Column
    $('section.techtable th:nth-child(1)').hide();
    $('section.techtable td:nth-child(1)').hide();
//fill in blank end dates with Today's date
    $('section.techtable td:nth-child(4)').each(function() {
        if ($(this).is(':empty')) {
            $(this).append(getCurrentDate());
        };
    });
//fill in blank elapsed time
    var endskill = [];
    $('section.techtable td:nth-child(4)').each(function(){ endskill.push($(this).html()); });
    console.log(endskill);
    var startskill = [];
    $('section.techtable td:nth-child(3)').each(function(){ startskill.push($(this).html()); });
    console.log(startskill);
    $('section.techtable td:nth-child(5)').each(function() {
        var elapsedT = new Date(endskill[$(this)] - startskill[$(this)]); // in ms            
        $(this).append(elapsedT);
    });
})();