|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Aufbau</title> |
|
<style type="text/css"> |
|
body { |
|
background: white; |
|
color: black; |
|
} |
|
body, input { |
|
font: normal normal normal 16px Arial, sans-serif; |
|
} |
|
#e { |
|
width: 150px; |
|
height: 150px; |
|
border: solid 2px; |
|
background: white; |
|
position: relative; |
|
} |
|
#n { |
|
font-size: 40px; |
|
width: 80px; |
|
} |
|
#o { |
|
position: absolute; |
|
top: 3px; |
|
right: 3px; |
|
font-size: 20px; |
|
text-align: center; |
|
} |
|
#a { |
|
font-size: 8px; |
|
} |
|
#a { |
|
font-size: 12px; |
|
} |
|
#e.t1 {background: rgb(255, 102, 102)} |
|
#e.t2 {background: rgb(255, 222, 173)} |
|
#e.t3 {background: rgb(255, 191, 255)} |
|
#e.t4 {background: rgb(255, 153, 204)} |
|
#e.t5 {background: rgb(255, 192, 192)} |
|
#e.t6 {background: rgb(204, 204, 204)} |
|
#e.t7 {background: rgb(204, 204, 153)} |
|
#e.t8 {background: rgb(160, 255, 160)} |
|
#e.t9 {background: rgb(255, 255, 153)} |
|
#e.t10 {background: rgb(192, 255, 255)} |
|
</style> |
|
</head> |
|
<body> |
|
<div>Expected value: <b>1s2 2s2 2p6 3s2 3p6 4s2 3d10 4p6 5s2 4d10 5p6 6s2 4f14 5d10 6p6 7s2 5f14 6d7</b></div> |
|
<div>Actual value: <b id="ret"></b></div> |
|
<script type="text/javascript"> |
|
// write a small example that shows off the API for your example |
|
// and tests it in one fell swoop. |
|
|
|
var aufbau = function(a){for(var b="",c=0,d,e;a;)for(d=++c>>1;d--&&a;b+=c+~d+"spdfghijk".charAt(d)+e)a-=e=Math.min(d*4+2,a),b+=b&&" ";return b} |
|
|
|
document.getElementById( "ret" ).innerHTML = aufbau(109) // Mt |
|
</script> |
|
<h2>Demo</h2> |
|
<p>Type the element name and I'll try to guess its group</p> |
|
<div id="e"> |
|
<input type="text" id="n" maxlength="3" value="Mt" /> |
|
<span id="o"></span> |
|
<div id="c"></div> |
|
<div id="a"></div> |
|
</div> |
|
<script type="text/javascript"> |
|
|
|
function getElementByName(name){ |
|
return -~"H-He-Li-Be-B-C-N-O-F-Ne-Na-Mg-Al-Si-P-S-Cl-Ar-K-Ca-Sc-Ti-V-Cr-Mn-Fe-Co-Ni-Cu-Zn-Ga-Ge-As-Se-Br-Kr-Rb-Sr-Y-Zr-Nb-Mo-Tc-Ru-Rh-Pd-Ag-Cd-In-Sn-Sb-Te-I-Xe-Cs-Ba-La-Ce-Pr-Nd-Pm-Sm-Eu-Gd-Tb-Dy-Ho-Er-Tm-Yb-Lu-Hf-Ta-W-Re-Os-Ir-Pt-Au-Hg-Tl-Pb-Bi-Po-At-Rn-Fr-Ra-Ac-Th-Pa-U-Np-Pu-Am-Cm-Bk-Cf-Es-Fm-Md-No-Lr-Rf-Db-Sg-Bh-Hs-Mt-Ds-Rg-Cn-Uut-Uuq-Uup-Uuh-Uus-Uuo".toUpperCase().split("-").indexOf(name.toUpperCase())||null |
|
} |
|
|
|
function showInfo(ord){ |
|
document.getElementById('o').innerHTML = ord||'???'; |
|
var orbital = ord&&aufbau(ord); |
|
var type = 0; |
|
var match = null; |
|
document.getElementById('a').innerHTML = orbital||'???'; |
|
|
|
if (/1s1$/.test(orbital)){ // H |
|
type = 8; |
|
} else if (/1s2$/.test(orbital)) { // He |
|
type = 10; |
|
} else if (/4f\d+$/.test(orbital)) { |
|
type = 3; |
|
} else if (/5f\d+$/.test(orbital)) { |
|
type = 4; |
|
} else if (/s1$/.test(orbital)){ |
|
type = 1; |
|
} else if (/s2$/.test(orbital)){ |
|
type = 2; |
|
} else if (/d\d+$/.test(orbital)){ |
|
type = 5; |
|
} else if (/p5$/.test(orbital)){ |
|
type = 9; |
|
} else if (/p6$/.test(orbital)) { |
|
type = 10; |
|
} else if (/3p1$/.test(orbital)) { // Al |
|
type = 6; |
|
} else if (match = /(\d+)p(\d+)$/.exec(orbital)){ |
|
if (match[1] > +match[2] + 2) { |
|
type = 6; |
|
} else if (match[1] <= match[2]){ |
|
type = 8; |
|
} else { |
|
type = 7; |
|
} |
|
} |
|
document.getElementById('c').innerHTML = ['???','Alkali metal', 'Alkaline earth metal', 'Lantanide', 'Actinide', 'Transition metal', 'Post-transition metal', 'Metalloid', 'Non-metal', 'Halogen', 'Noble gas'][type]; |
|
document.getElementById('e').className = 't' + type; |
|
} |
|
document.getElementById('e').addEventListener('keypress', function(e){ |
|
var trigger = e.srcElement||e.target; |
|
setTimeout(function(){ |
|
showInfo(getElementByName(trigger.value)); |
|
}, 0); |
|
}, true) |
|
|
|
showInfo(getElementByName(document.getElementById("n").value)); |
|
document.getElementById("n").select(); |
|
</script> |
|
</body> |
|
</html> |
Save 2 bytes.
Sadly, I don't know much about chemistry.