📊 Periodix

Periodix is a web application that renders an interactive Periodix table of elements, offering both visual engagement and scientific insights.

🧠 Description

Periodix is one of the developer’s early JavaScript projects, built using Vanilla JavaScript to sharpen coding skills and express a passion for physics and chemistry. The application is fully functional and serves as both a learning tool and a base for future improvements.

This project demonstrates:

• Practical use of JavaScript for dynamic DOM manipulation
• Responsive HTML/CSS design
• A data-driven interface that enhances user interaction

💡 Although complete, the developer acknowledges room for enhancements such as search functionality, improved UI design, and mobile optimization.

---

🛠️ Technologies Used

Technology	Purpose
Vanilla JavaScript	Controls logic, element interactions, and data rendering
HTML	Provides the structure of the Periodix table and UI
CSS	Styles the interface with color coding, grid layout, and responsiveness

---

🚀 Key Features

🔹 Interactive Periodix Table

• A dynamic grid displaying all known chemical elements
• Visually organized by groups and periods
• Color coded based on element type (e.g., metals, nonmetals)

🔹 Detailed Element Cards

• Click on an element to view scientific details

  • Name (e.g., Osmium, Rhodium)
  • Atomic number
  • Symbol
  • Atomic mass
  • Category

🔹 Responsive UI

• Designed to work on desktop and tablet viewports
• Clean layout ensures information is easy to explore

⚙️ Potential Enhancements

• Search bar for quick element lookup
• Filter options (e.g., by state, group, or block)
• Tooltips or hover effects for faster insight
• Mobile optimization

📥 Getting Started

To run Periodix locally:

1. Clone the repository

git clone https://github.com/Pro-Bandey/Periodix.git

2. Open the project

Navigate into the cloned folder and open:

index.html

in your web browser.

---

📌 Tips for Contributors

If you’d like to contribute:

• Fork the repo
• Create a feature branch
• Submit a pull request with your improvements

Suggested contribution areas:

• UX/UI redesign
• Support for dark mode
• Adding element search/filter functions

---

🧪 Learning Outcomes (for Developers)

By building and improving Periodix, you can:

• Strengthen Vanilla JS skills
• Practice DOM manipulation and event handling
• Build responsive web layouts
• Understand scientific data structures

---