CSS variable change if statement

Changes CSS variable if date equals today

by akmiecik

HTML

<div id="easter_date">
 04/17/2022
</div>

CSS

:root {
  --season: #000000;
}


#easter_date {
  color: var(--season);
  font-size: 2em;
}

JavaScript

function easterDate(Y) {
  let M=3, G= Y % 19+1, C= ~~(Y/100)+1, L=~~((3*C)/4)-12,
      E=(11*G+20+ ~~((8*C+5)/25)-5-L)%30, D;
  E<0 && (E+=30);
  (E==25 && G>11 || E==24) && E++;
  (D=44-E)<21 && (D+=30);
  (D+=7-(~~((5*Y)/4)-L-10+D)%7)>31 && (D-=31,M=4);
  return M + '/' + D + '/' + Y;
  }
var easter_is = new Date().getFullYear();

var easter_date = document.getElementById("easter_date");
let contents = easter_date.innerHTML;
var easter_is = new Date(contents);
var pentecost = new Date('06/05/2022');
var advent = new Date('11/27/2022');
var today = new Date(contents);

if (pentecost.setHours(0,0,0,0) > today.setHours(0,0,0,0)) {
document.body.style.setProperty('--season', '#d4af37');
} else if (advent.setHours(0,0,0,0) <= today.setHours(0,0,0,0)) {
document.body.style.setProperty('--season', '#3E0A4C');
}else{
document.body.style.setProperty('--season', '#004400');
}

console.log(easter_is);