JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/suncalc/1.8.0/suncalc.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/1.26.0/luxon.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<div style="position:relative">    
  <div id="status"></div>
  <div id="time"></div>
  <div id="sunrise"></div>
  <div id="day"></div>
   
</div>

JavaScript

var times = SunCalc.getTimes(new Date(), 43.5, -115.1);
//console.log(times)
var sunRise = times.sunrise.getHours().toString().padStart(2, '0') + ':' + times.sunrise.getMinutes().toString().padStart(2, '0');
console.log(times.dawn.getHours().toString().padStart(2, '0') + ':' + times.dawn.getMinutes().toString().padStart(2, '0'))

/*
Sunday is 0
*/
var x = document.getElementById('status');
var s = document.getElementById('sunrise');
var r = document.getElementById('round');
var t = document.getElementById('time');
var d = document.getElementById('day');

// luxon.js set to boise time America/Boise
// testing Pacific/Honolulu
var dayn = (luxon.DateTime.local().setZone("America/Boise").toFormat('dd'))
var zeroHm = luxon.DateTime.local().setZone("America/Boise").toLocaleString({ hour: '2-digit', minute: '2-digit', hour12: false })

//testing
var dayn = 1

t.innerHTML = ('Now: ' + zeroHm)
s.innerHTML = ('Sunrise: ' + sunRise) 
d.innerHTML = ('day: ' + dayn) 
if (zeroHm <= sunRise && dayn == 1) {
   x.innerHTML = (zeroHm + " is less than " + sunRise + " kayak"); 
}
else if (zeroHm >= sunRise && dayn == 1)
{ 
x.innerHTML = (zeroHm + " is greater than  " + sunRise + " surf."); 
}
else {
x.innerHTML = ("error.")
}