A modern, feature-rich web-based periodic table application built with Node.js, WebSocket, and Bootstrap. Explore comprehensive element data with real-time updates, dark/light themes, and responsive design for both desktop and mobile devices.
- Dual Theme Support: Automatic, light, and dark modes with smooth transitions
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Bootstrap Integration: Clean, professional interface using Bootstrap 5
- Sticky Status Bar: Real-time connection and statistics always visible
- 118+ chemical elements with detailed properties
- Atomic structure, physical properties, isotopes, and more
- Interactive element cards with category color-coding
- Modal system for detailed element information
- WebSocket Support: Live updates and real-time client count
- Auto-Reconnect: Graceful connection handling with exponential backoff
- REST API: Full HTTP endpoints for element data access
- Real-Time Search: Filter elements by name, symbol, or atomic number
- Category Filtering: Filter by element categories (metals, nonmetals, etc.)
- Visual Highlights: Search matches and hover effects
- F-Block Display: Separate display for lanthanides and actinides
- Node.js 18 or higher
- npm (comes with Node.js)
# Clone the repository
git clone https://github.com/yourusername/Elements.git
cd Elements
# Install dependencies
npm install
# Start the server
npm startThe application will be available at http://localhost:3000
# Start with auto-reload on file changes
npm run devElements/
├── data/
│ └── elements.json # Complete periodic table dataset
├── public/
│ ├── index.html # Main HTML structure
│ ├── client.js # Client-side JavaScript class
│ ├── shared.js # Shared utilities and constants
│ ├── styles.css # Comprehensive CSS with themes
│ └── jquery-3.7.1.min.js # jQuery library
├── src/
│ └── server.js # Node.js server with WebSocket
├── package.json # Project dependencies
└── README.md # This file
- Express.js: HTTP server and REST API
- WebSocket (ws): Real-time bidirectional communication
- Element Data Loading: JSON-based element database
- API Endpoints:
GET /api/elements- Get all elementsGET /api/elements/:atomicNumber- Get specific elementGET /api/search?q=query- Search elementsGET /api/stats- Server statistics
- ElementsClient Class: Main client application
- WebSocket Client: Real-time server communication
- Theme Management: Auto/light/dark theme switching
- Dynamic Rendering: Periodic table grid generation
- Event Handlers: Search, filter, and UI interactions
- Constants: Element categories, message types
- Utilities: Formatting, theme detection, calculations
- Category Colors: Visual coding for element types
The application supports three theme modes:
- Light Mode: Traditional bright interface
- Dark Mode: Eye-friendly dark interface
- Auto Mode: Matches system preference
Toggle themes using the button in the top-right corner or it will automatically detect your system preference.
Breakpoints:
- Desktop: 1400px+ (Full periodic table with all details)
- Laptop: 992px-1399px (Optimized element cards)
- Tablet: 768px-991px (Compact layout)
- Mobile: <768px (Touch-optimized, horizontal scroll)
// Get specific element
{
type: 'GET_ELEMENT',
payload: { atomicNumber: 1 }
}
// Search elements
{
type: 'SEARCH',
payload: { query: 'gold' }
}
// Ping/keepalive
{
type: 'PING'
}// Welcome message
{
type: 'WELCOME',
payload: { totalElements: 118, connectedClients: 5 }
}
// Client count update
{
type: 'CLIENT_COUNT',
payload: { count: 6 }
}
// Element data response
{
type: 'ELEMENT_DATA',
payload: { /* element object */ }
}Each element in data/elements.json includes:
{
"name": "Hydrogen",
"symbol": "H",
"atomicNumber": 1,
"atomicWeight": { "value": 1.008, "units": "u" },
"atomicRadius": {
"covalent": { "value": 31, "units": "pm" },
"vanDerWaals": { "value": 120, "units": "pm" }
},
"electronConfiguration": "1s1",
"oxidationStates": [-1, 0, 1],
"meltingPoint": { "value": 13.99, "units": "K" },
"boilingPoint": { "value": 20.271, "units": "K" },
"density": { /* solid, liquid, gas */ },
"isotopes": [ /* isotope data */ ],
"description": "...",
"group": 1,
"period": 1,
"block": "s",
"category": "diatomic nonmetal"
}- Alkali Metals (red)
- Alkaline Earth Metals (yellow)
- Transition Metals (green)
- Post-Transition Metals (teal)
- Metalloids (light green)
- Nonmetals (blue)
- Noble Gases (pink)
- Lanthanides (orange)
- Actinides (red-pink)
PORT=3000 # Server port (default: 3000)
NODE_ENV=development # Environment mode- Server logic:
src/server.js - Client logic:
public/client.js - Shared utilities:
public/shared.js - Styling:
public/styles.css
Edit data/elements.json to add or update element information. The server will automatically reload the data.
# Get all elements
curl http://localhost:3000/api/elements
# Get Hydrogen (atomic number 1)
curl http://localhost:3000/api/elements/1
# Search for elements
curl http://localhost:3000/api/search?q=gold
# Get server stats
curl http://localhost:3000/api/statsconst ws = new WebSocket('ws://localhost:3000');
ws.onopen = () => {
ws.send(JSON.stringify({
type: 'GET_ELEMENT',
payload: { atomicNumber: 79 } // Gold
}));
};
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(data);
};Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Element data compiled from IUPAC and various scientific sources
- Bootstrap framework for UI components
- WebSocket protocol for real-time communication
- jQuery for DOM manipulation utilities
Project Link: https://github.com/CyberSecDef/Elements
Made with ❤️ and ⚛️ by the Elements Team