JSFiddle - React, Tailwind, and code Playground
HTML
<section id="gc_section_we" class="gc section workexperience"><h1>Work Experience</h1>
<section class="company"><h1>Job 5</h1>
<section class="position"><h1>Title 5.1</h1>
<time class="start" datetime="2012-10">Oct 2012</time>
<time class="end" datetime=""></time>
<p>Description</p>
</section>
</section>
<br>
<section class="company"><h1>Job 4</h1>
<section class="position"><h1>Title 4.1</h1>
<time class="start" datetime="2012-07">Jul 2012</time>
<time class="end" datetime="2012-09">Sep 2012</time>
<p>Description</p>
</section>
</section>
<br>
<section class="company"><h1>Job 3</h1>
<section class="position"><h1>Title 3.6</h1>
<time class="start" datetime="2010-07">Jul 2010</time>
<time class="end" datetime=""></time>
<p>Description</p>
</section>
<section class="position"><h1>Title 3.5</h1>
<time class="start" datetime="2010-02">Feb 2010</time>
<time class="end" datetime="2011-12">Dec 2011</time>
<p>Description</p>
</section>
<section class="position"><h1>Title 3.4</h1>
<time class="start" datetime="2009-02">Feb 2009</time>
<time class="end" datetime="2010-01">Jan 2010</time>
...
JavaScript
// Work Experience
//functions
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;
};
function currentDateYMFormat(){
var d = new Date();
var m = new Array(7);
var y = d.getFullYear();
m[0] = "01"; m[1] = "02"; m[2] = "03"; m[3] = "04"; m[4] = "05"; m[5] = "06"; m[6] = "07"; m[7] = "08"; m[8] = "09"; m[9] = "10"; m[10] = "11"; m[11] = "12";
return y + '-' + m[d.getMonth()];
};
//workexperience company position end date if empty
$('.workexperience .company .position > time.end').each(function(){
if (!($(this).attr('datetime'))){
$(this).attr('datetime', currentDateYMFormat());
$(this).html('Current');
}
});
//generate the company start and end dates
$('.workexperience section.company').each(processCompanyTime);
function pad(number) {
var width = 2;
var str = '' + number;
while (number.length < width) {
str = '0' + str;
}
return str;
}
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() {
...