How To Add a Dynamic Copyright Year to Your Website
If you create and maintain your own websites this is a neat trick that will automatically update the copyright year for you - no more changes at the start of the year to update that hardcoded value from ‘x’ to ‘y’.
Let’s take a look at how to implement this using vanilla JavaScript and then with a frontend framework(React js).
Note: This article is assuming you already have a running site, however, this should give you the knowledge to add this functionality to any future projects.
‘Vanilla’ JavaScript Example:
Firstly, let's locate the hardcoded year value. It will look something like this...
We need to add some sort of identifier to the line of code we want to make dynamic in order to access it using JavaScript(JS). The best way to do this is with an ID which can either be added to the ‘p’ tag and then the entire line returned from the JS or we can just replace the hardcoded year with a ‘span’ and give that an ID which is what I’ll do in this example.
Now, all we need to do is get the ID in the JS code and set the innerHTML to something that will automatically update the year for us. We can easily do this with JS by calling the new Date() constructor and appending the ‘.getFullYear()’ method which will return a numeric value for the current year.
I will add this JS code in the same file as the HTML for readability but you can do this in a separate file along as they're linked.
Read more about JavaScript Date objects here.
Copy the code straight from CodePen here.
React js Example:
So now we know how to do this using vanilla JavaScript we can easily convert this into our react project using JSX.
Firstly, let’s locate the hardcoded year value. It may look something like this depending on how you’ve structured your code…
Now, all we need to do is replace the hardcoded value with a pair of curly brackets which will allow us to write our JS code inline.
Same as before, we can easily do this by calling the new Date() constructor and appending the ‘.getFullYear()’ method which will return a numeric value for the current year.
You can see how small of a change we’ve made, something so simple and easy to implement yet powerful.
Now there are many other ways to do this, as there are with most things in code, but this is the simplest way I’ve found that removes the maintenance from the developer and makes your projects more dynamic.
