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: "DR1", actualDate: "2019-02-02" },
{ label: "DR2", actualDate: "2019-03-03" },
{ label: "DR3", actualDate: "2019-09-13" },
/* { label: "DR4", actualDate: "2019-09-01" }, */
/* { label: "DR5", actualDate: "2019-09-06" }, */
];

/* var currentDate = new Date("2019-03-03"); */
var currentDate = new Date();
currentDate.setHours(0,0,0,0);
console.log(currentDate);


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();
  console.log(positionObj, milestones.length);
  if(positionObj.first === milestones.length){
  	for (var i = 0; i < milestones.length; i++){
    	tr.append(createEmptyCell(i, positionObj.first - 1, 1));
    }
  } else if (positionObj.first === positionObj.last){
  	for (var i = 0; i < milestones.length; i++){
    	tr.append(createEmptyCell(i, positionObj.first));
    }
  } else {
 		var pos = calcPositionBetween(positionObj);
    var milestoneCell;
		if (pos < 0.5){
    	milestoneCell = positionObj.first; 
      pos += 0.5;
    } else {
      milestoneCell = positionObj.last;
     ...