Interactive Periodic Table

A fully interactive periodic table learning app built for freeCodeCamp. Explore all 118 elements, run virtual lab simulations, compare properties side by side, visualize periodic trends, and generate printable worksheets — all in one place.

Features

Periodic Table

• Full 118-element interactive table with group, period, and f-block labels
• Click any element to open a detailed slide-in panel (symbol, name, atomic number, category, properties, electron configuration, uses, safety notes)
• Navigate between elements with prev/next arrows or keyboard (← → Esc)
• Ctrl+click to add elements to the comparison tray
• Filter by category, period, group, block, standard state, and numeric ranges (melting point, boiling point, density, electronegativity, ionization energy, atomic radius, discovery year)
• Search by name, symbol, or atomic number
• Color-coded category legend with toggle filtering

Virtual Lab

• Physics-based beaker simulation — drag left/right to tilt the beaker and watch particles flow with gravity
• Tilt past ~56° and particles spill out of the beaker
• Double-click to snap the beaker back upright
• Drag indicators onto the beaker (or click to select): Red Litmus, Blue Litmus, Universal Indicator, pH Meter
• Particles change color with a turbulence animation when the indicator is applied
• pH meter gauge with animated needle
• Make a prediction (acidic / neutral / basic) before running the simulation and get instant feedback
• Elements organized by category in the sidebar — no more scrolling through all 118 at once

Compare

• Compare up to 4 elements side by side
• Full properties table: atomic number, mass, category, period, group, block, state, melting/boiling points, density, electronegativity, ionization energy, electron configuration, oxidation states, year discovered, uses, safety
• Bar charts for numeric properties (melting point, boiling point, density, electronegativity, ionization energy)
• Highest value highlighted teal, lowest highlighted red
• Export to worksheet — sends the comparison directly to the Worksheet page as a printable/copyable worksheet
• Add elements via search picker or Ctrl+click from the main table
• Pre-load a comparison from the URL: /compare?elements=Na,K,Li

Periodic Trends

• Heatmap view of the full periodic table colored by property value
• 6 properties: Atomic Radius, Electronegativity, Ionization Energy, Melting Point, Boiling Point, Density
• Low → mid → high color gradient (navy → teal → gold)
• Missing-data tiles shown with a striped pattern
• Trend explanation for each property
• Property selector with instant re-render

Worksheet Generator

• Generate printable worksheets with configurable difficulty (Beginner / Intermediate / Advanced)
• 6 topic types: Element Identification, Physical & Chemical Properties, Periodic Trends, Atomic Structure, Virtual Lab Predictions, Compare & Contrast
• 7 question types: Multiple Choice, Short Answer, Matching, Ranking, Fill Table, Prediction, True/False
• Choose element set: All 118, Main Block, Period 1–3, Selected, or Random Balanced (20)
• Seeded generation — same seed + config always produces the same worksheet
• Copy as Markdown or Print directly from the browser
• Worksheet preview with inline answer key toggle

Tech Stack

Layer	Choice
Framework	Astro 6 with React 19 islands
Styling	Tailwind CSS v4 (@tailwindcss/vite)
State	nanostores
Animation	Framer Motion
Charts	Recharts
Physics	Canvas 2D with custom particle engine
3D models	React Three Fiber
Testing	Vitest + Playwright
Package manager	pnpm

Getting Started

# Install dependencies
pnpm install

# Start development server (http://localhost:4321)
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Run unit tests
pnpm test

Project Structure

src/
├── components/
│   ├── charts/          # TrendHeatmap
│   ├── compare/         # ComparePanel
│   ├── element-detail/  # ElementDetail, ElementDetailModal
│   ├── filters/         # FilterDrawer, FilterPanel, SearchBar
│   ├── lab/             # LabSimulator (canvas physics)
│   ├── periodic-table/  # PeriodicTable, ElementTile
│   └── worksheets/      # WorksheetBuilder
├── data/
│   ├── elements.json        # 118 elements with full property data
│   ├── lab-contexts.json    # Acid/base lab scenarios per element
│   └── worksheet-templates.json
├── lib/
│   ├── element-utils.ts     # Grid position, color helpers
│   ├── filters.ts           # Multi-criteria filter engine
│   ├── units.ts             # Temperature, density formatters
│   └── worksheet-generator.ts
├── pages/
│   ├── index.astro          # Main table
│   ├── compare.astro
│   ├── lab.astro
│   ├── trends.astro
│   ├── worksheets.astro
│   └── element/[symbol].astro  # 118 static element pages
├── stores/
│   ├── selectionStore.ts    # $selectedSymbol
│   ├── comparisonStore.ts   # $comparisonElements
│   ├── filterStore.ts       # All filter atoms
│   └── progressStore.ts
├── styles/
│   └── global.css           # Tailwind v4 @theme tokens
└── types/
    ├── element.ts
    ├── lab.ts
    └── worksheet.ts

Data

All element data lives in src/data/elements.json (118 entries). Each record includes:

• Identity: name, symbol, atomicNumber, atomicMass, category, period, group, block
• Physical: standardState, meltingPointK, boilingPointK, density
• Chemical: electronegativity, ionizationEnergyEv, atomicRadiusPm, electronConfiguration, oxidationStates
• Discovery: yearDiscovered, discoveredBy
• Context: uses, safetyNotes, funFact

License

MIT — built for freeCodeCamp educational use.