The JavaScript Logic Behind Tracking 14 Credit Card APR Deadlines (Without Losing Your Mind)

#javascript #webdev #fintech #tutorial

I run 14 credit cards simultaneously.

Not because I'm reckless — because I understand how to use 0% APR introductory periods as free short-term financing. Done right, it's a legitimate way to smooth cash flow, fund purchases, or carry a balance for 12-21 months without paying a cent in interest.

Done wrong — miss one deadline — and you're looking at retroactive interest charges that can wipe out months of careful management.

This is the problem I set out to solve with code.

The Core Problem: Date Math Is Harder Than It Looks

Every 0% APR card has a deadline. But the deadline isn't just "the date on the agreement." It's a function of:

When the card was approved (not always when you first used it)
The promotional period length (12, 15, 18, or 21 months)
The exact billing cycle the promotion ends on

Here's the naive approach most people take:

// Don't do this
const deadline = new Date(approvalDate);
deadline.setMonth(deadline.getMonth() + promoMonths);

The problem? This doesn't account for billing cycles. Your card's promotional period ends on a statement date, not the anniversary of approval. If your billing cycle closes on the 15th and your promo ends "after 12 months," you might actually have until the 15th of the 13th month — or you might lose the promo two weeks earlier than you thought.

A More Reliable Model

Here's the logic I built to handle this properly:

function getAprDeadline(approvalDate, promoMonths, cycleClosingDay) {
  const approval = new Date(approvalDate);

  // Calculate raw deadline
  const rawDeadline = new Date(approval);
  rawDeadline.setMonth(rawDeadline.getMonth() + promoMonths);

  // Find the billing cycle close BEFORE the raw deadline
  const deadlineMonth = rawDeadline.getMonth();
  const deadlineYear = rawDeadline.getFullYear();

  const cycleClose = new Date(deadlineYear, deadlineMonth, cycleClosingDay);

  // If cycle closing day is after raw deadline, use the previous cycle
  if (cycleClose > rawDeadline) {
    cycleClose.setMonth(cycleClose.getMonth() - 1);
  }

  return cycleClose;
}

// Usage
const deadline = getAprDeadline('2023-11-15', 15, 8);
console.log(deadline.toDateString()); // The actual safe payoff date

This gives you the last billing cycle close before the promotion expires — which is the date your balance needs to hit zero.

Adding Alert Thresholds

Knowing the deadline is step one. The second piece is tiered alerts. I set three:

function getAlertStatus(deadline) {
  const today = new Date();
  const daysLeft = Math.ceil((deadline - today) / (1000 * 60 * 60 * 24));

  if (daysLeft <= 30) return { level: 'CRITICAL', daysLeft };
  if (daysLeft <= 60) return { level: 'WARNING', daysLeft };
  if (daysLeft <= 90) return { level: 'HEADS_UP', daysLeft };
  return { level: 'OK', daysLeft };
}

And here's where it gets useful at scale — looping over all cards and sorting by urgency:

const cards = [
  { name: 'Chase Freedom Flex', approvalDate: '2023-06-01', promoMonths: 15, cycleClosingDay: 22 },
  { name: 'Citi Simplicity', approvalDate: '2023-09-10', promoMonths: 21, cycleClosingDay: 14 },
  { name: 'Wells Fargo Reflect', approvalDate: '2024-01-05', promoMonths: 21, cycleClosingDay: 3 },
  // ... 11 more
];

const dashboard = cards
  .map(card => ({
    ...card,
    deadline: getAprDeadline(card.approvalDate, card.promoMonths, card.cycleClosingDay),
  }))
  .map(card => ({
    ...card,
    alert: getAlertStatus(card.deadline),
  }))
  .sort((a, b) => a.deadline - b.deadline);

dashboard.forEach(card => {
  const { level, daysLeft } = card.alert;
  console.log(`[${level}] ${card.name}: ${daysLeft} days left (deadline: ${card.deadline.toDateString()})`);
});

Output looks like:

[CRITICAL] Chase Freedom Flex: 23 days left (deadline: Mon Apr 28 2026)
[WARNING] Citi Simplicity: 47 days left (deadline: Fri May 22 2026)
[OK] Wells Fargo Reflect: 112 days left (deadline: Mon Jul 27 2026)

The Minimum Payment Problem

Here's a trap I see developers fall into when building this kind of tracker: they focus on the deadline, not the minimum payment.

Even with a 0% APR card, you must make minimum payments every month. Miss one, and many issuers will immediately terminate your promotional rate. So the dashboard needs to track two separate things per card:

APR deadline — when the full balance must be paid
Next minimum payment due — monthly, non-negotiable

I added a second layer to the data model:

const card = {
  name: 'Chase Freedom Flex',
  approvalDate: '2023-06-01',
  promoMonths: 15,
  cycleClosingDay: 22,
  currentBalance: 4800,
  minimumPaymentDue: '2026-04-28',
  minimumPaymentAmount: 35,
};

And a function that calculates the monthly paydown needed to hit zero before deadline:

function getRequiredMonthlyPayment(balance, deadline) {
  const today = new Date();
  const monthsLeft = (deadline.getFullYear() - today.getFullYear()) * 12 
    + (deadline.getMonth() - today.getMonth());

  if (monthsLeft <= 0) return balance; // Pay it all now
  return Math.ceil(balance / monthsLeft);
}

// Result: how much to pay each month to clear the balance in time
console.log(getRequiredMonthlyPayment(4800, deadline)); // e.g., "$200/month"

What I Learned (And What I Eventually Used)

After building this out, I realized maintaining the logic for 14 cards manually — with JSON files, cron jobs for alerts, and hand-updated billing cycles — was its own part-time job.

I eventually found StackEasy, which handles this whole layer for you: tracks APR windows, sends deadline alerts, and shows the monthly paydown math without requiring you to maintain the underlying code.

But the exercise of building it myself first was worth it. I understood the edge cases: what happens when a promotional rate ends mid-cycle, how grace periods affect payoff timing, why the "months remaining" counter on most apps is an oversimplification.

If you're building something similar, the key insight is: the deadline isn't a date — it's a billing cycle. Model it that way from the start and you'll avoid a lot of pain.

The Full Pattern

For anyone who wants to build their own version, here's the complete minimal tracker:

class AprTracker {
  constructor(cards) {
    this.cards = cards;
  }

  getDeadline(card) {
    const approval = new Date(card.approvalDate);
    const raw = new Date(approval);
    raw.setMonth(raw.getMonth() + card.promoMonths);

    const cycle = new Date(raw.getFullYear(), raw.getMonth(), card.cycleClosingDay);
    if (cycle > raw) cycle.setMonth(cycle.getMonth() - 1);
    return cycle;
  }

  getDaysLeft(deadline) {
    return Math.ceil((deadline - new Date()) / 86400000);
  }

  getMonthlyPaydown(balance, deadline) {
    const today = new Date();
    const months = (deadline.getFullYear() - today.getFullYear()) * 12
      + (deadline.getMonth() - today.getMonth());
    return months > 0 ? Math.ceil(balance / months) : balance;
  }

  report() {
    return this.cards.map(card => {
      const deadline = this.getDeadline(card);
      const daysLeft = this.getDaysLeft(deadline);
      const monthly = this.getMonthlyPaydown(card.balance, deadline);
      return { name: card.name, deadline, daysLeft, monthly };
    }).sort((a, b) => a.daysLeft - b.daysLeft);
  }
}

const tracker = new AprTracker(cards);
console.table(tracker.report());