Interactive Periodic Table of Elements 🧪

A fully responsive, interactive Periodic Table built from scratch using HTML, CSS Grid, and JavaScript. This project demonstrates advanced CSS Grid coordinate mapping and DOM manipulation for filtering elements.

🚀 Features

• CSS Grid Architecture: Utilizes strict grid-column and grid-row placements to perfectly replicate the complex layout of the periodic table, including the necessary gaps.
• Live Search & Filtering: Users can search for elements by name or symbol, and filter by chemical category (e.g., Alkali Metals, Noble Gases) in real-time.
• Interactive Tooltips: Custom CSS tooltips reveal the atomic mass of each element upon hover or focus.
• Accessible & Semantic Design: Built using keyboard-navigable <button> tags and ARIA labels, making the grid fully accessible to screen readers.

💻 Tech Stack

• HTML5: Semantic structure and accessibility.
• CSS3: Flexbox, CSS Grid, custom tooltips, and state-based styling.
• Vanilla JavaScript: Event listeners, array filtering, and dynamic class toggling.

📂 Project Structure

```text ├── index.html ├── css/ │ └── style.css └── js/ └── script.js ```

👨‍💻 Author

Sanskar Wanjari

• Computer Engineering, VJTI

LIVE DEMO LINK: https://sanskarcoder29.github.io/interactive-periodic-table/