Periodic Table of Elements 🧪

A modern, interactive, and comprehensive periodic table of elements built with SvelteKit and TypeScript. This project aims to provide an educational resource for students, teachers, and science enthusiasts.

Live Demo

📸 Screenshots

Interactive Home Page

Explore elements with our color-coded, responsive grid.

Advanced Filtering

Filter elements by category, state, and more.

Element Details

Deep dive into atomic, physical, and historical properties of each element.

Chemistry Tools

Useful calculators and converters for chemistry students and professionals.

✨ Features

• Interactive Periodic Table: A fully responsive and interactive grid layout of all chemical elements.
• Detailed Element Information: Comprehensive data for each element including:
  • Atomic properties (Atomic number, mass, electron configuration)
  • Physical properties (Melting/boiling points, density, state)
  • History and discovery
  • Uses and occurrences
• Advanced Search & Filtering: Quickly find elements by name, symbol, or atomic number. Filter by chemical series (Alkali metals, Noble gases, etc.) and state of matter.
• Chemistry Tools:
  • Molar Mass Calculator: Calculate the molar mass of any chemical compound.
  • Electron Configuration Calculator: Determine the electron configuration of elements.
  • Mass Percent Calculator: Find the mass percentage of each element in a compound.
  • Compound Name Converter: Convert chemical formulas to names and vice versa.
• Scientist Profiles: Learn about the famous scientists who contributed to the discovery of elements.
• Educational Content: Articles and explanations about chemical concepts.
• Responsive Design: Seamless experience across desktop, tablet, and mobile devices.
• Dark Mode Support: Easy on the eyes for late-night study sessions.

🛠️ Tech Stack

• Framework: SvelteKit
• Language: TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite
• Package Manager: NPM

🚀 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine.

Prerequisites

• Node.js (v18 or higher recommended)
• npm

Installation

1. Clone the repository

   git clone https://github.com/shubham-soni9/periodic-table.git
   cd periodic-table
   

2. Install dependencies

   npm install
   

3. Start the development server

   npm run dev
   

4. Open the app Navigate to http://localhost:5173 in your browser.

📂 Project Structure

periodic-table/
├── public/              # Static assets (images, samples)
├── src/
│   ├── lib/
│   │   ├── element-details/ # MDX files for detailed element info
│   │   ├── elements/        # TypeScript data definitions for elements
│   │   ├── tools/           # Chemistry tool components and logic
│   │   ├── scientists/      # Scientist profiles
│   │   └── ...              # Shared components (ElementCard, Header, etc.)
│   ├── routes/              # SvelteKit file-based routing
│   │   ├── elements/        # Element detail pages
│   │   ├── tools/           # Tool pages
│   │   ├── scientists/      # Scientist pages
│   │   └── ...
│   └── app.html             # HTML entry point
├── package.json         # Project dependencies and scripts
└── README.md            # Project documentation

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

📧 Contact

Project Link: https://github.com/yourusername/periodic-table Live Site: https://www.periodictableofelements.cc/

Made with ❤️ for Chemistry