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

Sometimes I become obsessed with really specific things. Back in 2014 or so, 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 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.

Periodic Table

In all its glory

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.


Note: Since writing this blog post, I've actually 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.

Project
2nd December 2019

Side projects