The countdown is a client-side, interactive web application that displays real-time countdowns to major U.S. holidays and observancces. It includes a "Next Occurrence" banner and a detailed list of all upcoming events. The app handles both fixed-date holidays (e.g., New Year, July 4th, Christmas) and movable ones (e.g., Easter, Memorial Day, Thanksgiving), provides customizable display options, and includes special messaging when today is a holiday.
This is a self-contained HTML file (with embedded CSS and JavaScript), making it easy to run locally.
Live Countdown:
The countdown updates every second.
Next Occurrence Banner:
Shows the next upcoming occurrence with either a full countdown or a simplified countdown with just days.
Occurrence List:
Shows all occurrences with the remaining time.
Display Toggles:
"Show Details" - Toggles between full countdown (Days, Hours, Minutes, Seconds) and simplified days-only view.
"Chronological Order" - Switches between the nearest-first and calendar-order sorting.
Smart Occurrence Handling:
Automatic detection of today's holiday with a personalized message.
Support for multi-day observances (e.g., National Fallen Firefighter Memorial Weekend).
Support for multiple observances on one day.
Responsive Design:
Works well on both desktop and mobile.
Real-time:
setInterval() for 1-second updates.
State Management:
Checkbox-driven UI state.
Code Organization:
Separation of config, helper functions, and main update loop.
Data Layer
An array for events defines every holida with the name, month, day, label, and an optional type for special rules.
Date Calculation
getTargetDate() routes to the correct calculator based on type (Easter, thirdMonday, ect.).
nextEventDate() returns the next future occurrence (for either this year or the next year if it already passed).
Main Update Loop:
upodateAll() runs every second (1000ms)
Calculates the time remaining for every holiday.
Identifies the next future occurrence.
Checks if today matches any holiday or occurrence.
Renders the banner for a special message and emoji if today is a holiday or a countdown to the next holiday.
Renders the full list using ROW_FULL or ROW_DAYS_ONLY templates.
User Controls
Checkbox change events trigger immediate re-render.
The date calculations for the moveable holidays were tricky when I was implementing them (especially Easter and getting the last Monday of the month). These methods required additional testing to ensure that it handled leap years and year boundaries correctly.
I also paid attention to the smaller details and added padded numbers (005 Days), proper pluralization handling, and thoughtful holiday messages to improve the quality of the application.