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>
<div id="next"></div>
<div id="float-cdown"></div>
<div id="count"></div>

JavaScript

var d = new Date()
//var d = new Date()
var today = d.getDate()
console.log("todays date: " + today)
d.setDate(d.getDate() + 1)
//console.log(d)
//var d = new Date()
console.log("date 1 day ahead: " + d.getDate())
var tmwDate =  d.getDate()
//reset the date
var d = new Date()
d.setDate(d.getDate() + 2)
// this is for monday deadline 2 days away
var mon2days = d.getDate()
console.log("date 2 days " + mon2days)
//reset the date
var d = new Date()
var mm = d.getMinutes()

var hour = d.getHours()
var HHmm = (hour + ":" + mm)
console.log({HHmm});
var dayn = d.getDay()
console.log({dayn})
var dateN = d.getDate()
var noon = "12:00:00"
//sets the time  for all days but mon pre sunrise

var year = d.getFullYear()
var month = d.toLocaleString('default', {
    month: 'long'
});
month = d.toLocaleString('default', {
    month: 'long' + 1 });
console.log(month)
// sunrise with suncalc ror sunday pm monday early am
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)

//var dhtml = document.getElementById('dayn');
//dhtml.innerHTML = ('todays date: ' + dateN)

//var weekD =  document.getElementById('now');

if (dayn == "0" && hour <= 11) {
    nextAct = 'kayaking.'
    sunr(month, dateN, year, noon)
    //weekD.innerHTML = "sun am";
} else if (dayn == "0") {
    nextAct = 'Surfing.'
    sunr(month, tmwDate, year, sunrise)
    //weekD.innerHTML = "sun pm";
}//pre sunrise
else if (dayn == "1" && HHmm < sunrise) {
    nextAct = 'surfing.'
    sunr(month, dateN, year, sunrise)
    //weekD.innerHTML = "mon morning before sunrise";
} else if (dayn == "1" && HHmm >= sunrise && hour <= 11) {
    nextAct = 'kayaking.'
    sunr(month, mon2days, year, noon)
    //weekD.innerHTML = "mon morning after sunrise + 2 days";
} else if (dayn == "1") {
    nextAct = 'kayaking.'
    sunr(month, mon2days, year, noon)
    //weekD.innerHTML =...