TaxGlobe

The 2023 federal and provincial tax brackets were researched from CRA publications and encoded as JavaScript data objects. Each bracket entry specifies the lower bound, upper bound (or Infinity for the top bracket), and the marginal rate as a decimal.

// taxData.js — 2023 Canadian federal brackets
const federalBrackets = [
  { min: 0,       max: 53359,   rate: 0.15   },
  { min: 53359,   max: 106717,  rate: 0.205  },
  { min: 106717,  max: 165430,  rate: 0.26   },
  { min: 165430,  max: 235675,  rate: 0.29   },
  { min: 235675,  max: Infinity, rate: 0.33  },
];

// Ontario provincial brackets (example)
const ontarioBrackets = [
  { min: 0,       max: 49231,   rate: 0.0505 },
  { min: 49231,   max: 98463,   rate: 0.0915 },
  { min: 98463,   max: 150000,  rate: 0.1116 },
  { min: 150000,  max: 220000,  rate: 0.1216 },
  { min: 220000,  max: Infinity, rate: 0.1316 },
];

The core calculation function iterates through the bracket array. For each bracket, it computes the taxable amount within that bracket — the lesser of the income above the bracket floor and the bracket width — and multiplies by the marginal rate. Accumulated totals across all brackets give the total tax for that bracket set.

function calcTax(income, brackets) {
  let totalTax = 0;
  const breakdown = [];

  for (const bracket of brackets) {
    if (income <= bracket.min) break;
    const taxableInBracket = Math.min(income, bracket.max) - bracket.min;
    const taxInBracket = taxableInBracket * bracket.rate;
    totalTax += taxInBracket;
    breakdown.push({
      min:    bracket.min,
      max:    bracket.max,
      rate:   bracket.rate,
      taxable: taxableInBracket,
      tax:    taxInBracket,
    });
  }

  return { totalTax, breakdown };
}

After running both the federal and provincial calculations, totals are combined and derived figures computed. Floating-point values are rounded to cents using Math.round(value * 100) / 100 before display, preventing binary representation artefacts from showing incorrect cent values in the output.

function calcSummary(income, province) {
  const fed   = calcTax(income, federalBrackets);
  const prov  = calcTax(income, provinceBrackets[province]);
  const total = fed.totalTax + prov.totalTax;
  const round = v => Math.round(v * 100) / 100;
  return {
    federalTax:    round(fed.totalTax),
    provincialTax: round(prov.totalTax),
    totalTax:      round(total),
    effectiveRate: round((total / income) * 100),
    netIncome:     round(income - total),
    fedBreakdown:  fed.breakdown,
    provBreakdown: prov.breakdown,
  };
}

The form uses a type="number" input with min="0" and step="1" for the income field. The province dropdown is populated from the keys of the bracket data object, so adding a new province's data automatically adds it to the dropdown without modifying the HTML. Both inputs use required for HTML5 validation.

Results are displayed in two sections: a summary card showing the headline figures (total tax, effective rate, net income) and two collapsible breakdown tables showing the per-bracket calculation for federal and provincial tax respectively. The effective rate is colour-coded — green for rates under 20%, amber for 20–30%, red for above 30%.

Both the income input and province select listen for input events. On each event, the calculation runs and the DOM is updated immediately — no submit button required. Input debouncing with a short timeout prevents excessive recalculation during rapid typing.

let debounceTimer;
[incomeInput, provinceSelect].forEach(el => {
  el.addEventListener('input', () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
      const income = parseFloat(incomeInput.value);
      const province = provinceSelect.value;
      if (!isNaN(income) && income > 0 && province) {
        renderResults(calcSummary(income, province));
      }
    }, 150);
  });
});