Interactive Periodic Table is a web-based application that provides users with an intuitive and interactive way to explore chemical elements. Users can search for elements or click directly on the periodic table to view detailed information about each element.
- Interactive UI: Click on any element in the periodic table to view its properties.
- Search Functionality: Quickly find any element by name, symbol, or atomic number.
- Comprehensive Element Data: View detailed information, including atomic number, atomic mass, electron configuration, state at room temperature, and more.
- Responsive Design: Fully functional across devices, from desktops to mobiles.
- Educational Tool: Perfect for students, educators, and enthusiasts.
Ptable.1.mp4
![image](https://private-user-images.githubusercontent.com/175473474/398483084-969bd9c4-b3ff-4ddf-a521-f6feac2127f6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyMjcxMzUsIm5iZiI6MTczOTIyNjgzNSwicGF0aCI6Ii8xNzU0NzM0NzQvMzk4NDgzMDg0LTk2OWJkOWM0LWIzZmYtNGRkZi1hNTIxLWY2ZmVhYzIxMjdmNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQyMjMzNTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jODgxOWRkYTgwNzk5MjdlYjcyN2U1NjQzMGQzZjQ0ZmM5MTM0ZGZhMDE1YzVjM2Y3MjA1ZGRiZjI3NjNhYjFmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.16aJICRD6pl2sfK2HoFONUtuAEZsEHyJVRk-UROB9pM)
![image](https://private-user-images.githubusercontent.com/175473474/398483216-3ff7a27f-8933-4967-a4b1-8205cd3823f3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyMjcxMzUsIm5iZiI6MTczOTIyNjgzNSwicGF0aCI6Ii8xNzU0NzM0NzQvMzk4NDgzMjE2LTNmZjdhMjdmLTg5MzMtNDk2Ny1hNGIxLTgyMDVjZDM4MjNmMy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQyMjMzNTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03M2Y3ODk1ODMzNjMyMmM4ZDRiZGViOTc0NTk1NTg5MzU5ZDNjMzYxMjZmMzc0NWMzMTE4YWNkMzMyMGM0NTJmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.0vs8pqzjOlXDbCEOaQHIs0esx1TKIKMaxMC3LX9-7R4)
![image](https://private-user-images.githubusercontent.com/175473474/398545852-49b23d63-8c50-4bbe-ab13-8c36b9ab5ab6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyMjcxMzUsIm5iZiI6MTczOTIyNjgzNSwicGF0aCI6Ii8xNzU0NzM0NzQvMzk4NTQ1ODUyLTQ5YjIzZDYzLThjNTAtNGJiZS1hYjEzLThjMzZiOWFiNWFiNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQyMjMzNTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lMDRiYWYyNzdmZWE4YWM5ZmE2ODliZTg0MDExMDIxNzE4YjQ3Yzk0ZDUzZDViZGVmMTdmNmZmZjhhMmNkYWJlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.Ovy7tFRRIQTCTEzCQ3ZUYO6Bo0UAT3lVKUqy6HUf30M)
- Frontend: HTML, CSS, JavaScript
- Database (optional): JSON or an external API for element data
- Styling: TailwindCSS / Bootstrap / Custom CSS
- Clone the repository:
git clone https://github.com/your-username/interactive-periodic-table.git
- Navigate to the project directory:
cd interactive-periodic-table
- Open the
index.html
file in your browser:open index.html
- Search Bar: Type the name, symbol, or atomic number of an element to filter results.
- Click Elements: Click on any element in the table to view detailed information.
Below is the final Deployed website link which is publically available.. π₯ Click Me To See Periodic Table
We welcome contributions! To contribute:
- Fork this repository.
- Create a new branch:
git checkout -b feature-name
- Commit your changes:
git commit -m "Added new feature"
- Push to your branch:
git push origin feature-name
- Open a pull request.
- Add more visualization features, like periodic trends and 3D models.
- Include filtering by properties like states of matter or metallic character.
- Integrate with educational content or quizzes.
π₯ Contributors
We thank the following individuals for their valuable contributions to this project: β’ Arvind Kumar β’ Kumar Aditya β’ Kushagra β’ Gunjan β’ Saahi
For questions, feedback, or collaboration opportunities, feel free to reach out:
- Email: [email protected]
- GitHub: Aerospace-prog
Happy Learning! π