DEV Community

loading...

Automating the Date On Your Footer.

saviour123 profile image Saviour Gidi Updated on ・1 min read

In software engineering, it often said that, once the task is repetitive🙄, automate it! So must the © Copyright Date on the footer be automated.

Footer holds details such as Sitemap, Social Links and Copyright Notice of a site.
Eg.
Footer Sectionsrc: https://www.godlife.com/en

Approach 1

Introduce a JavaScript tag with internal Date API. You can get the current year from the browser JS API, which means you don't have to change every other year.

  • Add the JS script to your HTML

document.write(new Date().getFullYear());

  • Introduce a script tag in your Footer Section.
<p>
   &copy
   <script>
      document.write(new Date().getFullYear());
   </script> 
   <a href='https://twiter.com/saviour123>Saviour Gidi<a/>
 </p>

Output

© 2019 Saviour Gidi

Approach Two

Introduce a script tag with AJAX and get the current Date from World Clock.

<p>
  &copy
  <p id='copyright'></p>
  Saviour Gidi
</p>

<script>
    fetch('http://worldclockapi.com/api/json/utc/now')
      .then(data => data.json())
      .then(d => 
      document.getElementById('copyright').innerHTML = (new Date(d.currentDateTime).getFullYear())
)
</script>

NB: This second approach is to a response in the comments.

Imagine every year you have to manually change the date on the website. It's not safe for your health and your company's and I pity you🤣. To cut long story short, update your code to include the JS tag!

Discussion

pic
Editor guide
Collapse
0xbf profile image
Bo

The problem with this way is, now the copyright year is depending on the date in client side. If the date in client computer is misconfigured as 2016, then the copyright year will show 2016

Collapse
saviour123 profile image
Saviour Gidi Author

I've updated the article to fetch the date from worldclockapi.com if you don't trust the date from the browser, you can use that as the second option.

Collapse
0xbf profile image
Bo

Nice! I got your point, but calling API means now that part information relies on the accessibility of the API site, in this case if worldclockapi.com is down, then the year won't be shown.

I think manually change the footer year may still be the best way, given we only need to change it once a year, that's not too bad :D

Collapse
malvinjay profile image
George Arthur

Wow! This is a good article. Thanks man, keep up the good work

Collapse
ben profile image
Ben Halpern

Very timely 😄