Innovative Way of Exploring Elements with Digital Periodic Table

Introduction

Chemistry is an intriguing field, and the periodic table serves as a fundamental keystone. A deeper understanding of it, enhances effective learning and mastery of chemistry. The periodic table itself is one of the most concise and meaningful compilations of information ever developed.¹ It organizes elements by atomic number and periodic properties, providing a systematic approach for studying the vast array of elements and their interactions. Scientists rely on the periodic table to analyse element reactivity, anticipate chemical reactions, observe trends in periodic properties, and speculate on the characteristics of elements yet to be discovered. In 1800s, numerous new elements were discovered but there was no unified system to organize them. Several scientists worked over almost a century to compile and refine the periodic table into its present form.

While the periodic table is a vital resource, it can be challenging to comprehend. The traditional teaching methods often intimidate students and reinforced the perception that chemistry and the periodic table are overly complex. However, the use of online tools such as online periodic tables^2,3, 3-D periodic tables, wall-charts etc have been supportive to motivate students to learn about properties and trends of chemical elements.⁴ Additionally, various modalities such as the popular CHEMMEND game, mnemonic tools⁵, songs⁶ and cryptograms, have been developed to make the learning of periodic table more productive, engaging and enjoyable. Game based education^7-10 is an emerging field, and its use in teaching is being explored and highly valued.¹¹

In this article, we present (i) a concise and insightful overview of the remarkable history of periodic table, (ii) the development of programs for an innovative, interactive digital periodic table to encourage self-learning among students and create a dynamic environment that enhances science education. This platform integrates advancements in web and programming technology to create an engaging and user-friendly experience. The programs utilize HTML, CSS¹², Java¹³ and Python¹⁴, each contributing unique functionalities:

HTML (Hyper Text Markup Language) serves as a backbone for web development, enabling the creation and design of webpages. It is a mark-up language, not a programming language that allows web browsers to render text, images, audio, video, and other content into interactive webpages. CSS (Cascading Style Sheets) complements HTML by defining the visual presentation of a webpage, controlling layout, colours, fonts and more. While HTML provides structure, CSS enhances the appearance, ensuring that webpages are visually appealing and responsive. CSS rule sets consist of a selector targeting HTML elements, and declaration block containing property-value pairs that define the element’s appearance.

JavaScript is a versatile programming language that adds interactivity and dynamic features to websites, such as animations, real-time updates, and form validation. It integrates easily with HTML and CSS, enhancing user experience, and is essential for both client-side and server-side web development. With its extensive libraries and frameworks, JavaScript simplifies complex tasks and has become indispensable in modern web programming.

Python is an interpreted, high-level programming language known for its readability and simplicity, making it ideal for both small and large-scale projects. With a rich ecosystem of libraries and frameworks, Python excels in tasks like database interaction and cross-platform compatibility. The sys module and tabulate library are often used in Python to enhance functionality, such as creating interactive menu driven programs and presenting data in a structured, readable format.

Authors have developed an interactive periodic table using HTML, CSS, and JavaScript. This digital periodic table enables users to explore access comprehensive information about each element including an introduction, atomic number, molar mass, chemical and physical properties, and the patterns in their properties such as variation in atomic radii, trends in electronegativity etc. Additionally, Authors has created a python-based menu-driven interactive periodic table. This program categorizes elements into thirty broad groups and displays them on execution, offering a structured and accessible way to explore chemical elements.

Brief History of Periodic Table

The development of the periodic table can be largely attributed to the contributions of Antoine Lavoisier, Johann Wolfgang Döbereiner, John Newlands, Julius Lothar Meyer, Dmitri Mendeleev, and others.^15,16  The journey began with Hennig Brand’s isolation of phosphorus in 1649, marking first scientific discovery of an element. In 1789, Antoine Laurent de Lavoisier listed 33 substances which he regarded as elements in his book Traité Elémentaire de Chemie (Elements of Chemistry)¹⁷ and categorizing them as metals, non-metals, gases & earths based on their properties.  By the 19th century, scientists sought patterns to organize elements systematically. In 1817, the German chemist Johann Wolfgang Döbereiner¹⁸  noticed similarities among certain elements and grouped them into triads (three elements) based on comparable chemical and physical properties. In 1829, Döbereiner introduced the “Law of Triads¹⁹,” noting that the atomic mass of the middle element in these groups was approximately the average of the other two. However, this pattern was not universal, limiting its success.

The first periodic table, published in 1862 by French geologist, A.E.Beguyer de Chancourtois²⁰, organized the elements in aspiral around a cylinder based on increasing atomic weight²¹. By aligning 16 mass units per turn of the cylinder, elements with similar properties appeared in vertical alignment. This led de Chancourtois to propose that “the properties of the elements are the properties of numbers” and successfully predicted the stoichiometry of some metallic oxides. However, his chart included ions and compounds alongside the elements, which limited its adoption. In 1865, John Alexander Reina Newlands proposed “Law of Octaves“²² observing a repeating pattern every eighth element when elements were arranged by increasing atomic weight. While this arrangement worked well for the first 20 elements, it grouped some dissimilar elements together (e.g., copper with lithium, sodium, and potassium) and placed multiple elements in the same position if they had similar properties, leading to its rejection.

The question of whether German chemist Lothar Meyer or Russian chemist Dmitri Mendeleev should be credited as the “father” of the periodic table remains debated. Both independently developed remarkably similar periodic classifications of the elements in 1860s. In 1864, Meyer included a simplified table that organized about half of the known elements by atomic weight and highlighted periodic changes in valence.²³ By 1868, Meyer had created a more detailed table, but it was unpublished. However, in 1869, Mendeleev’s periodic table was published and reached the scientific community before Meyer’s table was published in 1870, ultimately giving Mendeleev greater recognition.

