Nice summary! I recently learned something new that you can do to avoid. a bunch of document.getElementById() calls. You can create a tiny Proxy and get a single object that effectively gives you direct access to every element with an id, like this:

// Given this HTML...
<h1 id="welcomeMessage" hidden>Welcome!</h1>

// Elements Proxy (make this a global, a module, or just add it to the top of your script)
const elements = new Proxy({}, {
  get(target, prop) {
    return document.getElementById(prop);
  }
});

elements.welcomeMessage.hidden = false;