DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Saviour Gidi
Saviour Gidi

Posted on • Updated on

Automating the Date On Your Footer.

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!

Top comments (5)

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 πŸ˜„

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.