Interactive Periodic Table

This release rebuilds the table from the ground up — accurate data, high‑end graphics, a full teaching engine, and a set of signature interactive tools. If you've used an older version, here's what changed.

The whole app is a single file, PT.html. There are two ways to open it, and the only difference is the 3D atom.

Option A — Just double‑click it

Double‑click PT.html and it opens in your browser. Everything works except the fancy WebGL 3D atom, which automatically falls back to a built‑in CSS atom. Great for quick use.

Option B — Run a tiny local server (full experience)

The WebGL atom + orbital‑cloud mode loads a 3D library as a browser module, which browsers block when a page is opened straight from disk. To get it, serve the folder over http://:

1. Open PowerShell (or Command Prompt) in the Periodic Table folder.
2. Run: python -m http.server 8765  (or npx http-server -p 8765).
3. Open http://localhost:8765/PT.html in your browser.
4. Leave the terminal window open while you use it; press Ctrl+C to stop.

The main grid shows all 118 elements in their standard positions, with the lanthanides and actinides laid out in two rows beneath. Each tile is colored by category and shows the element's symbol and atomic number.

• Click any element to load its details in the left panel.
• Hover a tile to see the full element name pop up and a soft highlight lift.
• Keyboard: Tab into the grid, then activate a tile with Enter / Space; the popup name also appears on focus.
• The grid scales to fit beside the details panel; on phones it stacks vertically.

The left panel is organized so it never becomes a long scroll. A colored title bar always shows the current element (name, symbol, atomic number), and the content sits in two tabs:

The atom model lives at the bottom of the More tab and is always shown there — just switch to the More tab. It renders the element's exact proton, neutron, and electron counts.

Two views (toggle pill, top‑right of the atom)

The More tab shows the element's electron configuration (with noble‑gas shorthand, e.g. [Ar] 3d⁵ 4s¹). For the story behind it, press ⚡ Watch it fill (Aufbau).

• Electrons drop into orbital boxes one at a time, lowest energy first — you literally see 4s fill before 3d.
• The configuration builds up live below the diagram.
• Play / Pause / Restart controls and a speed slider.
• For exceptions like Chromium and Copper, it flags the anomaly and shows the real ground state (a half‑filled or full d‑subshell is extra stable).

Press ⚛ Isotopes & decay in the More tab. A neutron slider rebuilds the nucleus while the proton count stays fixed — the core lesson that protons define the element, neutrons define the isotope.

• Live isotope notation (e.g. ¹²C → ¹⁴C) and proton/neutron counts.
• Famous isotopes (Carbon‑14, Uranium‑235, Cobalt‑60, Americium‑241, and more) show their real half‑life, decay mode, and an exponential decay curve.
• Stable isotopes show their natural abundance instead.

Press 🔧 Atom Builder to build any atom from scratch with +/- steppers for protons, neutrons, and electrons.

• Protons set the element, neutrons the isotope, electrons the charge.
• Live readout: element name, mass number, ion notation (e.g. ²³Na⁺), and whether it's a neutral atom, cation, or anion.
• A stability note flags neutron‑rich / proton‑rich isotopes and elements past lead as radioactive.
• Show this element on the table → jumps to the matching tile.

The search box at the top of the panel does three things:

Click 📚 Guided Lessons (above the table) for short interactive tours that spotlight parts of the table and explain one idea at a time, each ending with a quick check question.

• Reading an element — symbols, numbers, position, and color.
• Metals, nonmetals & metalloids — the three big categories.
• Families & groups — why columns behave alike.
• Periodic trends — how size and electronegativity change.
• Atomic structure — nucleus, shells, and orbitals.

Use Back / Next to move through steps; ✕ exits and clears the highlights.

Open Tools → Periodic Trends. Choose a property (electronegativity, atomic radius, ionization energy, melting/boiling point, density) and:

