var periodicTable; var subgroup; var lanthanides; var actinides; var element; var transparentBackground; var isTableHidden = false; var isLanthanidesHidden = true; var isActinidesHidden = true; var isBrightTheme = true; var isUsingCelcius = true; class Element { constructor( atomicNumber, name, symbol, electronegativity, mass, density, meltingTemperature, boilingTemperature, aggregateState, backgroundColour ) { this.mAtomicNumber = atomicNumber; this.mName = name; this.mSymbol = symbol; this.mElectronegativity = electronegativity; this.mMass = mass; this.mDensity = density; this.mMeltingTemperature = meltingTemperature; this.mBoilingTemperature = boilingTemperature; this.mAggregateState = aggregateState; this.mBackgroundColour = backgroundColour; } } const NumberOfElements = 118; const ElementTable = [ new Element( 1, "Hydrogen", "H", 2.1, 1.008, 0.000089, -259.1, -252.5, "gas", "#99ff99" ), new Element( 2, "Helium", "He", "", 4.00, 0.00018, -270, -269, "gas", "#ff0000" ), new Element( 3, "Lithium", "Li", 1.0, 6.94, 0.53, 180, 1330, "solid", "#009933" ), new Element( 4, "Beryllium", "Be", 1.5, 9.01, 1.85, 1280, 2480, "solid", "#0000ff" ), new Element( 5, "Boron", "B", 2.0, 10.81, 2.34, 2030, 3900, "solid", "#00ccff" ), new Element( 6, "Carbon", "C", 2.5, 12.01, 2.26, 3730, 4830, "solid", "#99ff99" ), new Element( 7, "Nitrogen", "N", 3.0, 14.007, 0.001251, -210, -195.8, "gas", "#99ff99" ), new Element( 8, "Oxygen", "O", 3.5, 15.999, 0.00143, -218.4, -183, "gas", "#99ff99" ), new Element( 9, "Fluorine", "F", 4.0, 18.998, 0.001695, -220, -188, "gas", "#ff6666" ), new Element( 10, "Neon", "Ne", "", 20.18, 0.000899, -249, -246, "gas", "#ff0000" ), new Element( 11, "Sodium", "Na", 0.9, 22.99, 0.97, 98, 892, "solid", "#009933" ), new Element( 12, "Magnesium", "Mg", 1.2, 24.31, 1.74, 650, 1110, "solid", "#0000ff" ), new Element( 13, "Aluminium", "Al", 1.5, 26.98, 2.7, 660, 2447, "solid", "#ffcc00" ), new Element( 14, "Silicon", "Si", 1.8, 28.09, 2.33, 1410, 2680, "solid", "#00ccff" ), new Element( 15, "Phosphorus", "P", 2.1, 30.97, 1.82, 44, 280, "solid", "#99ff99" ), new Element( 16, "Sulfur", "S", 2.5, 32.06, 1.96, 119, 445, "solid", "#99ff99" ), new Element( 17, "Chlorine", "Cl", 3.0, 35.45, 0.00321, -101, -35, "gas", "#ff6666" ), new Element( 18, "Argon", "Ar", "", 39.95, 0.001784, -189, -186, "gas", "#ff0000" ), new Element( 19, "Potassium", "K", 0.8, 39.10, 0.86, 64, 760, "solid", "#009933" ), new Element( 20, "Calcium", "Ca", 1.0, 40.08, 1.55, 838, 1490, "solid", "#0000ff" ), new Element( 21, "Scandium", "Sc", 1.3, 44.96, 3.0, 1540, 2730, "solid", "#9900cc" ), new Element( 22, "Titanium", "Ti", 1.5, 47.90, 4.5, 1670, 3260, "solid", "#9900cc" ), new Element( 23, "Vanadium", "V", 1.6, 50.94, 5.8, 1900, 3450, "solid", "#9900cc" ), new Element( 24, "Chromium", "Cr", 1.6, 51.996, 7.19, 1900, 2642, "solid", "#9900cc" ), new Element( 25, "Manganese", "Mn", 1.5, 54.94, 7.43, 1250, 2100, "solid", "#9900cc" ), new Element( 26, "Iron", "Fe", 1.8, 55.85, 7.86, 1540, 3000, "solid", "#9900cc" ), new Element( 27, "Cobalt", "Co", 1.8, 58.93, 8.90, 1490, 2900, "solid", "#9900cc" ), new Element( 28, "Nickel", "Ni", 1.8, 58.70, 8.90, 1450, 2730, "solid", "#9900cc" ), new Element( 29, "Copper", "Cu", 1.9, 63.55, 8.96, 1083, 2600, "solid", "#9900cc" ), new Element( 30, "Zinc", "Zn", 1.6, 65.38, 7.13, 419, 906, "solid", "#9900cc" ), new Element( 31, "Gallium", "Ga", 1.6, 69.72, 5.91, 30, 2400, "solid", "#ffcc00" ), new Element( 32, "Germanium", "Ge", 1.8, 72.59, 5.32, 937, 2830, "solid", "#00ccff" ), new Element( 33, "Arsenic", "As", 2.0, 74.92, 5.72, 817, 613, "solid", "#00ccff" ), new Element( 34, "Selenium", "Se", 2.4, 78.96, 4.80, 217, 685, "solid", "#99ff99" ), new Element( 35, "Bromine", "Br", 2.8, 79.90, 3.12, -7, 58, "liquid", "#ff6666" ), new Element( 36, "Krypton", "Kr", "", 83.83, 0.00374, -157, -152, "gas", "#ff0000" ), new Element( 37, "Rubidium", "Rb", 0.8, 85.47, 1.53, 39, 688, "solid", "#009933" ), new Element( 38, "Strontium", "Sr", 1.0, 87.62, 2.6, 770, 1380, "solid", "#0000ff" ), new Element( 39, "Yttrium", "Y", 1.3, 88.91, 4.5, 1500, 2930, "solid", "#9900cc" ), new Element( 40, "Zirconium", "Zr", 1.4, 91.22, 6.49, 1850, 3580, "solid", "#9900cc" ), new Element( 41, "Niobium", "Nb", 1.6, 92.91, 8.55, 2420, 4900, "solid", "#9900cc" ), new Element( 42, "Molybdenum", "Mo", 1.8, 95.94, 10.2, 2610, 5560, "solid", "#9900cc" ), new Element( 43, "Technetium", "Tc", 1.9, 97, 11.5, 2140, 4600, "solid", "#9900cc" ), new Element( 44, "Ruthenium", "Ru", 2.2, 101.07, 12.2, 2300, 3900, "solid", "#9900cc" ), new Element( 45, "Rhodium", "Rh", 2.2, 102.91, 12.4, 1970, 3730, "solid", "#9900cc" ), new Element( 46, "Palladium", "Pd", 2.2, 106.4, 12.0, 1550, 3125, "solid", "#9900cc" ), new Element( 47, "Argentum", "Ag", 1.9, 107.87, 10.5, 961, 2210, "solid", "#9900cc" ), new Element( 48, "Cadmium", "Cd", 1.7, 112.41, 8.65, 321, 765, "solid", "#9900cc" ), new Element( 49, "Indium", "In", 1.7, 114.82, 7.31, 156, 2000, "solid", "#ffcc00" ), new Element( 50, "Tin", "Sn", 1.8, 118.69, 7.29, 232, 2270, "solid", "#ffcc00" ), new Element( 51, "Antimony", "Sb", 1.9, 121.75, 6.68, 631, 1380, "solid", "#00ccff" ), new Element( 52, "Tellurium", "Te", 2.1, 127.60, 6.24, 450, 1390, "solid", "#00ccff" ), new Element( 53, "Iodine", "I", 2.5, 126.90, 4.94, 114, 183, "solid", "#ff6666" ), new Element( 54, "Xenon", "Xe", "", 131.30, 0.0058, -112, -108, "gas", "#ff0000" ), new Element( 55, "Caesium", "Cs", 0.7, 132.91, 1.87, 29, 690, "solid", "#009933" ), new Element( 56, "Barium", "Ba", 0.9, 137.33, 3.50, 714, 1640, "solid", "#0000ff" ), new Element( 57, "Lanthanum", "La", 1.1, 138.91, 6.17, 920, 3470, "solid", "#ff3399" ), new Element( 58, "Cerium", "Ce", 1.1, 140.12, 6.78, 795, 3470, "solid", "#ff3399" ), new Element( 59, "Praseodymium", "Pr", 1.1, 140.91, 6.77, 935, 3130, "solid", "#ff3399" ), new Element( 60, "Neodymium", "Nd", 1.1, 144.24, 7.00, 1020, 3030, "solid", "#ff3399" ), new Element( 61, "Promethium", "Pm", 1.1, 145, "-", 1030, 2730, "solid", "#ff3399" ), new Element( 62, "Samarium", "Sm", 1.2, 150.35, 7.54, 1070, 1900, "solid", "#ff3399" ), new Element( 63, "Europium", "Eu", 1.2, 151.96, 5.26, 826, 1440, "solid", "#ff3399" ), new Element( 64, "Gadolinium", "Gd", 1.2, 157.25, 7.89, 1310, 3000, "solid", "#ff3399" ), new Element( 65, "Terbium", "Tb", 1.2, 158.92, 8.27, 1360, 2800, "solid", "#ff3399" ), new Element( 66, "Dysprosium", "Dy", 1.2, 162.50, 8.54, 1410, 2600, "solid", "#ff3399" ), new Element( 67, "Holmium", "Ho", 1.2, 164.93, 8.80, 1460, 2600, "solid", "#ff3399" ), new Element( 68, "Erbium", "Er", 1.2, 167.26, 9.05, 1500, 2900, "solid", "#ff3399" ), new Element( 69, "Thulium", "Tm", 1.2, 168.93, 9.33, 1550, 1730, "solid", "#ff3399" ), new Element( 70, "Ytterbium", "Yb", 1.2, 173.04, 6.98, 824, 1430, "solid", "#ff3399" ), new Element( 71, "Lutetium", "Lu", 1.2, 174.97, 1.74, 650, 1110, "solid", "#ff3399" ), new Element( 72, "Hafnium", "Hf", 1.3, 178.49, 13.1, 2000, 5400, "solid", "#9900cc" ), new Element( 73, "Tantalum", "Ta", 1.5, 180.95, 16.6, 3000, 5430, "solid", "#9900cc" ), new Element( 74, "Tungsten", "W", 1.7, 183.85, 19.3, 3410, 5500, "solid", "#9900cc" ), new Element( 75, "Rhenium", "Re", 1.9, 186.21, 21.0, 3180, 5630, "solid", "#9900cc" ), new Element( 76, "Osmium", "Os", 2.2, 190.2, 22.4, 3000, 5500, "solid", "#9900cc" ), new Element( 77, "Iridium", "Ir", 2.2, 192.22, 22.5, 2450, 4500, "solid", "#9900cc" ), new Element( 78, "Platinum", "Pt", 2.2, 195.09, 21.45, 1770, 3825, "solid", "#9900cc" ), new Element( 79, "Aurum", "Au", 2.4, 196.97, 19.32, 1063, 2970, "solid", "#9900cc" ), new Element( 80, "Mercury", "Hg", 1.9, 200.59, 13.53, -38.9, 356.6, "liquid", "#9900cc" ), new Element( 81, "Thallium", "Tl", 1.8, 204.37, 11.85, 303, 1460, "solid", "#ffcc00" ), new Element( 82, "Plumbum", "Pb", 1.8, 207.2, 11.35, 327, 1740, "solid", "#ffcc00" ), new Element( 83, "Bismuth", "Bi", 1.9, 208.98, 9.8, 271, 1560, "solid", "#ffcc00" ), new Element( 84, "Polonium", "Po", 2.0, 209, 9.4, 254, 962, "solid", "#ffcc00" ), new Element( 85, "Astatine", "At", 2.2, 210, "-", 302, 335, "solid", "#ff6666" ), new Element( 86, "Radon", "Rn", "", 222, 0.00937, -71, -62, "gas", "#ff0000" ), new Element( 87, "Francium", "Fr", 0.7, 223, "-", 27, 680, "solid", "#009933" ), new Element( 88, "Radium", "Ra", 0.9, 226, 5.0, 700, 1530, "solid", "#0000ff" ), new Element( 89, "Actinium", "Ac", 1.1, 227, "-", 1050, 3200, "solid", "#cc66ff" ), new Element( 90, "Thorium", "Th", 1.3, 232.04, 11.7, 1700, 4200, "solid", "#cc66ff" ), new Element( 91, "Protactinium", "Pa", 1.5, 231.04, 15.4, 1230, "-", "solid", "#cc66ff" ), new Element( 92, "Uranium", "U", 1.4, 238.03, 18.90, 1130, 3820, "solid", "#cc66ff" ), new Element( 93, "Neptunium", "Np", 1.3, 237.05, 20.4, 640, "-", "solid", "#cc66ff" ), new Element( 94, "Plutonium", "Pu", 1.3, 244, 19.8, 640, 3230, "solid", "#cc66ff" ), new Element( 95, "Americium", "Am", 1.3, 243, 11.7, 850, 2600, "solid", "#cc66ff" ), new Element( 96, "Curium", "Cm", 1.3, 247, 7.0, 1339.85, 3109.85, "solid", "#cc66ff" ), new Element( 97, "Berkelium", "Bk", 1.3, 247, 14.79, 985.85, 709.85, "solid", "#cc66ff" ), new Element( 98, "Californium", "Cf", 1.3, 251, 15.1, 1651.85, 899.85, "solid", "#cc66ff" ), new Element( 99, "Einsteinium", "Es", 1.3, 254, 13.5, 856.85, "-", "solid", "#cc66ff" ), new Element( 100, "Fermium", "Fm", 1.3, 257, "-", 2780.85, "-", "solid", "#cc66ff" ), new Element( 101, "Mendelivium", "Md", 1.3, 258, "-", 1520.85, "-", "solid", "#cc66ff" ), new Element( 102, "Nobelium", "No", 1.3, 259, "-", 1520.85, "-", "solid", "#cc66ff" ), new Element( 103, "Lawrencium", "Lr", 1.3, 262, 9.84, 1616.85, "-", "solid", "#cc66ff" ), new Element( 104, "Rutherfordium", "Rf", "-", 263, 18.1, "-", "-", "solid", "#9900cc" ), new Element( 105, "Dubnium", "Db", "-", 262, 39, "-", "-", "solid", "#9900cc" ), new Element( 106, "Seaborgium", "Sg", "-", 266, 35, "-", "-", "solid", "#9900cc" ), new Element( 107, "Bohrium", "Bh", "-", 264, 37, "-", "-", "solid", "#9900cc" ), new Element( 108, "Hassium", "Hs", "-", 269, 41, "-", "-", "solid", "#9900cc" ), new Element( 109, "Meitnerium", "Mt", "-", 268, 35, "-", "-", "solid", "#99ff33" ), new Element( 110, "Darmstadtium", "Ds", "-", 272, 21.46, "-", "-", "solid", "#99ff33" ), new Element( 111, "Roentgenium", "Rg", "-", 272, 19.282, "-", "-", "solid", "#99ff33" ), new Element( 112, "Copernicium", "Cn", "-", 277, 13.534, "-", "-", "liquid", "#9900cc" ), new Element( 113, "Nihonium", "Uut", "-", 284, 11.85, "-", "-", "solid", "#99ff33" ), new Element( 114, "Flerovium", "Fl", "-", 289, 11.342, "-", "-", "solid", "#99ff33" ), new Element( 115, "Moscovium", "Uup", "-", 288, 9.807, "-", "-", "solid", "#99ff33" ), new Element( 116, "Livermorium", "Lv", "-", 292, 9.32, "-", "-", "solid", "#99ff33" ), new Element( 117, "Tennessine", "Uus", "-", 292, "-", "-", "-", "solid", "#99ff33" ), new Element( 118, "Oganesson", "Og", "-", 294, "-", "-", -23.15, "gas", "#ff0000" ) ]; function createCell() { var newCell = document.createElement( "div" ); newCell.setAttribute( "class", "cell" ); return newCell; } function initGroups() { /* group numbers */ for ( let i = 1; i <= 8; ++i ) { let newCell = createCell(); newCell.style.top = "50px"; newCell.style.left = ( i * 50 + ( i <= 2 ? 50 : 150 ) ) + "px"; newCell.innerHTML = i; periodicTable.appendChild( newCell ); } /* period numbers */ for ( let i = 1; i <= 7; ++i ) { let newCell = createCell(); newCell.style.top = ( i * 50 + 50 ) + "px"; newCell.style.left = "50px"; newCell.innerHTML = i; periodicTable.appendChild( newCell ); } /* empty cells in period 1 */ for ( let i = 2; i <= 7; ++i ) { let newCell = createCell(); newCell.style.top = "100px"; newCell.style.left = ( i * 50 + ( i <= 2 ? 50 : 150 ) ) + "px"; periodicTable.appendChild( newCell ); } /* period 2 - 3 */ for ( let i = 0; i < 2; ++i ) { for ( let j = 1; j <= 8; ++j ) { let newCell = createCell(); newCell.style.top = ( i * 50 + 150 ) + "px"; newCell.style.left = ( j * 50 + ( j <= 2 ? 50 : 150 ) ) + "px"; newCell.setAttribute( "id", ( i ? 10 : 2 ) + j ); periodicTable.appendChild( newCell ); } } /* period 4 - 6 */ for ( let i = 1; i < 4; ++i ) { for (let j = 1; j <= 8; ++j ) { let newCell = createCell(); newCell.style.top = ( i * 50 + 200 ) + "px"; newCell.style.left = ( j * 50 + ( j <= 2 ? 50 : 150 ) ) + "px"; newCell.setAttribute( "id", ( i * 18 ) + ( j > 2 ? ( i < 3 ? 10 : 24 ) : 0 ) + j ); periodicTable.appendChild( newCell ); } } /* period 7 */ for ( let i = 3; i <= 8; ++i ) { let newCell = createCell(); newCell.style.top = "400px"; newCell.style.left = ( i * 50 + 150 ) + "px"; newCell.setAttribute( "id", 110 + i ); periodicTable.appendChild( newCell ); } } function initSubgroups() { for ( let i = 0; i < 5; ++i ) { let newCell = createCell(); newCell.style.top = "50px"; newCell.style.left = ( i * 50 ) + "px"; newCell.innerHTML = i + 3; subgroup.appendChild( newCell ); } for ( let i = 0; i < 3; ++i ) { for ( let j = 1; j < 10; ++j ) { let newCell = createCell(); newCell.style.top = ( i * 50 + 100 ) + "px"; newCell.style.left = ( j * 50 ) + "px"; newCell.setAttribute( "id", ( i < 1 ? 21 : ( i > 1 ? 71 : 39 ) ) + j ); subgroup.appendChild( newCell ); } } for ( let i = 1; i < 10; ++i ) { let newCell = createCell(); newCell.style.top = "250px"; newCell.style.left = ( i * 50 ) + "px"; newCell.setAttribute( "id", 103 + i ); subgroup.appendChild( newCell ); } } function initLanthanoids() { for ( let i = 1; i <= 15; ++i ) { let newCell = createCell(); newCell.setAttribute( "id", 56 + i ); newCell.style.left = ( i * 50 + 50 ) + "px"; lanthanides.appendChild( newCell ); } } function initActanoids() { for ( let i = 1; i <= 15; ++i ) { let newCell = createCell(); newCell.setAttribute( "id", 88 + i ); newCell.style.left = ( i * 50 + 50 ) + "px"; actinides.appendChild( newCell ); } } function initCells() { for ( let i = 0; i < NumberOfElements; ++i ) { let currentCell = document.getElementById( i + 1 ); currentCell.style.backgroundColor = ElementTable[ i ].mBackgroundColour; currentCell.style.cursor = "help"; currentCell.innerHTML = "" + ElementTable[ i ].mSymbol + "^{" + ( i + 1 ) + "}"; currentCell.addEventListener ( "click", function() { showElement( this ); } ); } } function showMenu() { document.getElementById( "menu" ).style.left = "0"; document.getElementById( "menu_bar" ).style.left = "200px"; } function hideMenu() { document.getElementById( "menu" ).style.left = "-200px"; document.getElementById( "menu_bar" ).style.left = "0"; } function toggleTheme() { if ( isBrightTheme ) { document.getElementById( "theme" ).style.backgroundColor = "#000000"; document.body.style.backgroundColor = "#29293d"; isBrightTheme = false; } else { document.getElementById( "theme" ).style.backgroundColor = "#ffffff"; document.body.style.backgroundColor = "#ffffff"; isBrightTheme = true; } } function toggleTemperature() { isUsingCelcius = !isUsingCelcius; document.getElementById( "temperature" ).innerHTML = ( isUsingCelcius ? "C" : "K" ); } function togglePeriodicTable() { if ( isTableHidden ) { subgroup.style.display = "none"; periodicTable.style.display = "block"; isTableHidden = false; } else { subgroup.style.display = "block"; periodicTable.style.display = "none"; isTableHidden = true; } } function toggleLanthanides() { if ( isLanthanidesHidden ) { lanthanides.style.display = "block"; isLanthanidesHidden = false; } else { lanthanides.style.display = "none"; isLanthanidesHidden = true; } } function toggleActinides() { if ( isActinidesHidden ) { actinides.style.display = "block"; isActinidesHidden = false; } else { actinides.style.display = "none"; isActinidesHidden = true; } } function showElement( cell ) { let currentElement = ElementTable[ cell.getAttribute( "id" ) - 1 ]; if ( isUsingCelcius ) { element.innerHTML = "

" + currentElement.mName + "

" + "

Symbol: " + currentElement.mSymbol + "

" + "

Atomic Number: " + currentElement.mAtomicNumber + "

" + "

Electronegativity: " + currentElement.mElectronegativity + "

" + "

Mass [u]: " + currentElement.mMass + "

" + "

Density [g * cm^-3]: " + currentElement.mDensity + "

" + "

Melting Temperature [C]: " + currentElement.mMeltingTemperature + "

" + "

Boiling Temperature [C]: " + currentElement.mBoilingTemperature + "

" + "

Aggregate State: " + currentElement.mAggregateState + "

"; } else { let meltingPoint = parseFloat( currentElement.mMeltingTemperature ); let boilingPoint = parseFloat( currentElement.mBoilingTemperature ); if ( !isNaN( meltingPoint ) ) { meltingPoint = Number( meltingPoint + 273.15 ).to } else { meltingPoint = "-"; } if ( !isNaN( boilingPoint ) ) { boilingPoint = Number( boilingPoint + 273.15 ).toPrecision(4); } else { boilingPoint = "-"; } element.innerHTML = "

" + currentElement.mName + "

" + "

Symbol: " + currentElement.mSymbol + "

" + "

Atomic Number: " + currentElement.mAtomicNumber + "

" + "

Electronegativity: " + currentElement.mElectronegativity + "

" + "

Mass [u]: " + currentElement.mMass + "

" + "

Density [g * cm^-3]: " + currentElement.mDensity + "

" + "

Melting Temperature [K]: " + meltingPoint + "

" + "

Boiling Temperature [K]: " + boilingPoint + "

" + "

Aggregate State: " + currentElement.mAggregateState + "

"; } transparentBackground.style.display = "block"; element.style.display = "flex"; } function hideElement() { transparentBackground.style.display = "none"; element.style.display = "none"; } window.onload = function() { periodicTable = document.getElementById( "periodic_table" ); subgroup = document.getElementById( "subgroup" ); lanthanides = document.getElementById( "lanthanides" ); actinides = document.getElementById( "actinides" ); element = document.getElementById( "element" ); transparentBackground = document.getElementById( "transparent_background" ); initGroups(); initSubgroups(); initLanthanoids(); initActanoids(); initCells(); alert ( "My main subject in the A-levels was chemistry, so I guess this is kind of a goodbye to it for now? Well, this was a nice small code I had fun working on. Hope I do not have any grave typos in the data though.\n\nAll elements can be clicked for more detailed information, and you can use the Subgroup button to see even more.\n\nAnd if you want to memorize this for some reason (hello nerds ^^), check out the song link in the menu!" ); }

Interactive Periodic Table