Dmitri Ivanovich Mendeleev’s²⁴ table was notable for leaving gaps at atomic masses 44, 68, 72, and 100, predicting the existence of elements with those atomic masses. These gaps correspond to the elements we now identify as scandium, gallium, germanium, and technetium. This approach ensured that elements with similar properties were grouped together. Mendeleev is credited not only for creating the most complete and organized periodic table of his time but also for his foresight in predicting undiscovered elements. However, this method was criticized since it failed to justify the locations of specific elements, isotopes, and rare earth metals.The Mendeleev’s periodic table underwent several refinements as the concept of periodicity was understood with discoveries of new elements and theoretical models.

In 1895, Lord Rayleigh discovered of argon, a chemically inert gas that did not fit with existing groups in the periodic table. In 1898, William Ramsay proposed a new “zero” group, placing argon in the periodic table between chlorine and potassium, alongside helium, despite argon’s atomic weight being higher than potassium’s. This new group was referred to as the “zero” group due to the zero valency of its elements. Ramsay also correctly predicted the discovery and properties of neon, further contributing to our understanding of this group of elements.

Henry Moseley, resolved many of the periodic table’s inconsistencies by arranging elements by atomic number instead of atomic weight. He conducted a series of experiments in 1913, bombarding metals with high-speed electrons and measuring the ensuing X-ray frequencies.^25,26 Through these experiments, he demonstrated that atomic number-not mass- determines an element’s properties. His “Modern Periodic Law,” states: “The physical and chemical properties of elements are periodic functions of their atomic numbers”. This shift emphasized the role of electronic configuration in determining the chemical properties of the elements, resolving anomalies in Mendeleev’s table.

The most significant updates to the periodic table were brought about by Glenn Seaborg’s work in the mid-20th century. Following his discovery of plutonium in 1940²⁷, Seaborg identified all the transuranic elements (atomic numbers 94 to 102). He restructured the periodic table by placing the actinide series beneath the lanthanide series, creating the modern layout we use today. In recognition of his ground breaking contributions, Seaborg was awarded the Nobel Prize in Chemistry in 1951. Additionally, element 106 was named seaborgium (Sg) in his honour.

Programming Details

Interactive Periodic Table

In the present article, the structure and content of periodic table (Figure 1) is created using HTML using html tags: html, head, title, style, body, div, h1, and script tag. HTML allows to create List (ordered, un-ordered, description and nested), Table, Form, Comment, Links (internal and external), Images and so on.

CSS language is used for the appearance of the content, such as layout, colors, font styles, spacing, sizes and other decorative features. Overall presentation and visual design of the webpage is given by CSS.

Figure 1: Periodic Table.Click here to View Figure

JavaScript programming language is used to introduce interactivity to the periodic table (Figure 2). When user clicks on an element, a box appears displaying key details about that element. For instance, when cursor hovers over element like Phosphorus element, information such as their important salts, atomic mass, period, group, and uses are displayed as illustrated in figure 2. Here the Authors have used Visual Studio Code as the code editor for HTML, CSS and JavaScript. Additionally, the links to access the Interactive Periodic Table and the program codes are provided below for reference.

To open the web page of the below code, use the following link: Interactive Periodic Table (vedaunta.github.io)

To access the program code and images, use the following GitHub Repository: Periodic-Table/periodic table/index_Final.html at main · vedaunta/Periodic-Table · GitHub

Figure 2: Preview of the Interactive Periodic Table Click here to View Figure

Interactive Menu- Driven Periodic Table

 HTML, CSS and JavaScript are excellent tools for interactive web development. However, when it comes to database programming, manipulation and querying, Python demonstrates greater efficiency due to its ease of use, simple implementation and user-friendly syntax.

In light of this, Authors has developed python code that create interactive menu-driven periodic table. This periodic table list thirty important broad categories of elements and displays them on execution.

The 30 categories are: 1. s-block elements, 2. p-block elements, 3. d-block elements, 4. f-block elements, 5. Alkali Metals (Group 1), 6. Alkaline Earth Metals (Group 2), 7. Transition Metals, 8.Post-Transition Metals, 9. Boron Family (Group 13), 10. Carbon Family (Group 14), 11.Nitrogen Family (Group 15), 12.Chalcogen (Group 16), 13.Halogen (Group 17), 14.Noble Gases (Group 18), 15. Metalloids, 16.Lanthanides, 17.Actinides, 18.Non-Metals, 19.Gaseous Elements, 20.Liquid Elements, 21.Solid Elements, 22.Biologically Essential Elements, 23.Synthetic (Man-Made) element, 24.Radioactive elements, 25.Explosive Elements, 26.Nuclear Fuel Potential, 27.Combustible Elements, 28.Strongest Magnetic Property, 29.Semiconductive Elements, 30.Catalytic Elements.

This python program, executed in Jupyter Notebook, leverages the sys module and tabulate library. The sys module facilitates interaction with the python interpreter, providing access to runtime environment details, while tabulate library enables the display of tabular data in a structured, visually appealing format with well-defined boundaries. As discussed below, Python is not only user-friendly but also highly effective for database operations. It enables seamless, efficient querying to retrieve desired results. This article aims to expand on this concept, showcasing Python’s potential for maximizing data-handling capabilities. The code for the interactive menu- driven periodic table is presented here. Additionally, the links to access the Interactive menu- driven Periodic Table program codes are provided below for reference.

Link of the below code on GitHub: vedaunta/Periodic-Table-Elements (github.com) 

Code for Interactive Menu- Driven Periodic Table 

import sys

from tabulate import tabulate

