We start with js/utils.js — small helper functions that hold no state of their own, so they're easy to reason about and test. The code column has three we'll need for the card and beyond:

• formatDateHuman(dateStr) — the API returns a date as "2026-07-11"; we show a human toLocaleDateString. (undefined as the locale means "use the browser's language".)
• truncate(str, max) — shortens long text with an ellipsis.
• showStatus(el, message) — clears an element and writes a single status message.

Notice showStatus — it uses both methods, an instructive contrast:

export function showStatus(el, message) {
  el.innerHTML = '';                  // CLEARING is safe — no data involved
  const p = document.createElement('p');
  p.textContent = message;            // the MESSAGE goes in as text
  el.appendChild(p);
}

innerHTML = '' (to clear) is safe — we insert nothing. But the message goes through textContent, not innerHTML — because a message might be an API error with arbitrary characters. The rule is simple: clearing with innerHTML='' is fine; writing dynamic text is always textContent.

Tip. We'll grow this file across the course: debounce arrives in lesson 7, parseTags with the forms. Keeping "pure" logic (dates, text) separate from the DOM and state makes these functions the easiest to test and reuse.