PeriodicPlayground

An interactive periodic table web application that allows users to explore chemical elements with detailed information.

Features

• Interactive Element Cards: Browse all 118 elements with color-coded categories
• Detailed Element Information: Click any element to view comprehensive details including:
  • Atomic properties (number, mass, configuration)
  • Discovery information
  • Common uses
  • Interesting fun facts
• Powerful Search & Filtering:
  • Search by name, symbol, or atomic number
  • Filter by element category (metals, nonmetals, noble gases, etc.)
  • Filter by state at room temperature (solid, liquid, gas)
• Responsive Design: Works on desktop and mobile devices
• Modern UI: Clean interface with smooth animations and transitions

☕ Support my work on Ko-Fi

Technologies Used

• HTML5
• CSS3 (with CSS variables and animations)
• JavaScript (ES6)
• Font Awesome icons
• Google Fonts (Poppins)

Project Structure

PeriodicPlayground/
├── index.html          # Main HTML file
├── styles.css          # All styling
├── script.js           # Main JavaScript functionality
├── elements.json       # Complete element data
└── site-data/          # Favicon and site manifest files

How to Use

1. Browse elements in the grid view
2. Click any element card to view detailed information
3. Use the search bar to find specific elements
4. Filter elements by category or state using the controls
5. Close the detail modal by clicking the X, clicking outside, or pressing Escape

Development

To run locally:

1. Clone the repository
2. Open index.html in a web browser

Join my Discord server

Data Source

All element data is included in the elements.json file, containing comprehensive information about each element including:

• Atomic properties
• Discovery information
• Common uses
• Interesting facts

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.