<div style="font-family:sans-serif; text-align:center;">

  <div id="us-debt-number" style="font-size:2.5em; font-weight:bold; padding:20px; background:white; border-radius:12px; display:inline-block; min-width:250px;">Loading…</div>

</div>

<script>

(async function() {

  const debtEl = document.getElementById('us-debt-number');

  let previousDebt = 0;

  function animateNumber(el, start, end, duration) {

    let startTime = null;

    function step(timestamp) {

      if (!startTime) startTime = timestamp;

      const progress = Math.min((timestamp - startTime) / duration, 1);

      const value = Math.floor(progress * (end - start) + start);

      el.textContent = value.toLocaleString('en-US', {style:'currency', currency:'USD'});

      if (progress < 1) requestAnimationFrame(step);

    }

    requestAnimationFrame(step);

  }

  async function fetchUSDebt() {

    try {

      const resp = await fetch('https://api.fiscaldata.treasury.gov/services/api/fiscal_service/v2/accounting/od/debt_to_penny?sort=-record_date&format=json&page[number]=1&page[size]=1');

      const data = await resp.json();

      const latest = data.data && data.data[0];

      if (!latest) return;

      const debt = parseInt(latest.tot_pub_debt_out_amt);

      animateNumber(debtEl, previousDebt, debt, 2000);

      previousDebt = debt;

    } catch (err) {

      console.error(err);

      debtEl.textContent = 'Error';

    }

  }

  fetchUSDebt();

  setInterval(fetchUSDebt, 1000 * 60 * 60);

})();

</script>