JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div id='timeline'></div>
<!-- 
  1. calculate where indicator should be in timeline !dates between!
  2. find percent towards to next date
    2.1. If < 50% -> prev cell
    2.2. next cell
  3. divide current date to current cell date
  4. add % indicator left margin

-->

<!-- <table>
 <tr>
   <td>
     <div class="align_center">OR <br/>|</div>
   </td>
   <td>
     <div class="align_center">OR <br/>|</div>
   </td>
   <td>
     <div class="align_center">OR <br/>|</div>
   </td>
   <td>
     <div class="align_center">OR <br/>|</div>
   </td>
   <td>
     <div class="align_center">OR <br/>|</div>
   </td>
   <td>
     <div class="align_center">OR <br/>|</div>
   </td>
 </tr>
 <tr>
   <td><div class="indicator bordered"></div></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
</tr>
<tr>
  <td><div class="align_center">12-Jul-19</div></td>
  <td><div class="align_center">12-Jul-19</div></td>
  <td><div class="align_center">12-Jul-19</div></td>
  <td><div class="align_center">12-Jul-19</div></td>
  <td><div class="align_center">12-Jul-19</div></td>
  <td><div class="align_center">12-Jul-19</div></td>
</tr>
</table> -->

CSS

table {
  table-layout: fixed;
  width: 100%;
}

#wrapper {
  display: flex;
}

.milestone {
  display: inline-block;
  width: 60px;
  height: 100px;
  /* margin: 0 10px 0 10px; */
  /* margin: 0 0 0 0; */
  box-sizing: border-box;
}

.bordered {
  border: 1px solid black;
}

.indicator {
  position: relative;
  width: 20px;
  height: 20px;
  margin-left: 50%;
}

.align_center {
  text-align: center;
}

JavaScript

var milestones = [
{ label: "OR", actualDate: "2019-01-01" },
{ label: "DR1", actualDate: "2019-02-02" },
{ label: "DR2", actualDate: "2019-03-03" },
{ label: "DR3", actualDate: "2019-04-04" },
{ label: "DR4", actualDate: "2019-05-05" },
{ label: "DR5", actualDate: "2019-06-06" },
];

var table = document.createElement('table');
/* console.log(timelineTable); */

var labelTr = document.createElement('tr');
var emptyTr = document.createElement('tr');
var dateTr = document.createElement('tr');

for (var i = 0; i < milestones.length; i++) {
	labelTr.append(createLabelCell(milestones[i].label));
	emptyTr.append(createEmptyCell(i));
	dateTr.append(createDateCell(milestones[i].actualDate));
}

table.append(labelTr);
table.append(emptyTr);
table.append(dateTr);

console.log(table);

var timeline = document.getElementById('timeline');
timeline.append(table);

function createLabelCell(label){
  var container =  getDivContainer();
  container.append(label);
  container.append(document.createElement('br'));
  container.append("|");
  /* container.append(line) */;
  var td = document.createElement("td");
  td.append(container);
  return td;
}

function createEmptyCell(i){
  var td = document.createElement("td");
  	if (i == 0) {
    	var div = document.createElement("div");
      div.className = 'indicator bordered';
      td.append(div);
    }
  return td;
}

function createDateCell(date){
	var td = document.createElement("td");
  var container =  getDivContainer();
  container.append("|");
  container.append(document.createElement('br'));
  container.append(date);
  td.append(container);
  return td;
}

function getDivContainer() {
	var container =  document.createElement('div');
  container.className = "align_center";
  return container;
}