Copy <! DOCTYPE html >
< html lang = " en " >
< head >
< meta charset = " UTF-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title >Periodic Table</ title >
< style >
body {
font - family: Arial , sans - serif;
background - color: #f0f0f0;
display: flex;
justify - content: center;
align - items: center;
height: 100vh;
margin: 0 ;
}
#periodic-table {
display: grid;
grid - template - columns: repeat ( auto - fill , minmax ( 150px , 1fr )) ;
gap: 10px;
padding: 20px;
background - color: white;
border - radius: 10px;
box - shadow: 0 0 10px rgba ( 0 , 0 , 0 , 0.1 ) ;
max - width: 1200px;
width: 100 % ;
}
.element-card {
border: 1px solid #ccc;
border - radius: 5px;
padding: 10px;
background - color: #e8f0fe;
text - align: center;
transition: transform 0 . 2s;
}
.element-card:hover {
transform: scale ( 1.05 ) ;
}
h3 {
margin: 0 ;
font - size: 1 . 2em;
}
p {
margin: 5px 0 ;
font - size: 0 . 9em;
}
</ style >
</ head >
< body >
< div id = " periodic-table " ></ div >
< script >
const elements = [
{ number: 1 , name: " Hydrogen " , symbol: " H " , mass: 1.008 , category: " Nonmetals " , description: " Essential for life. ๐ง " , emoji: " ๐ง " },
{ number: 2 , name: " Helium " , symbol: " He " , mass: 4.0026 , category: " Noble gases " , description: " Used in balloons. ๐ " , emoji: " ๐ " },
{ number: 3 , name: " Lithium " , symbol: " Li " , mass: 6.94 , category: " Alkali metals " , description: " Used in batteries. ๐ " , emoji: " ๐ " },
{ number: 4 , name: " Beryllium " , symbol: " Be " , mass: 9.0122 , category: " Alkaline earth metals " , description: " Used in aerospace. โ๏ธ " , emoji: " โ๏ธ " },
{ number: 5 , name: " Boron " , symbol: " B " , mass: 10.81 , category: " Metalloids " , description: " Used in glass and ceramics. ๐ถ " , emoji: " ๐ถ " },
{ number: 6 , name: " Carbon " , symbol: " C " , mass: 12.011 , category: " Nonmetals " , description: " Found in all life. ๐ฑ " , emoji: " ๐ฑ " },
{ number: 7 , name: " Nitrogen " , symbol: " N " , mass: 14.007 , category: " Nonmetals " , description: " Makes up 78% of the atmosphere. ๐ฌ๏ธ " , emoji: " ๐ฌ๏ธ " },
{ number: 8 , name: " Oxygen " , symbol: " O " , mass: 15.999 , category: " Nonmetals " , description: " Essential for respiration. ๐ " , emoji: " ๐ " },
{ number: 9 , name: " Fluorine " , symbol: " F " , mass: 18.998 , category: " Halogens " , description: " Used in toothpaste. ๐ฆท " , emoji: " ๐ฆท " },
{ number: 10 , name: " Neon " , symbol: " Ne " , mass: 20.180 , category: " Noble gases " , description: " Used in neon signs. ๐ก " , emoji: " ๐ก " },
{ number: 11 , name: " Sodium " , symbol: " Na " , mass: 22.990 , category: " Alkali metals " , description: " Essential for nerves. ๐ง " , emoji: " ๐ง " },
{ number: 12 , name: " Magnesium " , symbol: " Mg " , mass: 24.305 , category: " Alkaline earth metals " , description: " Used in fireworks. ๐ " , emoji: " ๐ " },
{ number: 13 , name: " Aluminum " , symbol: " Al " , mass: 26.982 , category: " Post-transition metals " , description: " Used in cans and foil. ๐ฅซ " , emoji: " ๐ฅซ " },
{ number: 14 , name: " Silicon " , symbol: " Si " , mass: 28.085 , category: " Metalloids " , description: " Used in electronics. ๐ป " , emoji: " ๐ป " },
{ number: 15 , name: " Phosphorus " , symbol: " P " , mass: 30.974 , category: " Nonmetals " , description: " Essential for DNA. ๐งฌ " , emoji: " ๐งฌ " },
{ number: 16 , name: " Sulfur " , symbol: " S " , mass: 32.06 , category: " Nonmetals " , description: " Used in gunpowder. ๐ฃ " , emoji: " ๐ฃ " },
{ number: 17 , name: " Chlorine " , symbol: " Cl " , mass: 35.45 , category: " Halogens " , description: " Used in disinfectants. ๐งด " , emoji: " ๐งด " },
{ number: 18 , name: " Argon " , symbol: " Ar " , mass: 39.948 , category: " Noble gases " , description: " Used in welding. ๐ฅ " , emoji: " ๐ฅ " },
{ number: 19 , name: " Potassium " , symbol: " K " , mass: 39.098 , category: " Alkali metals " , description: " Essential for plants. ๐ฟ " , emoji: " ๐ฟ " },
{ number: 20 , name: " Calcium " , symbol: " Ca " , mass: 40.078 , category: " Alkaline earth metals " , description: " Essential for bones. ๐ฆด " , emoji: " ๐ฆด " },
{ number: 21 , name: " Scandium " , symbol: " Sc " , mass: 44.956 , category: " Transition metals " , description: " Used in aerospace. โ๏ธ " , emoji: " โ๏ธ " },
{ number: 22 , name: " Titanium " , symbol: " Ti " , mass: 47.867 , category: " Transition metals " , description: " Strong and lightweight. โ๏ธ " , emoji: " โ๏ธ " },
{ number: 23 , name: " Vanadium " , symbol: " V " , mass: 50.941 , category: " Transition metals " , description: " Used in alloys. ๐ " , emoji: " ๐ " },
{ number: 24 , name: " Chromium " , symbol: " Cr " , mass: 51.996 , category: " Transition metals " , description: " Used in stainless steel. โ๏ธ " , emoji: " โ๏ธ " },
{ number: 25 , name: " Manganese " , symbol: " Mn " , mass: 54.938 , category: " Transition metals " , description: " Used in batteries. ๐ " , emoji: " ๐ " },
{ number: 26 , name: " Iron " , symbol: " Fe " , mass: 55.845 , category: " Transition metals " , description: " Essential for blood. โค๏ธ " , emoji: " โค๏ธ " },
{ number: 27 , name: " Cobalt " , symbol: " Co " , mass: 58.933 , category: " Transition metals " , description: " Used in blue pigments. ๐จ " , emoji: " ๐จ " },
{ number: 28 , name: " Nickel " , symbol: " Ni " , mass: 58.693 , category: " Transition metals " , description: " Used in coins. ๐ฐ " , emoji: " ๐ฐ " },
{ number: 29 , name: " Copper " , symbol: " Cu " , mass: 63.546 , category: " Transition metals " , description: " Used in wiring. ๐ " , emoji: " ๐ " },
{ number: 30 , name: " Zinc " , symbol: " Zn " , mass: 65.38 , category: " Transition metals " , description: " Used in galvanizing. ๐ก๏ธ " , emoji: " ๐ก๏ธ " },
{ number: 31 , name: " Gallium " , symbol: " Ga " , mass: 69.723 , category: " Post-transition metals " , description: " Used in LEDs. ๐ก " , emoji: " ๐ก " },
{ number: 32 , name: " Germanium " , symbol: " Ge " , mass: 72.630 , category: " Metalloids " , description: " Used in semiconductors. ๐ป " , emoji: " ๐ป " },
{ number: 33 , name: " Arsenic " , symbol: " As " , mass: 74.921 , category: " Metalloids " , description: " Used in pesticides. ๐พ " , emoji: " ๐พ " },
{ number: 34 , name: " Selenium " , symbol: " Se " , mass: 78.971 , category: " Nonmetals " , description: " Used in photocopiers. ๐จ๏ธ " , emoji: " ๐จ๏ธ " },
{ number: 35 , name: " Bromine " , symbol: " Br " , mass: 79.904 , category: " Halogens " , description: " Used in flame retardants. ๐ฅ " , emoji: " ๐ฅ " },
{ number: 36 , name: " Krypton " , symbol: " Kr " , mass: 83.798 , category: " Noble gases " , description: " Used in high-speed photography. ๐ธ " , emoji: " ๐ธ " },
{ number: 37 , name: " Rubidium " , symbol: " Rb " , mass: 85.468 , category: " Alkali metals " , description: " Used in atomic clocks. โฐ " , emoji: " โฐ " },
{ number: 38 , name: " Strontium " , symbol: " Sr " , mass: 87.62 , category: " Alkaline earth metals " , description: " Used in fireworks. ๐ " , emoji: " ๐ " },
{ number: 39 , name: " Yttrium " , symbol: " Y " , mass: 88.906 , category: " Transition metals " , description: " Used in phosphors. ๐ก " , emoji: " ๐ก " },
{ number: 40 , name: " Zirconium " , symbol: " Zr " , mass: 91.224 , category: " Transition metals " , description: " Used in nuclear reactors. โข๏ธ " , emoji: " โข๏ธ " },
{ number: 41 , name: " Niobium " , symbol: " Nb " , mass: 92.906 , category: " Transition metals " , description: " Used in superconductors. โ๏ธ " , emoji: " โ๏ธ " },
{ number: 42 , name: " Molybdenum " , symbol: " Mo " , mass: 95.95 , category: " Transition metals " , description: " Used in steel production. ๐๏ธ " , emoji: " ๐๏ธ " },
{ number: 43 , name: " Technetium " , symbol: " Tc " , mass: 98 , category: " Transition metals " , description: " Used in medical imaging. ๐ฅ " , emoji: " ๐ฅ " },
{ number: 44 , name: " Ruthenium " , symbol: " Ru " , mass: 101.07 , category: " Transition metals " , description: " Used in electronics. โก " , emoji: " โก " },
{ number: 45 , name: " Rhodium " , symbol: " Rh " , mass: 102.91 , category: " Transition metals " , description: " Used in catalytic converters. ๐ " , emoji: " ๐ " },
{ number: 46 , name: " Palladium " , symbol: " Pd " , mass: 106.42 , category: " Transition metals " , description: " Used in jewelry. ๐ " , emoji: " ๐ " },
{ number: 47 , name: " Silver " , symbol: " Ag " , mass: 107.87 , category: " Transition metals " , description: " Used in cutlery. ๐ด " , emoji: " ๐ด " },
{ number: 48 , name: " Cadmium " , symbol: " Cd " , mass: 112.41 , category: " Transition metals " , description: " Used in batteries. ๐ " , emoji: " ๐ " },
{ number: 49 , name: " Indium " , symbol: " In " , mass: 114.82 , category: " Post-transition metals " , description: " Used in LCD screens. ๐บ " , emoji: " ๐บ " },
{ number: 50 , name: " Tin " , symbol: " Sn " , mass: 118.71 , category: " Post-transition metals " , description: " Used in soldering. ๐ง " , emoji: " ๐ง " },
{ number: 51 , name: " Antimony " , symbol: " Sb " , mass: 121.76 , category: " Metalloids " , description: " Used in flame retardants. ๐ฅ " , emoji: " ๐ฅ " },
{ number: 52 , name: " Tellurium " , symbol: " Te " , mass: 127.60 , category: " Metalloids " , description: " Used in alloys. โ๏ธ " , emoji: " โ๏ธ " },
{ number: 53 , name: " Iodine " , symbol: " I " , mass: 126.90 , category: " Halogens " , description: " Essential for thyroid function. ๐ฉบ " , emoji: " ๐ฉบ " },
{ number: 54 , name: " Xenon " , symbol: " Xe " , mass: 131.29 , category: " Noble gases " , description: " Used in high-intensity lamps. ๐ก " , emoji: " ๐ก " },
{ number: 55 , name: " Cesium " , symbol: " Cs " , mass: 132.91 , category: " Alkali metals " , description: " Used in atomic clocks. โฐ " , emoji: " โฐ " },
{ number: 56 , name: " Barium " , symbol: " Ba " , mass: 137.33 , category: " Alkaline earth metals " , description: " Used in X-ray imaging. ๐ฅ " , emoji: " ๐ฅ " },
{ number: 57 , name: " Lanthanum " , symbol: " La " , mass: 138.91 , category: " Lanthanides " , description: " Used in camera lenses. ๐ท " , emoji: " ๐ท " },
{ number: 58 , name: " Cerium " , symbol: " Ce " , mass: 140.12 , category: " Lanthanides " , description: " Used in catalysts. โ๏ธ " , emoji: " โ๏ธ " },
{ number: 59 , name: " Praseodymium " , symbol: " Pr " , mass: 140.91 , category: " Lanthanides " , description: " Used in glass and ceramics. ๐ถ " , emoji: " ๐ถ " },
{ number: 60 , name: " Neodymium " , symbol: " Nd " , mass: 144.24 , category: " Lanthanides " , description: " Used in powerful magnets. ๐งฒ " , emoji: " ๐งฒ " },
{ number: 61 , name: " Promethium " , symbol: " Pm " , mass: 145 , category: " Lanthanides " , description: " Used in luminous paints. โจ " , emoji: " โจ " },
{ number: 62 , name: " Samarium " , symbol: " Sm " , mass: 150.36 , category: " Lanthanides " , description: " Used in magnets. ๐งฒ " , emoji: " ๐งฒ " },
{ number: 63 , name: " Europium " , symbol: " Eu " , mass: 151.96 , category: " Lanthanides " , description: " Used in phosphors. ๐ก " , emoji: " ๐ก " },
{ number: 64 , name: " Gadolinium " , symbol: " Gd " , mass: 157.25 , category: " Lanthanides " , description: " Used in MRI contrast agents. ๐ฅ " , emoji: " ๐ฅ " },
{ number: 65 , name: " Terbium " , symbol: " Tb " , mass: 158.93 , category: " Lanthanides " , description: " Used in green phosphors. ๐ข " , emoji: " ๐ข " },
{ number: 66 , name: " Dysprosium " , symbol: " Dy " , mass: 162.50 , category: " Lanthanides " , description: " Used in magnets. ๐งฒ " , emoji: " ๐งฒ " },
{ number: 67 , name: " Holmium " , symbol: " Ho " , mass: 164.93 , category: " Lanthanides " , description: " Used in lasers. ๐ฆ " , emoji: " ๐ฆ " },
{ number: 68 , name: " Erbium " , symbol: " Er " , mass: 167.26 , category: " Lanthanides " , description: " Used in fiber optics. ๐ " , emoji: " ๐ " },
{ number: 69 , name: " Thulium " , symbol: " Tm " , mass: 168.93 , category: " Lanthanides " , description: " Used in lasers. ๐ฆ " , emoji: " ๐ฆ " },
{ number: 70 , name: " Ytterbium " , symbol: " Yb " , mass: 173.04 , category: " Lanthanides " , description: " Used in lasers. ๐ฆ " , emoji: " ๐ฆ " },
{ number: 71 , name: " Lutetium " , symbol: " Lu " , mass: 174.97 , category: " Lanthanides " , description: " Used in catalysts. โ๏ธ " , emoji: " โ๏ธ " },
{ number: 72 , name: " Hafnium " , symbol: " Hf " , mass: 178.49 , category: " Transition metals " , description: " Used in nuclear reactors. โข๏ธ " , emoji: " โข๏ธ " },
{ number: 73 , name: " Tantalum " , symbol: " Ta " , mass: 180.95 , category: " Transition metals " , description: " Used in electronics. โก " , emoji: " โก " },
{ number: 74 , name: " Tungsten " , symbol: " W " , mass: 183.84 , category: " Transition metals " , description: " Used in light bulb filaments. ๐ก " , emoji: " ๐ก " },
{ number: 75 , name: " Rhenium " , symbol: " Re " , mass: 186.21 , category: " Transition metals " , description: " Used in jet engines. โ๏ธ " , emoji: " โ๏ธ " },
{ number: 76 , name: " Osmium " , symbol: " Os " , mass: 190.23 , category: " Transition metals " , description: " Used in fountain pen tips. ๐๏ธ " , emoji: " ๐๏ธ " },
{ number: 77 , name: " Iridium " , symbol: " Ir " , mass: 192.22 , category: " Transition metals " , description: " Used in spark plugs. ๐ " , emoji: " ๐ " },
{ number: 78 , name: " Platinum " , symbol: " Pt " , mass: 195.08 , category: " Transition metals " , description: " Used in jewelry. ๐ " , emoji: " ๐ " },
{ number: 79 , name: " Gold " , symbol: " Au " , mass: 196.97 , category: " Transition metals " , description: " Used in coins. ๐ฐ " , emoji: " ๐ฐ " },
{ number: 80 , name: " Mercury " , symbol: " Hg " , mass: 200.59 , category: " Transition metals " , description: " Used in thermometers. ๐ก๏ธ " , emoji: " ๐ก๏ธ " },
{ number: 81 , name: " Thallium " , symbol: " Tl " , mass: 204.38 , category: " Post-transition metals " , description: " Used in electronics. โก " , emoji: " โก " },
{ number: 82 , name: " Lead " , symbol: " Pb " , mass: 207.2 , category: " Post-transition metals " , description: " Used in batteries. ๐ " , emoji: " ๐ " },
{ number: 83 , name: " Bismuth " , symbol: " Bi " , mass: 208.98 , category: " Post-transition metals " , description: " Used in cosmetics. ๐ " , emoji: " ๐ " },
{ number: 84 , name: " Polonium " , symbol: " Po " , mass: 209 , category: " Metalloids " , description: " Used in nuclear devices. โข๏ธ " , emoji: " โข๏ธ " },
{ number: 85 , name: " Astatine " , symbol: " At " , mass: 210 , category: " Halogens " , description: " Radioactive element. โข๏ธ " , emoji: " โข๏ธ " },
{ number: 86 , name: " Radon " , symbol: " Rn " , mass: 222 , category: " Noble gases " , description: " Radioactive gas. โข๏ธ " , emoji: " โข๏ธ " },
{ number: 87 , name: " Francium " , symbol: " Fr " , mass: 223 , category: " Alkali metals " , description: " Highly radioactive. โข๏ธ " , emoji: " โข๏ธ " },
{ number: 88 , name: " Radium " , symbol: " Ra " , mass: 226 , category: " Alkaline earth metals " , description: " Used in cancer treatment. ๐ " , emoji: " ๐ " },
{ number: 89 , name: " Actinium " , symbol: " Ac " , mass: 227 , category: " Actinides " , description: " Used in radiation therapy. ๐ " , emoji: " ๐ " },
{ number: 90 , name: " Thorium " , symbol: " Th " , mass: 232.04 , category: " Actinides " , description: " Used in nuclear reactors. โข๏ธ " , emoji: " โข๏ธ " },
{ number: 91 , name: " Protactinium " , symbol: " Pa " , mass: 231.04 , category: " Actinides " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 92 , name: " Uranium " , symbol: " U " , mass: 238.03 , category: " Actinides " , description: " Used in nuclear power. โก " , emoji: " โก " },
{ number: 93 , name: " Neptunium " , symbol: " Np " , mass: 237 , category: " Actinides " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 94 , name: " Plutonium " , symbol: " Pu " , mass: 244 , category: " Actinides " , description: " Used in nuclear weapons. ๐ฃ " , emoji: " ๐ฃ " },
{ number: 95 , name: " Americium " , symbol: " Am " , mass: 243 , category: " Actinides " , description: " Used in smoke detectors. ๐ฅ " , emoji: " ๐ฅ " },
{ number: 96 , name: " Curium " , symbol: " Cm " , mass: 247 , category: " Actinides " , description: " Used in nuclear reactors. โข๏ธ " , emoji: " โข๏ธ " },
{ number: 97 , name: " Berkelium " , symbol: " Bk " , mass: 247 , category: " Actinides " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 98 , name: " Californium " , symbol: " Cf " , mass: 251 , category: " Actinides " , description: " Used in neutron sources. โ๏ธ " , emoji: " โ๏ธ " },
{ number: 99 , name: " Einsteinium " , symbol: " Es " , mass: 252 , category: " Actinides " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 100 , name: " Fermium " , symbol: " Fm " , mass: 257 , category: " Actinides " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 101 , name: " Mendelevium " , symbol: " Md " , mass: 258 , category: " Actinides " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 102 , name: " Nobelium " , symbol: " No " , mass: 259 , category: " Actinides " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 103 , name: " Lawrencium " , symbol: " Lr " , mass: 262 , category: " Actinides " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 104 , name: " Rutherfordium " , symbol: " Rf " , mass: 267 , category: " Transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 105 , name: " Dubnium " , symbol: " Db " , mass: 268 , category: " Transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 106 , name: " Seaborgium " , symbol: " Sg " , mass: 271 , category: " Transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 107 , name: " Bohrium " , symbol: " Bh " , mass: 270 , category: " Transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 108 , name: " Hassium " , symbol: " Hs " , mass: 277 , category: " Transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 109 , name: " Meitnerium " , symbol: " Mt " , mass: 278 , category: " Transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 110 , name: " Darmstadtium " , symbol: " Ds " , mass: 281 , category: " Transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 111 , name: " Roentgenium " , symbol: " Rg " , mass: 282 , category: " Transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 112 , name: " Copernicium " , symbol: " Cn " , mass: 285 , category: " Transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 113 , name: " Nihonium " , symbol: " Nh " , mass: 286 , category: " Post-transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 114 , name: " Flerovium " , symbol: " Fl " , mass: 289 , category: " Post-transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 115 , name: " Moscovium " , symbol: " Mc " , mass: 288 , category: " Post-transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 116 , name: " Livermorium " , symbol: " Lv " , mass: 293 , category: " Post-transition metals " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 117 , name: " Tennessine " , symbol: " Ts " , mass: 294 , category: " Halogens " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
{ number: 118 , name: " Oganesson " , symbol: " Og " , mass: 294 , category: " Noble gases " , description: " Used in research. ๐ฌ " , emoji: " ๐ฌ " },
];
const container = document.getElementById("periodic-table");
elements.forEach((element) => {
const card = document . createElement ( " div " ) ;
card . className = " element-card " ;
card . innerHTML = `
<div class="element-number"> ${ element . number } </div>
<div class="element-symbol"> ${ element . symbol } </div>
<div class="element-name"> ${ element . name } </div>
<div class="element-mass"> ${ element . mass } </div>
<div class="element-category"> ${ element . category } </div>
<div class="element-description"> ${ element . description } ${ element . emoji } </div>
` ;
container . appendChild ( card ) ;
});
</ script >
</ body >
</ html >
JavaScript