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

-->

CSS

table {
  border-collapse: collapse;
  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: calc(50% - 10px);
}

.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 currentDate = new Date("2019-01-01");

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

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

console.log(getCurrentDatePosition());

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

emptyTr = createTimelineRow();

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

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

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

function createTimelineRow(){
	var tr = document.createElement('tr');
  var positionObj = getCurrentDatePosition();
  if (positionObj.first === positionObj.last){
  	for (var i = 0; i < milestones.length; i++){
    	tr.append(createEmptyCell(i, positionObj.first));
    }
  } else {
  	
  }
  
  return tr;
}

function createEmptyCell(i, pos){
	console.log("i + pos", i, pos);
  var td = document.createElement("td");
  td.className = "bordered";
  	if (i == pos) {
    	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("|");
 ...