JSFiddle - React, Tailwind, and code Playground

by chrisfrisina

HTML

<div id="main-container" class="wrapper">
    <div id="main">
        <div class="commentWrapper" id="commentWrapper">
            <div class="block aside" id ="comment">
                <aside>
                    <form class="form">
                        <fieldset class="workexperience">
                            <input type="checkbox" id="workexperience_all" name="workexperience_all" />
                            <label for="workexperience_all">Work Experience</label><br>
                            <label for="startdate">Start Date</label>
                            <input id="startdate" name="startdate" type="text" value="" />
                            <label for="enddate">End Date</label>
                            <input id="enddate" name="enddate" type="text" value="" />
                        </fieldset>
                    </form>
                </aside>
            </div>
        </div>

        <div class="block gc">
            <section class="workexperience"><h1>Work Experience</h1>
                <section class="company"><h1>FedEx Ground</h1>
                    <section class="position"><h1>Contractor Corporate Liaison - IT Development Projects</h1>
                        <time class="start" datetime="2010-07">JUL 2010</time>
                        <time class="end" datetime="2012-06">CURRENT</time>
                        <p>DESCRIPTION</p>
                        <ul>
                            <li>Contractor Optimization
                                <ul>
                                    <li>J2EE development analyzing business models to highlight revenue opportunity (mySQL, JSF/myFaces, Spring, Hibernate, Tomcat, Maven, XML, and X/HTML, with Git versioning) in a traditional Waterfall developing environment comprised solely of myself, end to end in Eclipse</li>
                                </ul>
                            </li>
                            <li>Vehicle Rental standardization
                               ...

CSS

.wrapper{
    display: inline-block;
    width:100%;
/*    margin:0 5%; */
}
.block {
    display: block;
    padding: 5px 5px 5px;
    margin: 5px 5px;
}

.gc {
    width:70%;
    float: left;
    border: 1px solid #F16529;
}
.aside {
    font-size: 11px;
}

#commentWrapper {
    float: right;
}

#comment {
    float: right;
    top: 0;
    /* Can include margins in the sliding effect here */
}

#comment.fixed {
    position: fixed;
    top: 0;
}

#main aside article {
    float:right;
    width:25%;
}

JavaScript

// Work Experience Range
    // Initialize the start date and end date function.
    (function () {
        var start = [];
        var end = [];
        //for each time.start section
        $('section.position time.start').each(function () {
            //add the 'datetime' attr to the start[]
            start.push($(this).attr('datetime'));
            //sort start[] by using compareTime
            start.sort(compareTime);
            //place the first value of start[] in the startdate box
            $('#startdate').val(start[0]);
        });
        $('section.position time.end').each(function () {
            end.push($(this).attr('datetime'));
            end.sort(compareTime);
            $('#enddate').val(end[end.length - 1]);
        });
    })();   

        $('section.company').each(processCompanyTime);

    //functions
        function compareTime(a, b) {
            a = processTime(a);
            b = processTime(b);
            if (a.year != b.year) {
                return a.year - b.year;
            }
            return a.month - b.month;
        }
        function processTime(time) {
            var splitresults = time.split('-');
            time = {};
            time.year = splitresults[0];
            time.month = splitresults[1];
            return time;
        }
        function processCompanyTime() {
            var start = [];
            var end = [];
            $(this).find('section.position > time.start:visible').each(function () {
                start.push($(this).attr('datetime'));
            });
            $(this).find('section.position > time.end:visible').each(function () {
                end.push($(this).attr('datetime'));
            });
            if (start.length == 0 && end.length == 0) {
                $(this).hide();
            } else {
                $(this).show();
            }
            start.sort(compareTime);
            end.sort(compareTime);
        //Dynamically set company level start and end...