Elementro is a modern and interactive web application that offers a visually appealing and comprehensive periodic table of elements. It enables users to explore the elements, search by name or symbol, and filter by various properties such as element type, period, and group. Clicking on an element opens a detailed modal displaying extensive information, making it a valuable resource for students, educators, and chemistry enthusiasts.

Try it out:

• Live demo: https://elementro.netlify.app/
• My website: https://abdelrahmanz.netlify.app/

• Interactive Display: Fully interactive periodic table grid with hover and click effects. 📊
• Element Details: View detailed information in a modal for each element, including atomic number, atomic mass, group, period, element type, electron configuration, state at STP, melting point, and boiling point. 🔍
• Search Functionality: Quickly find elements by typing their name or symbol using the search bar. 🔎
• Filtering Options: Filter elements by:
  • Element Type (e.g., Alkali Metal, Noble Gas, Halogen) 🧪
  • Period 🗓️
  • Group 👨‍🔬
• Responsive Design: Optimized for smooth viewing and interaction across desktops, tablets, and mobile devices. 📱💻
• Visually Engaging: Dark theme with vibrant, type-based color coding to enhance readability. The header features a dynamic gradient atom icon rendered in SVG. 🎨

• HTML5: Semantic and accessible structure. 🌐
• CSS3 & Tailwind CSS: Custom styling and responsive design using utility-first classes. 💅💨
• JavaScript (ES6+): Dynamic content rendering, event handling, and modal logic. 💡
• SVG: Scalable vector graphics used for the atom icon in the header. 🖼️

To run the application locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Boda1607/elementro.git

2. Navigate into the project directory:

   cd elementro

3. Open index.html in your preferred web browser.
   No build process is needed as all dependencies are loaded via CDN.

Contributions and suggestions are welcome! To contribute:

1. Fork the repository. 🍴
2. Create a new branch for your feature or bug fix:

   git checkout -b feature/your-feature-name

3. Make your changes. ✍️
4. Commit your changes with a clear message:

   git commit -m "Add feature description"

5. Push your branch to GitHub:

   git push origin feature/your-feature-name
   

6. Open a Pull Request for review. ➡️

Please follow the existing code style and conventions.

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

• Periodic table data sourced from publicly available chemistry resources. 📚
• SVG atom icon design inspired by user-provided imagery. 🎨