https://github.com/aerospace-prog/interactive-periodic-table
Developing a web-based interactive periodic table that allows users to view information about chemical elements through search functionality and many more things...😉 EXPLORE NOW!!
https://github.com/aerospace-prog/interactive-periodic-table
3d-models css html interactive js json learning librarie netlify-deployment periodic-table ui user-friendly website
Last synced: 10 months ago
JSON representation
Developing a web-based interactive periodic table that allows users to view information about chemical elements through search functionality and many more things...😉 EXPLORE NOW!!
- Host: GitHub
- URL: https://github.com/aerospace-prog/interactive-periodic-table
- Owner: Aerospace-prog
- Created: 2024-12-09T16:29:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-27T14:56:42.000Z (11 months ago)
- Last Synced: 2025-02-27T21:08:28.970Z (11 months ago)
- Topics: 3d-models, css, html, interactive, js, json, learning, librarie, netlify-deployment, periodic-table, ui, user-friendly, website
- Language: JavaScript
- Homepage: https://interact-periodic-table.netlify.app/
- Size: 61.5 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Interactive Periodic Table 🌟🔬
**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.
---
## 🚀 **Features**
- **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.
---
## 🖼️ **Preview**
Final Video
HomePage
You can even access your history
We can know more about details
---
## 🛠️ **Tech Stack**
- **Frontend**: HTML, CSS, JavaScript
- **Database** (optional): JSON or an external API for element data
- **Styling**: TailwindCSS / Bootstrap / Custom CSS
---
## 🔧 **Setup and Installation**
1. Clone the repository:
```bash
git clone https://github.com/your-username/interactive-periodic-table.git
```
2. Navigate to the project directory:
```bash
cd interactive-periodic-table
```
3. Open the `index.html` file in your browser:
```bash
open index.html
```
---
## 🚩 **Usage**
- **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.
---
## 🔗 **Website Link**
Below is the final Deployed website link which is publically available.. 🔥
Click Me To See Periodic Table
## 🤝 **Contributing**
We welcome contributions! To contribute:
1. Fork this repository.
2. Create a new branch:
```bash
git checkout -b feature-name
```
3. Commit your changes:
```bash
git commit -m "Added new feature"
```
4. Push to your branch:
```bash
git push origin feature-name
```
5. Open a pull request.
---
## 💡 **Future Enhancements**
- 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](https://github.com/Arvind-kumar2006)
• [Kumar Aditya](https://github.com/kumaradityaapril)
• [Kushagra](https://github.com/Aerospace-prog)
• [Gunjan](https://github.com/gunjan-mahesw)
• [Saahi](https://github.com/Saahi30)
---
## 🧑💻 **Contact**
For questions, feedback, or collaboration opportunities, feel free to reach out:
- **Email**: kushagra22.aug@gmail.com
- **GitHub**: [Aerospace-prog](https://github.com/Aerospace-prog)
---
Happy Learning! 🎉