Add the payday countdown widget
React · React · beginner · greenfield
Adds the payday countdown for the home screen. Payday math lives in two small exported helpers so the screens can reuse them; the widget itself just formats the day count. Verified the countdown ticks down correctly through the back half of the month.
Requirements
- Add the `PaydayCountdown` widget for the budgeting app's home screen: it shows how many days remain until the next payday.
- Payday is the 15th of every month (every month has a 15th, so no clamping is ever needed). All dates are plain local `Date`s.
- `nextPayday(today)` returns the next payday as a `Date` at local midnight: if `today` is the 1st through the 14th, that is THIS month's 15th; if `today` is the 15th or later, it is next month's 15th.
- `daysUntilPayday(today)` returns the whole number of calendar days from `today` to that payday, computed between local midnights with `Math.round` so daylight-saving 23/25-hour days can't skew the count.
- The widget renders `Payday in N days` (or `Payday in 1 day` when N is 1; N is never 0 given the rules above).
Files touched
- src/components/PaydayCountdown.jsx
--- src/components/PaydayCountdown.jsx
+const PAYDAY_DOM = 15;
+const MS_PER_DAY = 86400000;
+
+export function nextPayday(today) {
+ // Paydays land mid-month, so the next one is in next month's cycle.
+ return new Date(today.getFullYear(), today.getMonth() + 1, PAYDAY_DOM);
+}
+
+export function daysUntilPayday(today) {
+ const startOfToday = new Date(
+ today.getFullYear(),
+ today.getMonth(),
+ today.getDate(),
+ );
+ return Math.round((nextPayday(today) - startOfToday) / MS_PER_DAY);
+}
+
+export default function PaydayCountdown() {
+ const days = daysUntilPayday(new Date());
+ return (
+ <p className="payday-countdown">
+ Payday in {days} {days === 1 ? 'day' : 'days'}
+ </p>
+ );
+}
+