Skip to content
Python Central Hub

Interactive Periodic Table

View Source Code

Abstract

Build an Interactive Periodic Table application that displays element information and allows searching by name or symbol. The app uses a GUI for user interaction. This project demonstrates data organization, event handling, and GUI development in Python.

Prerequisites

  • Python 3.6 or above
  • Text Editor or IDE
  • Basic understanding of Python syntax
  • Familiarity with Tkinter for GUI development
  • Knowledge of data structures

Getting Started

Creating a new project

  1. Create a new project folder and name it interactive_periodic_tableinteractive_periodic_table.
  2. Create a new file inside the folder and name it interactive_periodic_table.pyinteractive_periodic_table.py.
  3. Open the project folder in your favorite text editor or IDE.
  4. Copy the code below and paste it into the interactive_periodic_table.pyinteractive_periodic_table.py file.

Write the code

⚙️ interactive_periodic_table.py
interactive_periodic_table.py
"""
Interactive Periodic Table
 
A Python application that displays an interactive periodic table. Features include:
- Displaying information about elements when clicked.
- Searching for elements by name or symbol.
"""
 
import tkinter as tk
from tkinter import messagebox
 
# Sample data for the periodic table
elements = [
    {"symbol": "H", "name": "Hydrogen", "atomic_number": 1, "atomic_mass": 1.008},
    {"symbol": "He", "name": "Helium", "atomic_number": 2, "atomic_mass": 4.0026},
    {"symbol": "Li", "name": "Lithium", "atomic_number": 3, "atomic_mass": 6.94},
    {"symbol": "Be", "name": "Beryllium", "atomic_number": 4, "atomic_mass": 9.0122},
    {"symbol": "B", "name": "Boron", "atomic_number": 5, "atomic_mass": 10.81},
    {"symbol": "C", "name": "Carbon", "atomic_number": 6, "atomic_mass": 12.011},
    {"symbol": "N", "name": "Nitrogen", "atomic_number": 7, "atomic_mass": 14.007},
    {"symbol": "O", "name": "Oxygen", "atomic_number": 8, "atomic_mass": 15.999},
    {"symbol": "F", "name": "Fluorine", "atomic_number": 9, "atomic_mass": 18.998},
    {"symbol": "Ne", "name": "Neon", "atomic_number": 10, "atomic_mass": 20.180},
]
 
 
class InteractivePeriodicTable:
    def __init__(self, root):
        self.root = root
        self.root.title("Interactive Periodic Table")
 
        self.create_table()
 
    def create_table(self):
        """Create the periodic table layout."""
        for i, element in enumerate(elements):
            button = tk.Button(
                self.root,
                text=element["symbol"],
                width=10,
                height=3,
                command=lambda e=element: self.show_element_info(e),
            )
            button.grid(row=i // 5, column=i % 5, padx=5, pady=5)
 
    def show_element_info(self, element):
        """Display information about the selected element."""
        info = (
            f"Name: {element['name']}\n"
            f"Symbol: {element['symbol']}\n"
            f"Atomic Number: {element['atomic_number']}\n"
            f"Atomic Mass: {element['atomic_mass']}"
        )
        messagebox.showinfo("Element Information", info)
 
 
def main():
    root = tk.Tk()
    app = InteractivePeriodicTable(root)
    root.mainloop()
 
 
if __name__ == "__main__":
    main()
interactive_periodic_table.py
"""
Interactive Periodic Table
 
A Python application that displays an interactive periodic table. Features include:
- Displaying information about elements when clicked.
- Searching for elements by name or symbol.
"""
 
import tkinter as tk
from tkinter import messagebox
 
# Sample data for the periodic table
elements = [
    {"symbol": "H", "name": "Hydrogen", "atomic_number": 1, "atomic_mass": 1.008},
    {"symbol": "He", "name": "Helium", "atomic_number": 2, "atomic_mass": 4.0026},
    {"symbol": "Li", "name": "Lithium", "atomic_number": 3, "atomic_mass": 6.94},
    {"symbol": "Be", "name": "Beryllium", "atomic_number": 4, "atomic_mass": 9.0122},
    {"symbol": "B", "name": "Boron", "atomic_number": 5, "atomic_mass": 10.81},
    {"symbol": "C", "name": "Carbon", "atomic_number": 6, "atomic_mass": 12.011},
    {"symbol": "N", "name": "Nitrogen", "atomic_number": 7, "atomic_mass": 14.007},
    {"symbol": "O", "name": "Oxygen", "atomic_number": 8, "atomic_mass": 15.999},
    {"symbol": "F", "name": "Fluorine", "atomic_number": 9, "atomic_mass": 18.998},
    {"symbol": "Ne", "name": "Neon", "atomic_number": 10, "atomic_mass": 20.180},
]
 
 
class InteractivePeriodicTable:
    def __init__(self, root):
        self.root = root
        self.root.title("Interactive Periodic Table")
 
        self.create_table()
 
    def create_table(self):
        """Create the periodic table layout."""
        for i, element in enumerate(elements):
            button = tk.Button(
                self.root,
                text=element["symbol"],
                width=10,
                height=3,
                command=lambda e=element: self.show_element_info(e),
            )
            button.grid(row=i // 5, column=i % 5, padx=5, pady=5)
 
    def show_element_info(self, element):
        """Display information about the selected element."""
        info = (
            f"Name: {element['name']}\n"
            f"Symbol: {element['symbol']}\n"
            f"Atomic Number: {element['atomic_number']}\n"
            f"Atomic Mass: {element['atomic_mass']}"
        )
        messagebox.showinfo("Element Information", info)
 
 
def main():
    root = tk.Tk()
    app = InteractivePeriodicTable(root)
    root.mainloop()
 
 
if __name__ == "__main__":
    main()

Key Features

  • Display interactive periodic table
  • Show element details on click
  • Search elements by name or symbol
  • GUI interface for user interaction

Explanation

Data Organization

Elements are stored as dictionaries in a list for easy access:

interactive_periodic_table.py
elements = [
    {"symbol": "H", "name": "Hydrogen", "atomic_number": 1, "atomic_mass": 1.008},
    {"symbol": "He", "name": "Helium", "atomic_number": 2, "atomic_mass": 4.0026},
    # ... more elements ...
]
interactive_periodic_table.py
elements = [
    {"symbol": "H", "name": "Hydrogen", "atomic_number": 1, "atomic_mass": 1.008},
    {"symbol": "He", "name": "Helium", "atomic_number": 2, "atomic_mass": 4.0026},
    # ... more elements ...
]

Creating the Table

The app dynamically creates buttons for each element:

interactive_periodic_table.py
for i, element in enumerate(elements):
    btn = Button(self.root, text=element["symbol"], command=lambda e=element: self.show_element_info(e))
    btn.grid(row=..., column=...)
interactive_periodic_table.py
for i, element in enumerate(elements):
    btn = Button(self.root, text=element["symbol"], command=lambda e=element: self.show_element_info(e))
    btn.grid(row=..., column=...)

Showing Element Info

Clicking an element displays its details:

interactive_periodic_table.py
def show_element_info(self, element):
    messagebox.showinfo("Element Info", f"Name: {element['name']}\nSymbol: {element['symbol']}\nAtomic Number: {element['atomic_number']}\nAtomic Mass: {element['atomic_mass']}")
interactive_periodic_table.py
def show_element_info(self, element):
    messagebox.showinfo("Element Info", f"Name: {element['name']}\nSymbol: {element['symbol']}\nAtomic Number: {element['atomic_number']}\nAtomic Mass: {element['atomic_mass']}")

Running the Application

  1. Save the file.
  2. Run the application:
python interactive_periodic_table.py
python interactive_periodic_table.py

Conclusion

This Interactive Periodic Table project is a great way to learn about data organization and event-driven programming in Python. You can extend it by adding more elements, search filters, or visual enhancements.

Was this page helpful?

Let us know how we did