JSFiddle - React, Tailwind, and code Playground

by Victor Melnik

HTML

<input type="range" id="range" max="1439" />
<p id="time"></p>
<p id="coef"></p>
<div id="panel" />

CSS

input[type="range"] {
    width: 50%;
}

#panel {
    width: 50%;
    height: 200px;
}

JavaScript

var noon = 760, midnight = 40;
var time = Math.floor(new Date().getTime() / 60000) % 1440;

$('#range').val(time);
$('#range').change(function () {
    recalculate($(this).val());
});
recalculate(time);

function recalculate(time) {
    $('#time').html('Time: ' + minutesToTime(time) + '<br/>'
            + 'Midnight: ' + minutesToTime(midnight) + '<br/>'
            + 'Noon: ' + minutesToTime(noon));
    
    var vtime=time;
    var coef;
    if(time<=noon && time>midnight) {
      coef=time/noon;
    } else {
      if(time>=0 && time<midnight) {
        vtime=1440-(midnight-time);
        coef=1 - (vtime - noon) / 720;
      }
      if(time==midnight) coef=0;
    }
    $('#coef').text(coef);
    
    var noonColor = [163, 233, 247];//0xA3E9F7;
    var midnightColor = [19, 62, 99];//0x133E63;
    var col = [interpolate(noonColor[0], midnightColor[0], coef),
               interpolate(noonColor[1], midnightColor[1], coef),
               interpolate(noonColor[2], midnightColor[2], coef)];
    $('#panel').css('background-color',
          'rgb(' + col[0] + ',' + col[1] + ',' + col[2] + ')');
}


function minutesToTime(minutes) {
    var hour = Math.floor(minutes / 60) % 24;
    if (hour < 10) hour = '0' + hour;
    
    var minute = minutes % 60;
    if (minute < 10) minute = '0' + minute;
    return hour + ':' + minute;
}

function interpolate(p1, p2, coe) {
    return Math.floor(p2 + (p1 - p2) * coe);
}