How I built an interactive, fully responsive periodic table of the elements

Back to all posts
Projects
2nd December 2019
Check out the Periodic Table

Note: Since writing the below blog post, I've rebuilt this project in more modern technologies and added a couple of new features. It even has its own domain name now - check it out at elmnt.info.

Sometimes I become obsessed with really specific things. Back in 2014/2015, the subject of my affections was the periodic table (and the plethora of elements contained within) mostly thanks to the wonderful Periodic Videos YouTube series by the always entertaining Brady Haran.

Off the back of this, and looking to create a fresh addition to my portfolio when applying for a job at the time (I got it!) I built my own web-based periodic table which, as far as I've found, is the only periodic table on the internet which looks half decent, and is responsive right down to the smallest of mobile sizes.

My take on the Periodic Table of the Elements

The site communicates in real time with the Wikipedia/MediaWiki APIs in order to pull through up-to-date content and imagery for each element, so all I need to do is keep the table itself in order (which doesn't tend to change very often).

The nicest thing about this project was how widely used it ended up being - over the years I've received numerous emails from teachers around the world telling me they've found it useful, as well as referral traffic from a number of schools, colleges and universities. It only receives a small stream of traffic these days but as it's something I find genuinely interesting I like to keep it up to date (most recently adding the newly named elements Nihonium, Moscovium, Tennessine and Oganesson) and I occasionally freshen up the styling.

As the site was built back in 2015, it's starting to show its age in terms of the technologies I used (hello jQuery and vanilla CSS), however it remains one of my favourite side projects nonetheless.

Longer term I'd love to carry out a complete rebuild in a modern stack, incorporating more detailed information (probably hidden behind a toggle to keep it approachable to novices) and a variety of new features. I would also like to build my own back end API to cache the Wikipedia data, to save pulling it fresh every request.

Be sure to check out the periodic table for yourself, and let me know what you think, or if you have any ideas as to how it could be more useful.

Comment on this post

I love to talk web. If you have any civil thoughts, corrections or comments on this post, feel free to tweet or DM @fraserboag or, if you prefer, email fraser.boag@gmail.com.

Tweet

Keep up to date

From time to time I post things which people seem to find fairly interesting, stick your email address in the box below and I'll make sure you hear about it!