Creative work: Build a web page that changes colors based on time of day

I didn’t follow the exact creative work idea, but I did something very much in its spirit. Today, I added a small box to the header of this website and wrote JavaScript code to determine the current liturgical season based on today’s date. The script then displays the season and updates the element’s class name so it can be styled however the artist desires. For this site, I kept it simple—just a background color swap.

As a “seasoned” software developer, I knew a simple Google search would give me the JavaScript logic for calculating Easter, so I didn’t have to reinvent the wheel. But the process of exploring it and playing within the logic still deepened my appreciation for how time is measured in the liturgical year.

[Part of the code below]

---

This project made me think about the calendar in a way I rarely do—through a faith perspective. I enjoyed researching the timing of different liturgical days. For example, Pentecost falls a set number of days after Easter, but determining the actual date of Easter was fascinating. Since it’s based on the phase of the moon, it led me down a rabbit hole of learning about ecclesiastical approximation.

I wonder as I go further down my faith journey do I start to just know this stuff and start to count time by the liturgical calendar? It is nice to think about that

---

function getEasterDate(year) {
    const a = year % 19;
    const b = Math.floor(year / 100);
    const c = year % 100;
    const d = Math.floor(b / 4);
    const e = b % 4;
    const f = Math.floor((b + 8) / 25);
    const g = Math.floor((b - f + 1) / 3);
    const h = (19 * a + b - d - g + 15) % 30;
    const i = Math.floor(c / 4);
    const k = c % 4;
    const l = (32 + 2 * e + 2 * i - h - k) % 7;
    const m = Math.floor((a + 11 * h + 22 * l) / 451);
    const month = Math.floor((h + l - 7 * m + 114) / 31);
    const day = ((h + l - 7 * m + 114) % 31) + 1;

    return new Date(year, month - 1, day); // Month is zero-based (0 = January)
}

// Example: Get Easter for 2025
console.log(getEasterDate(2025).toDateString()); // Outputs: "Sun Apr 20 2025"

   function getAdventStartDate(year) {
        // Advent begins on the fourth Sunday before Christmas
        const christmas = new Date(year, 11, 25);
        let adventStart = new Date(christmas);
        adventStart.setDate(adventStart.getDate() - (christmas.getDay() + 21) % 28);
        return adventStart;
    }

function getLiturgicalSeason(date) {
        const year = date.getFullYear();
        const easter = getEasterDate(year);
        const ashWednesday = new Date(easter);
        ashWednesday.setDate(easter.getDate() - 46);
        const pentecost = new Date(easter);
        pentecost.setDate(easter.getDate() + 49);
        const adventStart = getAdventStartDate(year);
        const christmas = new Date(year, 11, 25); // December 25

        if (date >= ashWednesday && date < easter) {
            return { season: "lent", label: "Lent" };
        } else if (date >= easter && date < pentecost) {
            return { season: "easter", label: "Easter" };
        } else if (date >= pentecost && date < adventStart) {
            return { season: "ordinary-time", label: "Ordinary Time" };
        } else if (date >= adventStart && date < christmas) {
            return { season: "advent", label: "Advent" };
        } else if (date >= christmas || date < ashWednesday) {
            return { season: "christmas", label: "Christmas" };
        }

        return { season: "ordinary-time", label: "Ordinary Time" }; // Default fallback
    }