Skip to content

A reverse-engineered periodic table in vanilla JS with Konva

License

Notifications You must be signed in to change notification settings

weezwo/periodic-table

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pure JavaScript Periodic Table of the Elements

This repo contains a reverse-engineered implementation of the periodic table we know and love, calculated from scratch at runtime using only:

  1. An array each of elemental names and elemental symbols
  2. An array of the possible number of electrons in each successive electronic subshell

But how?!

A puzzler at heart, I undertook this project in hopes that I might learn a thing or two about how the periodic table works and why it looks the way it does. You might know that the periodic table of the elements is comprised of groups (represented by the columns of the table) and periods (represented by its rows). Each one of these groups and periods tells a story about the behavior of the elements inside them. In fact, 19th and 20th century chemists used "gaps" in the table to predict the existence of theretofore undiscovered elements. It's wild stuff!

But what is even wilder is that this behavior is predictable based upon an element's atomic number and the laws that govern electron configuration. It makes sense, right? The only thing that really differs between each atomic element is the number of protons, neutrons, and electrons. With a bit of experimentation, I realized that an element's group is determined by a combination of the type of its outermost (or valence) electronic subshell and the number of electrons in that subshell. Meanwhile, the period can be calcuated simply by summing the total number of shells in the atomic element's electron cloud. This gets a bit fuzzy when it comes to the actinide and lanthanide sets (you know, the elements that hang out at the bottom), but only a little bit and only because these elements have an f-type valence subshell, bigger than any other and whose existence was not accounted for at the time the table was developed. Attempts have been made to develop a table that allows these elements to sit in line with their brethren, but it seems that the one we've got is here to stay, too elegant to die, at least for today.

Knowing all of this, an element's period and group can be calculated at the time of an element object's instantiation. What you see here is not really a "table" of rows and columns, but a series of 118 uniquely placed elemental objects.

To do

  • Onsite explanation and tutorials
  • Programmatic implementation of the Aufbau Principle

Misc Shoutouts

About

A reverse-engineered periodic table in vanilla JS with Konva

Resources

License

Stars

Watchers

Forks

Packages

No packages published