elements =[

{“name”: “Hydrogen”, “symbol”: “H”, “atomic_number”: 1, “atomic_weight”: 1.008, “category”: [“Combustible Elements”,”Explosive Elements”,”Biologically Essential Elements”,”s-block elements”,”Non-Metals”,”Gaseous Elements”]},

{“name”: “Helium”, “symbol”: “He”, “atomic_number”: 2, “atomic_weight”: 4.0026, “category”: [“p-block elements”,”Noble Gases (Group 18)”,”Gaseous Elements”,”Non-Metals”]},

{“name”: “Lithium”, “symbol”: “Li”, “atomic_number”: 3, “atomic_weight”: 6.94, “category”: [“Combustible Elements”,”Explosive Elements”,”s-block elements”,”Alkali Metals (Group 1)”,”Solid Elements”]},

{“name”: “Beryllium”, “symbol”: “Be”, “atomic_number”: 4, “atomic_weight”: 9.0122, “category”: [“Combustible Elements”,”s-block elements”,”Alkaline Earth Metals (Group 2)”,”Solid Elements”]},

{“name”: “Boron”, “symbol”: “B”, “atomic_number”: 5, “atomic_weight”: 10.81, “category”: [“Semiconductive Elements”,”Combustible Elements”,”p-block elements”,”Solid Elements”,”Metalloids”,”Boron Family (Group 13)”]},

{“name”: “Carbon”, “symbol”: “C”, “atomic_number”: 6, “atomic_weight”: 12.011, “category”: [“Combustible Elements”,”Biologically Essential Elements”,”p-block elements”,”Solid Elements”,”Non-Metals”,”Carbon Family (Group 14)”]},

{“name”: “Nitrogen”, “symbol”: “N”, “atomic_number”: 7, “atomic_weight”: 14.007, “category”: [“Explosive Elements”,”Biologically Essential Elements”,”p-block elements”,”Non-Metals”,”Gaseous Elements”,”Nitrogen Family (Group 15)”]},

{“name”: “Oxygen”, “symbol”: “O”, “atomic_number”: 8, “atomic_weight”: 15.999, “category”: [“Explosive Elements”,”Biologically Essential Elements”,”p-block elements”,”Non-Metals”,”Gaseous Elements”,”Chalcogen (Group 16)”]},

{“name”: “Fluorine”, “symbol”: “F”, “atomic_number”: 9, “atomic_weight”: 18.998, “category”: [“Combustible Elements”,”Explosive Elements”,”Biologically Essential Elements”,”p-block elements”,”Non-Metals”,”Gaseous Elements”,”Halogen (Group 17)”]},

{“name”: “Neon”, “symbol”: “Ne”, “atomic_number”: 10, “atomic_weight”: 20.180, “category”: [“p-block elements”,”Noble Gases (Group 18)”,”Gaseous Elements”,”Non-Metals”]},

{“name”: “Sodium”, “symbol”: “Na”, “atomic_number”: 11, “atomic_weight”: 22.990, “category”: [“Combustible Elements”,”Explosive Elements”,”Biologically Essential Elements”,”s-block elements”,”Alkali Metals (Group 1)”,”Solid Elements”]},

{“name”: “Magnesium”, “symbol”: “Mg”, “atomic_number”: 12, “atomic_weight”: 24.305, “category”: [“Combustible Elements”,”Biologically Essential Elements”,”s-block elements”,”Alkaline Earth Metals (Group 2)”,”Solid Elements”]},

{“name”: “Aluminum”, “symbol”: “Al”, “atomic_number”: 13, “atomic_weight”: 26.982, “category”: [“Combustible Elements”,”p-block elements”,”Solid Elements”,”Post-Transition Metals”,”Boron Family (Group 13)”]},

{“name”: “Silicon”, “symbol”: “Si”, “atomic_number”: 14, “atomic_weight”: 28.085, “category”: [“Semiconductive Elements”,”Biologically Essential Elements”,”p-block elements”,”Solid Elements”,”Metalloids”,”Carbon Family (Group 14)”]},

{“name”: “Phosphorus”, “symbol”: “P”, “atomic_number”: 15, “atomic_weight”: 30.974, “category”: [“Combustible Elements”,”Explosive Elements”,”Biologically Essential Elements”,”p-block elements”,”Solid Elements”,”Non-Metals”,”Nitrogen Family (Group 15)”]},

{“name”: “Sulfur”, “symbol”: “S”, “atomic_number”: 16, “atomic_weight”: 32.06, “category”: [“Combustible Elements”,”Biologically Essential Elements”,”p-block elements”,”Solid Elements”,”Non-Metals”,”Chalcogen (Group 16)”]},

{“name”: “Chlorine”, “symbol”: “Cl”, “atomic_number”: 17, “atomic_weight”: 35.45, “category”: [“Combustible Elements”,”Explosive Elements”,”Biologically Essential Elements”,”p-block elements”,”Non-Metals”,”Gaseous Elements”,”Halogen (Group 17)”]},

{“name”: “Argon”, “symbol”: “Ar”, “atomic_number”: 18, “atomic_weight”: 39.948, “category”: [“p-block elements”,”Noble Gases (Group 18)”,”Gaseous Elmenets”,”Non-Metals”]},

{“name”: “Potassium”, “symbol”: “K”, “atomic_number”: 19, “atomic_weight”: 39.098, “category”: [“Combustible Elements”,”Explosive Elements”,”Biologically Essential Elements”,”s-block elements”,”Alkali Metals (Group 1)”,”Solid Elements”]},

{“name”: “Calcium”, “symbol”: “Ca”, “atomic_number”: 20, “atomic_weight”: 40.078, “category”: [“Combustible Elements”,”Biologically Essential Elements”,”s-block elements”,”Alkaline Earth Metals (Group 2)”,”Solid Elements”]},

{“name”: “Scandium”, “symbol”: “Sc”, “atomic_number”: 21, “atomic_weight”: 44.955, “category”: [“d-block elements”,”Transition Metals”,”Solid Elements”]},

{“name”: “Titanium”, “symbol”: “Ti”, “atomic_number”: 22, “atomic_weight”: 47.867, “category”: [“Combustible Elements”,”d-block elements”,”Transition Metals”,”Solid Elements”]},

{“name”: “Vanadium”, “symbol”: “V”, “atomic_number”: 23, “atomic_weight”: 50.942, “category”: [“Biologically Essential Elements”,”d-block elements”,”Transition Metals”,”Solid Elements”]},

{“name”: “Chromium”, “symbol”: “Cr”, “atomic_number”: 24, “atomic_weight”: 51.996, “category”: [“Biologically Essential Elements”,”d-block elements”,”Transition Metals”,”Solid Elements”]},

{“name”: “Manganese”, “symbol”: “Mn”, “atomic_number”: 25, “atomic_weight”: 54.938, “category”: [“Biologically Essential Elements”,”d-block elements”,”Transition Metals”,”Solid Elements”]},

{“name”: “Iron”, “symbol”: “Fe”, “atomic_number”: 26, “atomic_weight”: 55.845, “category”: [“Catalytic Elements”,”Combustible Elements”,”Biologically Essential Elements”,”d-block elements”,”Transition Metals”,”Solid Elements”]},

{“name”: “Cobalt”, “symbol”: “Co”, “atomic_number”: 27, “atomic_weight”: 58.933, “category”: [“Biologically Essential Elements”,”d-block elements”,”Transition Metals”,”Solid Elements”]},

{“name”: “Nickel”, “symbol”: “Ni”, “atomic_number”: 28, “atomic_weight”: 58.693, “category”: [“Catalytic Elements”,”Biologically Essential Elements”,”d-block elements”,”Transition Metals”,”Solid Elements”]},

{“name”: “Copper”, “symbol”: “Cu”, “atomic_number”: 29, “atomic_weight”: 63.546, “category”: [“Catalytic Elements”,”Combustible Elements”,”Biologically Essential Elements”,”d-block elements”,”Transition Metals”,”Solid Elements”]},

{“name”: “Zinc”, “symbol”: “Zn”, “atomic_number”: 30, “atomic_weight”: 65.38, “category”: [“Combustible Elements”,”Biologically Essential Elements”,”d-block elements”,”Transition Metals”,”Solid Elements”]},

{“name”: “Gallium”, “symbol”: “Ga”, “atomic_number”: 31, “atomic_weight”: 69.723, “category”: [“p-block elements”,”Solid Elements”,”Post-Transition Metals”,”Boron Family (Group 13)”]},

{“name”: “Germanium”, “symbol”: “Ge”, “atomic_number”: 32, “atomic_weight”: 72.63, “category”: [“Semiconductive Elements”,”p-block elements”,”Solid Elements”, “Metalloids”,”Carbon Family (Group 14)”]},

{“name”: “Arsenic”, “symbol”: “As”, “atomic_number”: 33, “atomic_weight”: 74.922, “category”: [“Semiconductive Elements”,”Biologically Essential Elements”,”p-block elements”,”Solid Elements”, “Metalloids”,”Nitrogen Family (Group 15)”]},

{“name”: “Selenium”, “symbol”: “Se”, “atomic_number”: 34, “atomic_weight”: 78.96, “category”: [“Biologically Essential Elements”,”p-block elements”,”Solid Elements”, “Non-Metals”,”Chalcogen (Group 16)”]},

{“name”: “Bromine”, “symbol”: “Br”, “atomic_number”: 35, “atomic_weight”: 79.904, “category”: [“p-block elements”, “Non-Metals”, “Liquid Elements”, “Halogen (Group 17)”]},

{“name”: “Krypton”, “symbol”: “Kr”, “atomic_number”: 36, “atomic_weight”: 83.798, “category”: [“p-block elements”, “Noble Gases (Group 18)”, “Gaseous Elements”,”Non-Metals”]},

{“name”: “Rubidium”, “symbol”: “Rb”, “atomic_number”: 37, “atomic_weight”: 85.468, “category”: [“Explosive Elements”,”s-block elements”, “Alkali Metals (Group 1)”,”Solid Elements”]},

{“name”: “Strontium”, “symbol”: “Sr”, “atomic_number”: 38, “atomic_weight”: 87.62, “category”: [“s-block elements”, “Alkaline Earth Metals (Group 2)”,”Solid Elements”]},

{“name”: “Yttrium”, “symbol”: “Y”, “atomic_number”: 39, “atomic_weight”: 88.906, “category”: [“d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Zirconium”, “symbol”: “Zr”, “atomic_number”: 40, “atomic_weight”: 91.224, “category”: [“d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Niobium”, “symbol”: “Nb”, “atomic_number”: 41, “atomic_weight”: 92.906, “category”: [“d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Molybdenum”, “symbol”: “Mo”, “atomic_number”: 42, “atomic_weight”: 95.95, “category”: [“Catalytic Elements”,”Biologically Essential Elements”,”d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Technetium”, “symbol”: “Tc”, “atomic_number”: 43, “atomic_weight”: 98, “category”: [“d-block elements”, “Transition Metals”,”Radioactive elements”,”Synthetic (Man-Made) element”,”Solid Elements”]},

{“name”: “Ruthenium”, “symbol”: “Ru”, “atomic_number”: 44, “atomic_weight”: 101.07, “category”: [“Catalytic Elements”,”d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Rhodium”, “symbol”: “Rh”, “atomic_number”: 45, “atomic_weight”: 102.91, “category”: [“Catalytic Elements”,”d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Palladium”, “symbol”: “Pd”, “atomic_number”: 46, “atomic_weight”: 106.42, “category”: [“Catalytic Elements”,”d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Silver”, “symbol”: “Ag”, “atomic_number”: 47, “atomic_weight”: 107.87, “category”: [“d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Cadmium”, “symbol”: “Cd”, “atomic_number”: 48, “atomic_weight”: 112.41, “category”: [“d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Indium”, “symbol”: “In”, “atomic_number”: 49, “atomic_weight”: 114.82, “category”: [“p-block elements”,”Solid Elements”, “Post-Transition Metals”,”Boron Family (Group 13)”]},

{“name”: “Tin”, “symbol”: “Sn”, “atomic_number”: 50, “atomic_weight”: 118.71, “category”: [“Biologically Essential Elements”,”p-block elements”,”Solid Elements”, “Post-Transition Metals”,”Carbon Family (Group 14)”]},

{“name”: “Antimony”, “symbol”: “Sb”, “atomic_number”: 51, “atomic_weight”: 121.76, “category”: [“Semiconductive Elements”,”Combustible Elements”,”p-block elements”,”Solid Elements”, “Metalloids”,”Nitrogen Family (Group 15)”]},

{“name”: “Tellurium”, “symbol”: “Te”, “atomic_number”: 52, “atomic_weight”: 127.60, “category”: [“Semiconductive Elements”,”p-block elements”,”Solid Elements”, “Metalloids”,”Chalcogen (Group 16)”]},

{“name”: “Iodine”, “symbol”: “I”, “atomic_number”: 53, “atomic_weight”: 126.90, “category”: [“Biologically Essential Elements”,”p-block elements”,”Solid Elements”, “Non-Metals”, “Halogen (Group 17)”]},

{“name”: “Xenon”, “symbol”: “Xe”, “atomic_number”: 54, “atomic_weight”: 131.29, “category”: [“p-block elements”, “Noble Gases (Group 18)”, “Gaseous Elements”,”Non-Metals”]},

{“name”: “Cesium”, “symbol”: “Cs”, “atomic_number”: 55, “atomic_weight”: 132.91, “category”: [“Explosive Elements”,”s-block elements”, “Alkali Metals (Group 1)”,”Solid Elements”]},

{“name”: “Barium”, “symbol”: “Ba”, “atomic_number”: 56, “atomic_weight”: 137.33, “category”: [“s-block elements”, “Alkaline Earth Metals (Group 2)”,”Solid Elements”]},

{“name”: “Lanthanum”, “symbol”: “La”, “atomic_number”: 57, “atomic_weight”: 138.91, “category”: [“Catalytic Elements”,”Combustible Elements”,”f-block elements”,”Solid Elements”, “Lanthanides”]},

{“name”: “Cerium”, “symbol”: “Ce”, “atomic_number”: 58, “atomic_weight”: 140.12, “category”: [“Catalytic Elements”,”Combustible Elements”,”f-block elements”,”Solid Elements”, “Lanthanides”]},

{“name”: “Praseodymium”, “symbol”: “Pr”, “atomic_number”: 59, “atomic_weight”: 140.91, “category”: [“Strongest Magnetic Property”,”f-block elements”,”Solid Elements”, “Lanthanides”]},

{“name”: “Neodymium”, “symbol”: “Nd”, “atomic_number”: 60, “atomic_weight”: 144.24, “category”: [“Strongest Magnetic Property”,”Combustible Elements”,”f-block elements”,”Solid Elements”, “Lanthanides”]},

{“name”: “Promethium”, “symbol”: “Pm”, “atomic_number”: 61, “atomic_weight”: 145, “category”: [“f-block elements”,”Radioactive elements”, “Solid Elements”,”Lanthanides”, “Synthetic (Man-Made) element”]},

{“name”: “Samarium”, “symbol”: “Sm”, “atomic_number”: 62, “atomic_weight”: 150.36, “category”: [“Strongest Magnetic Property”,”f-block elements”, “Solid Elements”,”Lanthanides”]},

{“name”: “Europium”, “symbol”: “Eu”, “atomic_number”: 63, “atomic_weight”: 151.96, “category”: [“f-block elements”, “Solid Elements”,”Lanthanides”]},

{“name”: “Gadolinium”, “symbol”: “Gd”, “atomic_number”: 64, “atomic_weight”: 157.25, “category”: [“f-block elements”,”Solid Elements”, “Lanthanides”]},

{“name”: “Terbium”, “symbol”: “Tb”, “atomic_number”: 65, “atomic_weight”: 158.93, “category”: [“f-block elements”,”Solid Elements”, “Lanthanides”]},

{“name”: “Dysprosium”, “symbol”: “Dy”, “atomic_number”: 66, “atomic_weight”: 162.50, “category”: [“Strongest Magnetic Property”,”f-block elements”,”Solid Elements”, “Lanthanides”]},

{“name”: “Holmium”, “symbol”: “Ho”, “atomic_number”: 67, “atomic_weight”: 164.93, “category”: [“f-block elements”,”Solid Elements”, “Lanthanides”]},

{“name”: “Erbium”, “symbol”: “Er”, “atomic_number”: 68, “atomic_weight”: 167.26, “category”: [“f-block elements”, “Solid Elements”,”Lanthanides”]},

{“name”: “Thulium”, “symbol”: “Tm”, “atomic_number”: 69, “atomic_weight”: 168.93, “category”: [“f-block elements”,”Solid Elements”, “Lanthanides”]},

{“name”: “Ytterbium”, “symbol”: “Yb”, “atomic_number”: 70, “atomic_weight”: 173.05, “category”: [“f-block elements”,”Solid Elements”, “Lanthanides”]},

{“name”: “Lutetium”, “symbol”: “Lu”, “atomic_number”: 71, “atomic_weight”: 174.97, “category”: [“f-block elements”,”Solid Elements”, “Lanthanides”]},

{“name”: “Hafnium”, “symbol”: “Hf”, “atomic_number”: 72, “atomic_weight”: 178.49, “category”: [“d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Tantalum”, “symbol”: “Ta”, “atomic_number”: 73, “atomic_weight”: 180.95, “category”: [“d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Tungsten”, “symbol”: “W”, “atomic_number”: 74, “atomic_weight”: 183.84, “category”: [“Catalytic Elements”,”d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Rhenium”, “symbol”: “Re”, “atomic_number”: 75, “atomic_weight”: 186.21, “category”: [“d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Osmium”, “symbol”: “Os”, “atomic_number”: 76, “atomic_weight”: 190.23, “category”: [“d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Iridium”, “symbol”: “Ir”, “atomic_number”: 77, “atomic_weight”: 192.22, “category”: [“Catalytic Elements”,”d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Platinum”, “symbol”: “Pt”, “atomic_number”: 78, “atomic_weight”: 195.08, “category”: [“Catalytic Elements”,”d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Gold”, “symbol”: “Au”, “atomic_number”: 79, “atomic_weight”: 196.97, “category”: [“d-block elements”, “Transition Metals”,”Solid Elements”]},

{“name”: “Mercury”, “symbol”: “Hg”, “atomic_number”: 80, “atomic_weight”: 200.59, “category”: [“d-block elements”, “Transition Metals”, “Liquid Elements”]},

{“name”: “Thallium”, “symbol”: “Tl”, “atomic_number”: 81, “atomic_weight”: 204.38, “category”: [“p-block elements”,”Solid Elements”, “Post-Transition Metals”,”Boron Family (Group 13)”]},

{“name”: “Lead”, “symbol”: “Pb”, “atomic_number”: 82, “atomic_weight”: 207.2, “category”: [“p-block elements”,”Solid Elements”, “Post-Transition Metals”,”Carbon Family (Group 14)”]},

{“name”: “Bismuth”, “symbol”: “Bi”, “atomic_number”: 83, “atomic_weight”: 208.98, “category”: [“p-block elements”,”Solid Elements”, “Post-Transition Metals”,”Nitrogen Family (Group 15)”]},

{“name”: “Polonium”, “symbol”: “Po”, “atomic_number”: 84, “atomic_weight”: 209, “category”: [“p-block elements”,”Radioactive elements”, “Metalloids”, “Chalcogen (Group 16)”]},

{“name”: “Astatine”, “symbol”: “At”, “atomic_number”: 85, “atomic_weight”: 210, “category”: [“Explosive Elements”,”p-block elements”,”Radioactive elements”, “Metalloids”, “Halogen (Group 17)”,”Synthetic (Man-Made) element”]},

{“name”: “Radon”, “symbol”: “Rn”, “atomic_number”: 86, “atomic_weight”: 222, “category”: [“p-block elements”,”Radioactive elements”, “Noble Gases (Group 18)”, “Gaseous Elements”,”Non-Metals”]},

{“name”: “Francium”, “symbol”: “Fr”, “atomic_number”: 87, “atomic_weight”: 223, “category”: [“s-block elements”,”Radioactive elements”, “Alkali Metals (Group 1)”,”Solid Elements”,”Synthetic (Man-Made) element”]},

{“name”: “Radium”, “symbol”: “Ra”, “atomic_number”: 88, “atomic_weight”: 226, “category”: [“s-block elements”,”Radioactive elements”, “Alkaline Earth Metals (Group 2)”,”Solid Elements”]},

{“name”: “Actinium”, “symbol”: “Ac”, “atomic_number”: 89, “atomic_weight”: 227, “category”: [“f-block elements”,”Radioactive elements”,”Solid Elements”, “Actinides”]},

{“name”: “Thorium”, “symbol”: “Th”, “atomic_number”: 90, “atomic_weight”: 232.04, “category”: [“f-block elements”,”Radioactive elements”,”Solid Elements”, “Actinides”,”Nuclear Fuel Potential”]},

{“name”: “Protactinium”, “symbol”: “Pa”, “atomic_number”: 91, “atomic_weight”: 231.04, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”]},

{“name”: “Uranium”, “symbol”: “U”, “atomic_number”: 92, “atomic_weight”: 238.03, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”,”Nuclear Fuel Potential”]},

{“name”: “Neptunium”, “symbol”: “Np”, “atomic_number”: 93, “atomic_weight”: 237, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”,”Synthetic (Man-Made) element”,”Nuclear Fuel Potential”]},

{“name”: “Plutonium”, “symbol”: “Pu”, “atomic_number”: 94, “atomic_weight”: 244, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”, “Synthetic (Man-Made) element”,”Nuclear Fuel Potential”]},

{“name”: “Americium”, “symbol”: “Am”, “atomic_number”: 95, “atomic_weight”: 243, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”, “Synthetic (Man-Made) element”,”Nuclear Fuel Potential”]},

{“name”: “Curium”, “symbol”: “Cm”, “atomic_number”: 96, “atomic_weight”: 247, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”, “Synthetic (Man-Made) element”,”Nuclear Fuel Potential”]},

{“name”: “Berkelium”, “symbol”: “Bk”, “atomic_number”: 97, “atomic_weight”: 247, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”, “Synthetic (Man-Made) element”]},

{“name”: “Californium”, “symbol”: “Cf”, “atomic_number”: 98, “atomic_weight”: 251, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”, “Synthetic (Man-Made) element”]},

{“name”: “Einsteinium”, “symbol”: “Es”, “atomic_number”: 99, “atomic_weight”: 252, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”, “Synthetic (Man-Made) element”]},

{“name”: “Fermium”, “symbol”: “Fm”, “atomic_number”: 100, “atomic_weight”: 257, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”, “Synthetic (Man-Made) element”]},

{“name”: “Mendelevium”, “symbol”: “Md”, “atomic_number”: 101, “atomic_weight”: 258, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”, “Synthetic (Man-Made) element”]},

{“name”: “Nobelium”, “symbol”: “No”, “atomic_number”: 102, “atomic_weight”: 259, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”, “Synthetic (Man-Made) element”]},

{“name”: “Lawrencium”, “symbol”: “Lr”, “atomic_number”: 103, “atomic_weight”: 262, “category”: [“f-block elements”,”Solid Elements”,”Radioactive elements”, “Actinides”, “Synthetic (Man-Made) element”]},

{“name”: “Rutherfordium”, “symbol”: “Rf”, “atomic_number”: 104, “atomic_weight”: 267, “category”: [“d-block elements”, “Transition Metals”,”Radioactive elements”, “Synthetic (Man-Made) element”,”Solid Elements”]},

{“name”: “Dubnium”, “symbol”: “Db”, “atomic_number”: 105, “atomic_weight”: 270, “category”: [“d-block elements”, “Transition Metals”,”Radioactive elements”, “Synthetic (Man-Made) element”,”Solid Elements”]},

{“name”: “Seaborgium”, “symbol”: “Sg”, “atomic_number”: 106, “atomic_weight”: 271, “category”: [“d-block elements”, “Transition Metals”,”Radioactive elements”,”Synthetic (Man-Made) element”,”Solid Elements”]},

{“name”: “Bohrium”, “symbol”: “Bh”, “atomic_number”: 107, “atomic_weight”: 270, “category”: [“d-block elements”, “Transition Metals”,”Radioactive elements”, “Synthetic (Man-Made) element”,”Solid Elements”]},

{“name”: “Hassium”, “symbol”: “Hs”, “atomic_number”: 108, “atomic_weight”: 277, “category”: [“d-block elements”, “Transition Metals”,”Radioactive elements”, “Synthetic (Man-Made) element”,”Solid Elements”]},

{“name”: “Meitnerium”, “symbol”: “Mt”, “atomic_number”: 109, “atomic_weight”: 278, “category”: [“d-block elements”, “Transition Metals”,”Radioactive elements”, “Synthetic (Man-Made) element”,”Solid Elements”]},

{“name”: “Darmstadtium”, “symbol”: “Ds”, “atomic_number”: 110, “atomic_weight”: 281, “category”: [“d-block elements”, “Transition Metals”,”Radioactive elements”, “Synthetic (Man-Made) element”,”Solid Elements”]},

{“name”: “Roentgenium”, “symbol”: “Rg”, “atomic_number”: 111, “atomic_weight”: 282, “category”: [“d-block elements”, “Transition Metals”,”Radioactive elements”, “Synthetic (Man-Made) element”,”Solid Elements”]},

{“name”: “Copernicium”, “symbol”: “Cn”, “atomic_number”: 112, “atomic_weight”: 285, “category”: [“d-block elements”, “Transition Metals”,”Radioactive elements”, “Synthetic (Man-Made) element”]},

{“name”: “Nihonium”, “symbol”: “Nh”, “atomic_number”: 113, “atomic_weight”: 286, “category”: [“p-block elements”, “Radioactive elements”,”Synthetic (Man-Made) element”,”Boron Family (Group 13)”]},

{“name”: “Flerovium”, “symbol”: “Fl”, “atomic_number”: 114, “atomic_weight”: 289, “category”: [“p-block elements”,”Radioactive elements”, “Synthetic (Man-Made) element”,”Carbon Family (Group 14)”]},

{“name”: “Moscovium”, “symbol”: “Mc”, “atomic_number”: 115, “atomic_weight”: 290, “category”: [“p-block elements”,”Radioactive elements”, “Synthetic (Man-Made) element”,”Nitrogen Family (Group 15)”]},

{“name”: “Livermorium”, “symbol”: “Lv”, “atomic_number”: 116, “atomic_weight”: 293, “category”: [“p-block elements”,”Radioactive elements”, “Synthetic (Man-Made) element”,”Chalcogen (Group 16)”]},

{“name”: “Tennessine”, “symbol”: “Ts”, “atomic_number”: 117, “atomic_weight”: 294, “category”: [“p-block elements”,”Radioactive elements”, “Halogen (Group 17)”, “Synthetic (Man-Made) element”]},

{“name”: “Oganesson”, “symbol”: “Og”, “atomic_number”: 118, “atomic_weight”: 294, “category”: [“p-block elements”,”Radioactive elements”, “Noble Gases (Group 18)”, “Synthetic (Man-Made) element”]}

]

categories = [

“s-block elements”,”p-block elements”,”d-block elements”,”f-block elements”,

“Alkali Metals (Group 1)”,”Alkaline Earth Metals (Group 2)”,”Transition Metals”,

“Post-Transition Metals”,”Boron Family (Group 13)”,”Carbon Family (Group 14)”,

“Nitrogen Family (Group 15)”,”Chalcogen (Group 16)”,”Halogen (Group 17)”,”Noble Gases (Group 18)”,

“Metalloids”,”Lanthanides”,”Actinides”,”Non-Metals”,”Gaseous Elements”,”Liquid Elements”,”Solid Elements”,

“Biologically Essential Elements”,”Synthetic (Man-Made) element”,”Radioactive elements”,

“Explosive Elements”,”Nuclear Fuel Potential”,”Combustible Elements”,”Strongest Magnetic Property”,

“Semiconductive Elements”,”Catalytic Elements”,

]

def display_elements_by_category(category):

filtered_elements=[

(elem[“name”], elem[“symbol”], elem[“atomic_number”], elem[“atomic_weight”])

for elem in elements

if category in elem[“category”]

]

if filtered_elements:

print(tabulate(filtered_elements, headers=[“Name”, “Symbol”, “Atomic Number”, “Atomic Weight”], tablefmt=”pretty”))

else:

print(“No elements found for this category.”)

def main():

while True:

print(“\nCategories:”)

for idx, category in enumerate(categories, 1):

print(f”{idx}.{category}”)

choice = input(“Please select a category by entering the number or type ‘exit’ to quit: “).strip()

if choice.lower()==”exit”:

print(“Exiting the program. Goodbye!”)

break

try:

choice_idx=int(choice)-1

if 0<= choice_idx < len(categories):

selected_category = categories[choice_idx]

print(f”\nDisplaying the Result for {selected_category}”)

display_elements_by_category(selected_category)

else:

print(“Invalid Selection. Please try again.”)

except ValueError:

print(“Invalid input. Please enter a number corresponding to a category.”)

cont = input(“Do you want to continue? (yes/no): “).strip().lower()

if cont !=”yes”:

print(“Exiting the program. Goodbye!”)

break

if __name__==”__main__”:

main() 

Figure 3 demonstrates the output of the python program. On selecting the number from 1 between 30, it shows the selected numbered category. For instance, on selecting number ‘1’, it gives output for s-block elements as shown in figure 4. The programme asks for continuation and if provide input ‘yes” then program continues and on giving input ‘15’, ‘20’, ‘22’, ’30’, it displays the list of Metalloids (Figure 5), Liquid Elements (Figure 6), Biologically Essential Elements (Figure 7), Catalytic Elements (Figure 8). And if we provide input ‘exit’, instead of any number, program stop running (Figure 8).

Figure 3: Menu- driven list of categories Click here to View Figure

Figure 4: Output for the selected category, i.e. s-block elements Click here to View Figure

Figure 5: Output for the selected category, i.e. Metalloids Click here to View Figure

Figure 6: Output for the selected category, i.e. Liquid Elements. Click here to View Figure

Figure 7: Output for the selected category, i.e. Biologically Essential Elements Click here to View Figure

Figure 8: Output for the selected category, i.e. Catalytic Elements and Illustration for Exiting the program Click here to View Figure

Conclusions

The interactive periodic table is an innovative and educational project that amalgamate chemistry expertise with web development skills. By following the guidelines and methods discussed in this article, we have developed a functional and captivating learning tool. This tool offers a computer-generated, tabular representation resembling a traditional periodic table of chemical elements. The users can select any element to access detailed information, such as its overview, atomic number, molar mass, properties and its applications. The digital periodic table offers a numerous advantage such as encouraging student self-learning and offering an interactive learning environment.

The project holds significant potential for future enhancements. Integrating features such as three-dimensional molecular or ionic structures, visual demonstrations of important chemical reactions, and comprehensive information on atomic structure and bonding can make the tool even more engaging. Furthermore, the inclusion of 3D orbital diagrams, augmented reality (AR) functionality, and links to scholarly publications can enrich the user experience. These advancements can transform the interactive periodic table into powerful platform for learners and researchers, revolutionizing how chemistry education by making it more accessible, dynamic, and enjoyable.

Acknowledgement

Dr. Hemant Verma would like to thank Hindu College, University of Delhi, Dr. Prerna Singh and Dr. Jyoti Singh would like to thank Zakir Husain Delhi College for all support.

Funding Sources

The author(s) received no financial support for the research, authorship, and/or publication of this article.

Conflict of Interest

The author(s) do not have any conflict of interest.

Data Availability Statement

This statement does not apply to this article.

Ethics Statement

This research did not involve human participants, animal subjects, or any material that requires ethical approval.

References

1. Bierenstiel, M.; Snow, K. Chem. Educ. 2019, 96 (7), 1367–1376. https://doi.org/10.1021/ acs.jchemed.8b00740
   CrossRef
2. Nsabayezu, E.; Iyamuremye A.; Nungu L. Education and Information Technologies, 2023, 28, 11793–11817. https://doi.org/10.1007/s10639-023-11650-7
   CrossRef
3. Diener, L. Chem. Educ, 2009, 86(10), 1163–1166. https://doi.org/10.1021/ed086p1163
   CrossRef
4. Robinson, A. E, Centaurus, 2019, 61(4), 360–378. https://doi.org/10.1111/1600-0498.12229
   CrossRef
5. Mabrouk, S. T. Chem. Educ., 2003, 80(8), 894–898. https://doi.org/10.1021/ed080p894
   CrossRef
6. Mokiwa, H. O. Eurasia Journal of Mathematics, Science and Technology Education, 2017, 13(6), 1563–1573. https://doi.org/10.12973/eurasia.2017.00685a
   CrossRef
7. Vergne, M. J.; Simmons, J. D.; Bowen, R. S. Chem. Educ. 2019, 96(5), 985–991. https://doi.org/10.1021/acs.jchemed.8b01023
   CrossRef
8. Edmonson, L. J.; Lewis, D. L. Chem. Educ. 1999, 76(4), 502. https://doi.org/10.1021/ed076p502
   CrossRef
9. Carney, J. M. Chem. Educ.2015, 92(2), 328–331. https://doi.org/10.1021/ed500657u
   CrossRef
10. Vadivel, D.; Branciforti, D. S.; Dondi, D.F1000Research, 2024, 13, 372. https://doi.org/10.12688/f1000research.130351.1
    CrossRef
11. Cruz-Cunha, M. M. Handbook of Research on Serious Games as Educational, Business and Research Tools, 2012, ISBN: 1668425459, Publisher: IGI Global, 2012. Ukraine: Information Science Reference.
    CrossRef
12. Larsen, R. “Beginning HTML & CSS” 2013, Indianapolis, IN: Wiley, ISBN-9781118340288.
13. Ranjan, A.; Sinha, A.; Battewad, R. JavaScript for Modern Web Development: Building a Web
    Application Using HTML, 2020, Publisher: BPB Publications, ISBN- 938932873X, 9789389328738.
14. Kuhlman D. A Python Book: Beginning Python, Advanced Python, and Python Exercises., 2009, Publisher: Dave Kuhlman (Sweden).
    CrossRef
15. Scerri, E. R. The Periodic Table: Its Story and Its Significance, 2020, United States: Oxford University Press.
    CrossRef
16. Scerri, E. Trans. R. Soc. A, 2015, 373: 20140172. http://dx.doi.org/10.1098/rsta.2014.0172
    CrossRef
17. Lavoisier, A. L. Elementary Treatise on Chemistry, 1789, Vol. 1, Publisher: Cuchet, Paris.
18. Döbereiner, J. W. Poggendorf’s Annalen der Physik und Chemie, Leipzig, 1829, 15, 301-307. https://doi.org/10.1002/andp.18290910217
    CrossRef
19. Leicester H. M.; Klickstein, H. S. A Source Book in Chemistry, 1952, 1400-1900. United Kingdom: McGraw-Hill.
20. Beguyer De Chancourtois A. E. Compes Rendus de l’Académie des Sciences, 1862, 54, 757–761, 840–843, 967–971.
    
21. Spronsen, J. W. v. The Periodic System of Chemical Elements: A History of the First Hundred Years, 1969, pp. 46–47, Netherlands: Elsevier.
    CrossRef
    
22. Ede A.; Cormack, L. B. A History of Science in Society: From Philosophy to Utility, 2004, Publisher: Broadview Press.  Peterborough, Ont. p. 120, ISBN-13: ‎ 978-1551113326.
    
23. Meyer, J. L.; Ann. Chem. Suppl. 1870, 7, 354–364.
    
24. Mendeleev, D. Zeitschrif für Chemie, 1869, 12, 405–406.
    
25. Moseley, H. G. J. Philos. Mag. 1913, 26 (156), 1024–1034.
    CrossRef
    
26. Moseley, H. G. J. Philos. Mag., 1914, 27(160), 703–713.
    CrossRef
    
27. Hoffman, D. C.; Ghiorso, A.; Seaborg, G. T. The Transuranium people: The Inside Story, 2000. Imperial College Press, London, UK.
    CrossRef