Creating a Periodic Table Page with AI: Not Exactly One-Click Magic… But Close

Creating a Periodic Table Page with AI: Not Exactly One-Click Magic… But Close

We embarked on a noble educational quest: to build a fully functional webpage that displays an interactive periodic table. This is meant to inspire educators who’ve never touched HTML in their lives bring chemistry to life, as an example, for their students. The idea? To use Gemini 2.5 Pro Experimental to do the coding for us, knowing it is at the top of the ranks when it comes to coding tasks at the moment.

Ask for too much—say, properties of each element beyond their basic info—and Gemini throws a tantrum. Gemini, ChatGPT… or the recently pitched-as-magical GenSpark, whatever your flavour. Miss AI will log you out, crash, or use any other trick under her sleeve faster than you can say “Hydrogen.” Too many ingredients in the cake and you’ll get thrown out of the kitchen before you add the flour. And it is not because they cannot handle it. It is more a case of 'Are you actually asking me to use THAT many tokens, mere mortal? Info about 100+ elements? Are you kidding me?' Yep, capped in disguise, even if you religiously pay every month.

So, unless you want a very basic table (in which case it will actually do it in one go), my tip is to use Gemini inside Google AI Studio, not through its regular chat interface. The latter gets commitment-phobic the second you ask it to remember beyond Sodium and politely invites you to bugger off and find the rest of the info on your own. Through Google AI Studio, on the other hand, it sticks around long enough for you to wrangle it into producing something useful.

That said, don’t expect it to write the whole thing in one go. No sir/madam. These AIs are clever but notoriously lazy. They’ll give you the bare minimum unless you coax, nudge, or aggressively prod them into delivering. You want clean code? Interactive layout? Neatly styled boxes for each element? You’ll have to ask, ask again, and then follow up like you're chasing a plumber who promised to pop by "sometime next week."

So, really take your time to think about your initial prompt to reduce the AI tantrums to the minimum. In our case, this was the prompt, and we only required a single follow-up instruction to make Gemini produce the whole table after creating it just for a handful of elements. However, don’t be over ambitious with the amount of data you want for each element, or it will cry like a little baby as soon as mum turns around.

Prompt (Gemini 2.5 Pro Preview 3/25):

‘Provide the code for a single, self-contained HTML file that renders a stunningly visual and interactive Periodic Table of Elements designed for educational purposes. The design should embrace a whimsical and futuristic aesthetic, using vibrant gradients, glowing hover effects, SVG icons, and smooth animations to captivate students and science lovers alike.

Each element should be clickable, triggering a smooth pop-up/modal with key information:

1. Basic Information

• Atomic Number

• Symbol

• Name

• Atomic Mass

2. Classification/Attributes/properties:

• Category/Type : Metal (Alkali, Alkaline Earth, Transition, Post-Transition, Lanthanide, Actinide). Non-metal (Halogen, Noble Gas, Other Non-metals). Metalloid

• State at Room Temperature

• Group : Column number in the Periodic Table (e.g., Group 1 for Alkali Metals).

• Period : Row number in the Periodic Table.

3. Physical Properties

• Density (g/cm³)

• Melting Point (°C or K)

• Boiling Point (°C or K)

• Electrical Conductivity (e.g., good conductor, insulator)

• Thermal Conductivity (W/m·K)

4. Chemical Properties

• Electronegativity (Pauling scale)

• Ionization Energy (kJ/mol)

• Electron Affinity (kJ/mol)

• Oxidation States : Common oxidation states of the element.

• Reactivity : General description of how reactive the element is with water, air, acids, etc.

5. Atomic Structure

• Electron Configuration : Distribution of electrons in shells and orbitals.

• Number of Protons, neutrons and electrons

• Valence Electrons

6. Fun fact

The table must be responsive and styled entirely with internal CSS. All JavaScript and CSS must be embedded. Use inline SVGs for graphical flair, optimized from open-source repositories like D3.js. For backgrounds and patterns, use CSS gradients or SVG filters.

Bonus: Include a discrete toggle option at the side between 'standard view' and 'alternative view' that uses another palette. Include subtle, CSS-based animated particles or sparkles for a magical sci-fi ambiance—entirely within the HTML.

Visual Enhancements:

• To make the table visually engaging, consider adding:

• Color Coding : Use colors to represent categories (e.g., metals, non-metals, metalloids).

Interactive Tooltips : Display classification details when hovering over an element’.

After 35 secs of thinking and 214 secs of spilling code like a champ, we got a working page but… with just 21 random elements in it.

Follow up prompt (with pursed lips):

‘I can only see 21 elements. I need the full table.’

After 25 secs of further thinking, some mumbled apologies, and a further 475 secs of coding frenzy, these are the results:

Note: best visualized in a computer browser.