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/2.0.1/luxon.min.js"></script>
<div id="dayn"></div>
<div id="countD"></div>
<div id="parent">
  <div id="demo"></div><div id="next"></div>
</div>

JavaScript

var d = new Date();
var tz = new Date().toLocaleString("UTC", {timeZone: "America/Boise"})
var iso = new Date().toISOString();
//var isoYear = iso.getFullYear()
var n = d.getDay();
//var hour = d.getHours();
var mm = d.getMinutes()
var dayn = d.getDay()
var dateN = d.getDate()  // today
console.log({dayn, dateN, tz, iso})
var noon = "12:00:00"  //sets the time in the countDown function for all days but mon pre sunrise

var nextAct = {}
const year = d.getFullYear()
const month = d.toLocaleString('default', { month: 'long' });

var times = SunCalc.getTimes(new Date(), 43.5, -115.1);
var sunrise = times.sunrise.getHours().toString().padStart(2, '0') + ':' + times.sunrise.getMinutes().toString().padStart(2, '0');
//console.log(sunrise)
//luxon weekday is number cccc is text wednesday
//const DateTime = luxon.DateTime;

const dt = luxon.DateTime;
const DateTime = luxon.DateTime;
const HHmm = dt.local().setZone("America/Boise").toFormat('HH:mm');

const date = dt.now().weekNumber
const full = dt.local().setZone("America/Boise").toFormat("LLL dd', 'y TTT");
var hour = dt.local().setZone("America/Boise").toFormat('HH');
// luxon sunday is 7
var dayn2 = dt.local().setZone("America/Boise").toFormat('c');
var dateN2 = DateTime.local().setZone("America/Boise").toFormat('dd');
console.log({dayn2, dateN2, hour, HHmm})

//dayn = 6
//hour = 12
//HHmm = "05:01"
//var sunrise = "07:47"

var d = document.getElementById('dayn');
//.innerHTML = ('vanilla day # ' + dayn)

var countD =  document.getElementById('countD');

if (dayn == "0" &&  hour <= 11) {
nextAct = 'kayaking.'
sunr(month, dateN, year, noon)
 countD.innerHTML = "sun am";
 console.log({HHmm, sunrise, dateN, dayn})
}
else if (dayn == "0") {
// sunrise
nextAct = 'Surfing.'
sunr(month, (dateN+1), year, sunrise)
 countD.innerHTML = "sun pm";
 
}
//pre sunrise
else if (dayn == "1" && HHmm < sunrise ) {
//var noon = sunrise //change over is sunrise not var  noon = '12:00'
nextAct = 'surfing.'
sunr(month, dateN, year, sunrise)
...