Interactive Periodic Table in JavaScript version 1.1

I recently published Version 1.0 of my Interactive Periodic Table in JavaScript and in this brief post I will describe the enhancements for Version 1.1.

You can download the source code as a zip file or clone/download the Github repository via the links below.

Source Code Links

ZIP File

Firstly, I have added a few extra pieces of information about each element. These are:

  • State of matter: at 0°C and 1 atm of pressure

  • Occurrence: primordial, from decay or synthetic

  • Standard atomic weight: in addition to the average already listed

  • Group: the column of the periodic table

  • Period: the row of the periodic table

The basic periodic table displays four pieces of information about each element: name, atomic number, chemical symbol and conventional atomic weight. However, we now have eleven items of data for each element so to make them accessible I have now set them as the title attribute of each <td> in the periodic table. This means that if you mouseover an element you will see all the data as a popup as shown below. (These are browser-generated so yours might look slightly different.)

Clicking an element will show a larger centred window with the same data, an example of which is shown below.

That is all for now but I have a long "to do" list for this project so further enhancements will be coming along soon.

Leave a Reply

Your email address will not be published. Required fields are marked *