HTML CSS AND JAVASCRIPT CODE FOR PERIODIC TABLE

Posted on by admin
<!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

Leave a Reply

Your email address will not be published. Required fields are marked *


error: Content is protected !!
Scroll to Top
MacroNepal
Verified by MonsterInsights