JAVASCRIPT PATTERNS
===================

SMALL FUNCTIONS AND CLEAR NAMES
-------------------------------
Prefer a function that does one understandable job.

function getCompletedCount(lessonIds) {
  return lessonIds.length;
}

UPDATE TEXT SAFELY
------------------
Use textContent for plain text. Do not insert untrusted strings with
innerHTML.

const status = document.querySelector('[role="status"]');
if (status) {
  status.textContent = 'Saved successfully.';
}

EVENTS
------
Use addEventListener and keep event handling close to the control.

button.addEventListener('click', () => {
  button.disabled = true;
  // Perform the action, then restore the control when it is safe.
});

ASYNC REQUESTS
--------------
Check response.ok before treating a fetch response as successful.
Show a useful error when a request fails, and avoid silently discarding
failed updates.

try {
  const response = await fetch('/api/example');
  if (!response.ok) {
    throw new Error('The request could not be completed.');
  }
  const result = await response.json();
  console.log(result);
} catch (error) {
  console.error(error);
}