• Apply Trend tints every tile along a colorblind‑safe perceptual scale; the legend shows the real min/max from the data.
• ▶ Animate sweeps a pulse across a period, then down a group, narrating the cause element‑by‑element (e.g. "electronegativity rises because each step adds a proton… falls down a group because each row adds a shell").
• 🔊 Sound makes the animation play tones whose pitch tracks each element's value — hear periodicity.
• Clear removes the tint and stops the animation.

Open Tools → Temperature States and drag the slider (0–10,000 K) to recolor the table by each element's physical state at that temperature, with crisp outlines so every element stays distinct.

Live counts update beneath the slider, and preset buttons jump to notable points (Absolute Zero, water's freezing/boiling points, room temperature, the Sun's surface at 5778 K).

Open Tools → Discovery Timeline and drag through history. Elements light up in the year they were discovered or synthesized, with a caption naming who found what.

• Era preset buttons (Antiquity → 1789, Mendeleev's table 1869, Nuclear age 1945, Today).
• Reveal the predicted elements spotlights Mendeleev's famous gap predictions (Scandium, Gallium, Germanium) with his predicted‑vs‑actual mass and density.

Open Tools → Element Quiz, pick a difficulty, and Start.

• Easy / Medium / Hard — symbols, properties & trends, configurations.
• After each answer you get an explanation (e.g. the element's number, category, period/group, configuration), then press Next — no rushed auto‑advance.
• Questions you miss are saved; pick Review Missed (n) to drill them. Getting one right in review mode removes it from the queue. Your misses persist between sessions.

On the More tab, press ⚖ Add to Compare to pin the current element (up to 3). A tray appears at the bottom; press View ⚖ for a side‑by‑side table.

• Each numeric row highlights the winner and draws a scaled bar, so trends jump out (e.g. Li → Na → K shows radius growing while electronegativity falls).
• Remove a chip with its ✕, or clear the whole comparison.

Click 🔬 What's in this? (above the table) and pick an everyday thing. The table lights up the elements it's made of, with percent badges and a sorted breakdown panel.

• A human body, a smartphone, seawater, the Sun, a banana, stainless steel, the air, and Earth's crust.
• Answers questions like "why should I care about element 79?" — gold turns up in your phone's contacts (≈0.02%).
• Close the breakdown panel (✕) to reset the table.

Click 🔗 Bonding Lab and choose two elements. It shows how they bond:

• Lewis dot structures for each atom.
• The bond type — ionic (metal + nonmetal, with electron transfer and ion charges), covalent (nonmetal + nonmetal, sharing), metallic, or "no reaction" for noble gases.
• The resulting formula by criss‑cross of valencies — Na+Cl→NaCl, Ca+Cl→CaCl₂, Al+O→Al₂O₃, H+O→H₂O.

Click 🏆 Daily for the Element of the Day (a new one each day), plus your progress:

• A visit streak 🔥 that grows on consecutive days.
• A viewed‑collection progress bar (elements you've opened, out of 118).
• Badges that unlock with a confetti burst (First Look, Curious 10, Explorer 50, Completionist 118, Noble Pursuit, Alkali Club, streak badges).

Progress is stored in your browser; it stays between visits.

• 🔗 Share copies a link that captures your current view — selected element, theme, atom panel + mode, active trend, temperature, open tab, comparison set, and composition. Paste it anywhere and the page reopens exactly there.
• 📷 Card downloads a clean image card of the current element (symbol, name, mass, configuration, and a fun fact) — great for slides or sharing.

Category legend (filter)

The legend above the table is laid out in two aligned rows. Click any category to dim everything else and isolate that family; click it again to clear. It's keyboard‑operable and announces what changed.

Dark Mode

The Dark Mode toggle switches themes with a smooth crossfade; your choice (and which panels are open) is remembered between visits. First‑time visitors get the system's light/dark preference.

Definitions

The Definitions toggle opens a carousel of plain‑language explanations for every category and property. Use the arrows or dots to browse. It reopens populated if you refresh with it open.

Element categories

Properties shown for each element