Prueba con Fe, oxígeno o 11
Chemical element input with Bohr model
Type a symbol, a name or an atomic number and its periodic table tile appears, with electrons spinning in their shells.
Settings
Code
<div class="uvq06-pe"><label for="uvq06-pe-in" class="lb">Chemical element</label><div class="fd"><button type="button" class="nv" data-s="-1" aria-label="Previous element">‹</button><input id="uvq06-pe-in" autocomplete="off" spellcheck="false" placeholder="Symbol, name or number" aria-describedby="uvq06-pe-h"><button type="button" class="nv" data-s="1" aria-label="Next element">›</button></div><div class="cd" aria-live="polite"><div class="tl"><span class="z"></span><span class="m"></span><b class="sy"></b><span class="nm"></span><span class="ct"></span></div><svg class="bo" viewBox="-64 -64 128 128" aria-hidden="true"></svg></div><p class="ht" id="uvq06-pe-h">Try Fe, oxygen or 11</p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
A search field for chemical elements that answers with a periodic table tile and an inline SVG Bohr model. It accepts symbols, names without accents or atomic numbers, and the arrow keys or the side buttons step through the table. The tile takes the colour of the element family, and each electron shell spins at its own speed and direction.
The main color is the nucleus and the second color the electrons. The demo table covers the first twenty elements plus iron, copper, zinc, silver and gold; add more rows with their shells to the data array. It suits chemistry lessons, quizzes and lab inventory forms.