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;