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="day"></div>
<div id="dayn"></div>
<div id="date"></div>
<div class="iline" id="float-cdown"></div>
<div >
<div class="iline" id="count"></div>
 -- 
<div class="iline" id="next"></div>
</div>
<p id="now"></p>

<p id="tomprint"></p>
<div id="twoDays"></div>

CSS

.iline{
  display: inline-block;
}

JavaScript

//var tomdat = new Date("2021-8-3")
var d = new Date()

d.setDate(d.getDate() + 1)
console.log(d)

console.log(d.getDate())
var tmwDate =  d.getDate()
d.setDate(d.getDate() + 2)
// this is for monday deadline 2 days away
var mon2days = d.getDate()
console.log(mon2days)

var mm = d.getMinutes()
var hour = d.getHours()
var dayn = d.getDay()
var dateN = d.getDate()
var noon = "12:00:00"
//sets the time  for all days but mon pre sunrise

const year = d.getFullYear()
const month = d.toLocaleString('default', {
    month: 'long'
});
// 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, mon2days, 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 = "monday afternoon";
} else if (dayn == "2") {
    nextAct = 'kayaking.'
    sunr(month, tmwDate, year, noon)
    weekD.innerHTML = "tuesday all day";
} else if (dayn == "3" && hour <= 11) {
    nextAct = 'kayaking.'
    sunr(month, dateN, year, noon)
    weekD.innerHTML = "wed am";
} else if (dayn == "3") {
    nextAct = 'surfing.'
   ...