Webpage link: https://yfa2nw.github.io/interactive-periodic-table/
This is a webpage containing an interactive periodic table. The webpage is divided into 4 categories.
- The periodic table itself alongside element properties
- Charts demonstrating periodic table trends
- Descriptions of the periodic table and element properties
- Practice questions
The periodic table is the standard periodic table that can be found anywhere on the web. It has the periodic and group numbers, elements with their corresponding atomic numbers, and different colors signifying their respective categories. There are 10 categories with 10 unique colors:
- Alkali metals (Group 1 except H, AM)
- Alkaline earth metals (Group 2, AEM)
- Transition metals
- Post-transition metals
- Lanthanides
- Actinides
- Metalloids
- Non-metals
- Halogens (Group 17, HA)
- Noble gases (Group 18, NG)
Some other group names include:
- Pnictogens (Group 15, PN)
- Chalcogens (Group 16, CH)
The abbreviations ("AM", "AEM", "PN", "CH", "HA", "NG") are only used in this webpage for formatting purposes.
An "element ID card" will appear when clicked on the corresponding element icon. The ID card contains important physical and chemical properties of the elements such as atomic mass, electron configuration, density, molar heat capacity, 1st ionization energy, electronegativity, oxidation states, etc.
A typical element ID card looks like this:
Some animations are implemented to improve interactivity in each element ID card. By hovering over the element symbol on the left, you can see animated orbit paths. By hovering over the circle in the middle, especially radioactive ones, you can see particles flying away from the center. There are some other quality-of-life visualizations here and there.
There are 6 charts available.
- Atomic radius
- 1st ionization energy
- electron affinity
- electronegativity
- density
- melting and boiling points
It's written using Chart.js and color coded for each period. It's quite refreshing to see a clear trend, especially for atomic radius, 1st IE, and electronegativity. It's also quite interesting to see how density also has a lesser-known trend.
The descriptions essentially explains the concepts encountered in the periodic table and element ID cards in some detail. In total, there are 4 descriptions, covering introduction, coloring and categories, element ID cards, and periodic table trends, adding up to well over 30 concepts.
There are 3 problem sets, each with increasing difficulty. The 1st problem set mainly deals with familiarizing ourselves with the elements and where they are. The 2nd problem set mainly deals with connecting element location to their corresponding physical or chemical properties. The 3rd problem set then takes a step back and views element reactivity/bonding from an electron configurational standpoint.
As mentioned in the webpage itself, this GitHub project is actually a side project I decided to dive into. It is designed to be a supplementary material for Project MEEP - pre-Medical Electronic Education Platform - a website dedicated to create high-quality, accessible, practice-heavy education materials for aspiring medical students.
As of 2025, the website is still heavily under construction, but do visit! it's https://yfmeep.com
Also, I am not a proficient coder by any means, so please forgive me if the code looks atrocious.