JSFiddle - React, Tailwind, and code Playground

by Fred Fourie

HTML

<svg width="400" height="400">

<rect x="100" y="100" width="200" height="200" fill="#1B75BC" fill-opacity="0.8" rx="20" ry="20"/>

<rect id ="level" x="100" y="100" width="200" height="50" fill="#996633" fill-opacity="0.8" rx="20" ry="20"/>

<circle cx="200" cy="200" r="59" fill="white" />
  
<text x="0" y="15" id="txt" fill="black">I love SVG!</text>


</svg>

JavaScript

function toHHMMSS (secs) { 
								console.log(secs);
                var seconds = parseInt(secs, 10); // don't forget the second param
                var hours   = Math.floor(seconds / 3600);
                var minutes = Math.floor((seconds - (hours * 3600)) / 60);
                var seconds = seconds - (hours * 3600) - (minutes * 60);

                if (hours   < 10) {hours   = "0"+hours;}
                if (minutes < 10) {minutes = "0"+minutes;}
                if (seconds < 10) {seconds = "0"+seconds;}
                var time    = hours+':'+minutes+':'+seconds;
                return time;
}

var low = new Date();
low.setHours(8);
low.setMinutes(0);
/*low.setFullYear(1970);
low.setMonth(1);
low.setDate(1);*/


var high = new Date();
high.setHours(14);
high.setMinutes(12);
/*high.setFullYear(1970);
high.setMonth(1);
high.setDate(1);*/

var timeNow = new Date();
var timeHHMM = timeNow.toLocaleTimeString();
/*timeNow.setFullYear(1970);
timeNow.setMonth(1);
timeNow.setDate(1);*/

var goingLow = "True";
if (timeNow.getTime() < high.getTime()){
		//goingLow = "false";
    var diff = high.getTime() - low.getTime();
    var diffTime = toHHMMSS(diff);
    goingLow = diff;
    goingLow = "(High)"+high.getTime()+"- (low)"+low.getTime()+" = "+ diffTime;//.replace(/(.*)\D\d+/, '$1');
 
}
//High tides will be spaced 12 hours and 25 minutes apart.
// Thus low is 6 hours and 12.5 minutes away from high
// So 06:12 minutes is 100%
document.getElementById("txt").innerHTML=timeHHMM+" Low : "+low.toLocaleTimeString().replace(/(.*)\D\d+/, '$1')+" High : "+high.toLocaleTimeString().replace(/(.*)\D\d+/, '$1')+"  Time until High: "+goingLow;
var myrect = document.getElementById('level');
myrect.style.height = 130;