JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="tricolor-schedule">

  <div class="ts-hours-ruler">
    <div class="ts-hours-ruler-item">
      3:00
    </div>
    <div class="ts-hours-ruler-item">
      4:00
    </div>
    <div class="ts-hours-ruler-item">
      5:00
    </div>
    <div class="ts-hours-ruler-item">
      6:00
    </div>
    <div class="ts-hours-ruler-item">
      7:00
    </div>
    <div class="ts-hours-ruler-item">
      8:00
    </div>
    <div class="ts-hours-ruler-item">
      9:00
    </div>
    <div class="ts-hours-ruler-item">
      10:00
    </div>
    <div class="ts-hours-ruler-item">
      11:00
    </div>
    <div class="ts-hours-ruler-item">
      12:00
    </div>
    <div class="ts-hours-ruler-item">
      13:00
    </div>
    <div class="ts-hours-ruler-item">
      14:00
    </div>
    <div class="ts-hours-ruler-item">
      15:00
    </div>
    <div class="ts-hours-ruler-item">
      16:00
    </div>
    <div class="ts-hours-ruler-item">
      17:00
    </div>
    <div class="ts-hours-ruler-item">
      18:00
    </div>
    <div class="ts-hours-ruler-item">
      19:00
    </div>
    <div class="ts-hours-ruler-item">
      20:00
    </div>
    <div class="ts-hours-ruler-item">
      21:00
    </div>
    <div class="ts-hours-ruler-item">
      22:00
    </div>
    <div class="ts-hours-ruler-item">
      23:00
    </div>
    <div class="ts-hours-ruler-item">
      0:00
    </div>
    <div class="ts-hours-ruler-item">
      1:00
    </div>
    <div class="ts-hours-ruler-item">
      2:00
    </div>
  </div>

  <div id="now-line" class="ts-now-line">

  </div>


</div>

SCSS

.tricolor-schedule {
  position: relative;
  overflow: hidden;
  width: 1920px;
  height: 400px;
  background: #ccc;
}

.ts-hours-ruler {
  overflow: hidden;
}

.ts-hours-ruler-item {
  box-sizing: border-box;
  display: block;
  float: left;
  width: 80px;
  height: 40px;
  border-right: 1px solid #444;
  background: #fff;
  text-align: center;
  line-height: 40px;
}

.ts-now-line {
  display: block;
  position: absolute;
  top: 0; left: -2px;
  width: 2px;
  height: 100%;
  background: #00f;
}

JavaScript

var $nowLine = $('#now-line');

var scheduleApp = {
  'init': function() {
  	scheduleApp.constructNowLine();
  },
  'constructNowLine':function(){
    scheduleApp.showNowLine();
    setInterval(function(){ scheduleApp.showNowLine(); }, 15000);
  },
  'showNowLine': function() {
  	var hrs = new Date().getHours();
    var mns = new Date().getMinutes();
  	var hrsShift = (hrs-3) * 80 < 0 ? (hrs+21) * 80 : (hrs-3) * 80;
    var mnsShift = Math.ceil(mns*1.3);
    console.log(hrs,mns,hrsShift+mnsShift);
  	$nowLine.attr('style','left:'+(hrsShift+mnsShift)+'px;');
  }
};


scheduleApp.init();