Copyright Snippet

A small JavaScript code snippet that helps keep your footer copyright up to date. (with bonus CustomElement)


It’s that time of year again, so I thought I’d do a quick post on the simple bit of JavaScript I use to keep the copyright date current in the static sites I build. Add the hidden attribute to your container element markup so that if JS fails for some reason it won’t display.

(function() {
document.addEventListener('DOMContentLoaded', function() {
// Update this to whatever selector you want.
const element = document.querySelector('[data-copyright]');
if (element) {
element.removeAttribute('hidden');
element.innerHTML = `© ${new Date().getFullYear()}`;
}
});
})();

Custom Element #

As a bonus, here’s a tiny custom element I made that does the same thing. This way you can just wrap your static text in a <copyright-element> tag and as long as the browser is capable and you scripts loaded, you get an upgraded, up-to-date footer copyright date.

class CopyrightElement extends HTMLElement {
connectedCallback() {
this.innerHTML = `&copy; ${new Date().getFullYear()}`;
}
}

if ('customElements' in window) {
window.customElements.define('copyright-element', CopyrightElement);
}