Prueba con Fe, oxígeno o 11
Elemento químico con modelo de Bohr
Escribe un símbolo, un nombre o un número atómico y aparece su casilla de la tabla periódica con los electrones girando en capas.
Ajustes
Código
<div class="uvq06-pe"><label for="uvq06-pe-in" class="lb">Elemento químico</label><div class="fd"><button type="button" class="nv" data-s="-1" aria-label="Elemento anterior">‹</button><input id="uvq06-pe-in" autocomplete="off" spellcheck="false" placeholder="Símbolo, nombre o número" aria-describedby="uvq06-pe-h"><button type="button" class="nv" data-s="1" aria-label="Elemento siguiente">›</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">Prueba con Fe, oxígeno o 11</p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Inputs
Ver todos: InputsDónde usarlo
Un buscador de elementos químicos que responde con una casilla de la tabla periódica y un modelo de Bohr en SVG en línea. Acepta símbolos, nombres sin tildes o números atómicos, y las flechas o los botones laterales recorren la tabla. La casilla toma el color de la familia del elemento y cada capa de electrones gira a su ritmo y en su sentido.
El color principal es el núcleo y el secundario los electrones. La tabla de la demo cubre los veinte primeros elementos más hierro, cobre, cinc, plata y oro; añade más filas con sus capas al array de datos. Encaja en clases de química, juegos de preguntas y formularios de inventario de laboratorio.