Periodic Table of Elements

index.pug

- var categories = ['alkali-metals', 'alkaline-earth-metals', 'lanthanides', 'actinoids', 'transition-metals', 'post-transition-metals', 'metalloids', 'other-nonmetals', 'noble-gasses', 'unknown'];

a.skip-nav-link(href="javascript:scrollToDiv(\"#Periodic-Table\", true)")
  | skip navigation

button.collapsible Element Search
.search
  .panel
    .search-wrapper
      label.header-search(for="search") Search Elements:
      .float-container
        .float-child.child-left
          input#search(type="search", data-search="")
        .float-child.child-right
          select#search-filter(name="filter", data-search-filter="")
            option(value="name", title="Name") Name
            option(value="symbol", title="Symbol") Symbol
            option(value="appearance", title="Appearance") Appearance
            option(value="category", title="Category") Category
            option(value="phase", title="Phase") Phase
            option(value="density", title="Density") Density
            option(value="atomic_mass", title="Atomic Mass") Atomic Mass
            option(value="boil", title="Boiling Point") Boiling Point
            option(value="melt", title="Melting Point") Melting Point
            option(value="molar_heat", title="Molar Heat") Molar Heat
            option(value="discovered_by", title="Discovered By") Discovered By
            option(value="named_by", title="Named By") Named By
            option(value="atomic_number", title="Atomic Number") Atomic Number
            option(value="summary", title="Summary") Summary
            option(value="period", title="Period") Period
            option(value="xpos", title="Xpos") Xpos
            option(value="ypos", title="Ypos") Ypos
            option(
              value="electron_configuration",
              title="Electron Configuration"
            ) Electron Configuration
            option(
              value="electron_configuration_semantic",
              title="Electron Configuration Semantic"
            ) Electron Configuration Semantic
            option(value="electron_affinity", title="Electron Affinity") Electron Affinity
            option(
              value="electronegativity_pauling",
              title="Electronegativity Pauling"
            ) Electronegativity Pauling
            option(value="ionization_energies", title="Ionization Energies") Ionization Energies
            option(value="cpkhex", title="cpk-hex") cpk-hex
    .pureElement-cards(data-pureelement-cards-container="")
    template(data-pureelement-template="")
      .card
        .card-info-wrapper
          .name(data-name="")
          .body
            .name(data-name2="")
            .symbol.hide(data-symbol="")
            .appearance.hide(data-appearance="")
            .category.hide(data-category="")
            .phase.hide(data-phase="")
            .density.hide(data-density="")
            .atomic_mass.hide(data-atomic_mass="")
            .boil.hide(data-boil="")
            .melt.hide(data-melt="")
            .molar_heat.hide(data-molar_heat="")
            .discovered_by.hide(data-discovered_by="")
            .named_by.hide(data-named_by="")
            .atomic_number.hide(data-atomic_number="")
            .summary.hide(data-summary="")
            .period.hide(data-period="")
            .xpos.hide(data-xpos="")
            .ypos.hide(data-ypos="")
            .electron_configuration.hide(data-electron_configuration="")
            .electron_configuration_semantic.hide(
              data-electron_configuration_semantic=""
            )
            .electron_affinity.hide(data-electron_affinity="")
            .electronegativity_pauling.hide(data-electronegativity_pauling="")
            .ionization_energies.hide(data-ionization_energies="")
            .cpkhex.hide(data-cpkhex="")

// ELEMENT MIXIN TEMPLATE
mixin element(number, symbol, name, mass, weight, material, column, row)
  .element(class=material)(class='c' + column)(class='r' + row)
    input.activate(type="radio", name="elements")
    input.deactivate(type="radio", name="elements")
    .overlay
    .square
      .model
        each item in weight.reverse()
          .orbital
            - for (var i = 0; i < item; i++)
              .electron
      .atomic-number= number
      .label
        .symbol= symbol
        .name= name
      .atomic-mass= mass
      ul.atomic-weight
        each item in weight.reverse()
          li= item

// PLACEHOLDER MIXIN TEMPLATE
mixin placeholder(number, material, column, row)
  .placeholder(class=material)(class='c' + column)(class='r' + row)
    .square= number

#Periodic-Table.wrapper
  each item in categories
    input.category-toggle(type="radio", id=item, name="categories")
    input#cancel.category-cancel(type="radio", name="categories")
  .periodic-table
    +element(1, 'H', 'Hydrogen', 1.008, [1], 'other-nonmetal', 1, 1)
    +element(2, 'He', 'Helium', 4.0026, [2], 'noble-gas', 18, 1)
    +element(3, 'Li', 'Lithium', 6.94, [2,1], 'alkali-metal', 1, 2)
    +element(4, 'Be', 'Beryllium', 9.0122, [2,2], 'alkaline-earth-metal', 2, 2)
    +element(5, 'B', 'Boron', 10.81, [2,3], 'metalloid', 13, 2)
    +element(6, 'C', 'Carbon', 12.011, [2,4], 'other-nonmetal', 14, 2)
    +element(7, 'N', 'Nitrogen', 14.007, [2,5], 'other-nonmetal', 15, 2)
    +element(8, 'O', 'Oxygen', 15.999, [2,6], 'other-nonmetal', 16, 2)
    +element(9, 'F', 'Flourine', 18.998, [2,7], 'other-nonmetal', 17, 2)
    +element(10, 'Ne', 'Neon', 20.180, [2,8], 'noble-gas', 18, 2)
    +element(11, 'Na', 'Sodium', 22.990, [2,8,1], 'alkali-metal', 1, 3)
    +element(12, 'Mg', 'Magnesium', 24.305, [2,8,2], 'alkaline-earth-metal', 2, 3)
    +element(13, 'Al', 'Aluminium', 26.982, [2,8,3], 'post-transition-metal', 13, 3)
    +element(14, 'Si', 'Silicon', 28.085, [2,8,4], 'metalloid', 14, 3)
    +element(15, 'P', 'Phosphorus', 30.974, [2,8,5], 'other-nonmetal', 15, 3)
    +element(16, 'S', 'Sulfur', 32.06, [2,8,6], 'other-nonmetal', 16, 3)
    +element(17, 'Cl', 'Chlorine', 35.45, [2,8,7], 'other-nonmetal', 17, 3)
    +element(18, 'Ar', 'Argon', 39.948, [2,8,8], 'noble-gas', 18, 3)
    +element(19, 'K', 'Potassium', 39.098, [2,8,8,1], 'alkali-metal', 1, 4)
    +element(20, 'Ca', 'Calcium', 40.078, [2,8,8,2], 'alkaline-earth-metal', 2, 4)
    +element(21, 'Sc', 'Scandium', 44.956, [2,8,9,2], 'transition-metal', 3, 4)
    +element(22, 'Ti', 'Titanium', 47.867, [2,8,10,2], 'transition-metal', 4, 4)
    +element(23, 'V', 'Vanadium', 50.942, [2,8,11,2], 'transition-metal', 5, 4)
    +element(24, 'Cr', 'Chromium', 51.996, [2,8,13,1], 'transition-metal', 6, 4)
    +element(25, 'Mn', 'Manganese', 54.938, [2,8,13,2], 'transition-metal', 7, 4)
    +element(26, 'Fe', 'Iron', 55.845, [2,8,14,2], 'transition-metal', 8, 4)
    +element(27, 'Co', 'Cobalt', 58.933, [2,8,15,2], 'transition-metal', 9, 4)
    +element(28, 'Ni', 'Nickel', 58.693, [2,8,16,2], 'transition-metal', 10, 4)
    +element(29, 'Cu', 'Copper', 63.546, [2,8,18,1], 'transition-metal', 11, 4)
    +element(30, 'Zn', 'Zinc', 65.38, [2,8,18,2], 'transition-metal', 12, 4)
    +element(31, 'Ga', 'Gallium', 69.723, [2,8,18,3], 'post-transition-metal', 13, 4)
    +element(32, 'Ge', 'Germanium', 72.630, [2,8,18,4], 'metalloid', 14, 4)
    +element(33, 'As', 'Arsenic', 74.922, [2,8,18,5], 'metalloid', 15, 4)
    +element(34, 'Se', 'Selenium', 78.971, [2,8,18,6], 'other-nonmetal', 16, 4)
    +element(35, 'Br', 'Bromine', 79.904, [2,8,18,7], 'other-nonmetal', 17, 4)
    +element(36, 'Kr', 'Krypton', 83.798, [2,8,18,8], 'noble-gas', 18, 4)
    +element(37, 'Rb', 'Rubidium', 85.468, [2,8,18,8,1], 'alkali-metal', 1, 5)
    +element(38, 'Sr', 'Strontium', 87.62, [2,8,18,8,2], 'alkaline-earth-metal', 2, 5)
    +element(39, 'Y', 'Yttrium', 88.906, [2,8,18,9,2], 'transition-metal', 3, 5)
    +element(40, 'Zr', 'Zirconium', 91.224, [2,8,18,10,2], 'transition-metal', 4, 5)
    +element(41, 'Nb', 'Niobium', 92.906, [2,8,18,12,1], 'transition-metal', 5, 5)
    +element(42, 'Mo', 'Molybdenum', 95.95, [2,8,18,13,1], 'transition-metal', 6, 5)
    +element(43, 'Tc', 'Technetium', '(98)', [2,8,18,13,2], 'transition-metal', 7, 5)
    +element(44, 'Ru', 'Ruthenium', 101.07, [2,8,18,15,1], 'transition-metal', 8, 5)
    +element(45, 'Rh', 'Rhodium', 102.91, [2,8,18,16,1], 'transition-metal', 9, 5)
    +element(46, 'Pd', 'Palladium', 106.42, [2,8,18,18], 'transition-metal', 10, 5)
    +element(47, 'Ag', 'Silver', 107.87, [2,8,18,18,1], 'transition-metal', 11, 5)
    +element(48, 'Cd', 'Cadmium', 112.41, [2,8,18,18,2], 'transition-metal', 12, 5)
    +element(49, 'In', 'Indium', 114.82, [2,8,18,18,3], 'post-transition-metal', 13, 5)
    +element(50, 'Sn', 'Tin', 204.38, [2,8,18,18,4], 'post-transition-metal', 14, 5)
    +element(51, 'Sb', 'Antimony', 121.76, [2,8,18,18,5], 'metalloid', 15, 5)
    +element(52, 'Te', 'Tellurium', 127.60, [2,8,18,18,6], 'metalloid', 16, 5)
    +element(53, 'I', 'Iodine', 126.90, [2,8,18,18,7], 'other-nonmetal', 17, 5)
    +element(54, 'Xe', 'Xenon', 131.29, [2,8,18,18,8], 'noble-gas', 18, 5)
    +element(55, 'Cs', 'Caesium', 132.91, [2,8,18,18,8,1], 'alkali-metal', 1, 6)
    +element(56, 'Ba', 'Barium', 137.33, [2,8,18,18,8,2], 'alkaline-earth-metal', 2, 6)
    +element(57, 'La', 'Lanthanum', 138.91, [2,8,18,18,9,2], 'lanthanide', 4, 9)
    +element(58, 'Ce', 'Cerium', 140.12, [2,8,18,19,9,2], 'lanthanide', 5, 9)
    +element(59, 'Pr', 'Praseodymium', 140.91, [2,8,18,21,8,2], 'lanthanide', 6, 9)
    +element(60, 'Nd', 'Neodymium', 144.24, [2,8,18,22,8,2], 'lanthanide', 7, 9)
    +element(61, 'Pm', 'Promethium', 144.24, [2,8,18,23,8,2], 'lanthanide', 8, 9)
    +element(62, 'Sm', 'Samarium', 150.36, [2,8,18,24,8,2], 'lanthanide', 9, 9)
    +element(63, 'Eu', 'Europium', 151.96, [2,8,18,25,8,2], 'lanthanide', 10, 9)
    +element(64, 'Gd', 'Gadolinium', 157.25, [2,8,18,25,9,2], 'lanthanide', 11, 9)
    +element(65, 'Tb', 'Terbium', 158.93, [2,8,18,27,8,2], 'lanthanide', 12, 9)
    +element(66, 'Dy', 'Dysprosium', 162.50, [2,8,18,28,8,2], 'lanthanide', 13, 9)
    +element(67, 'Ho', 'Holmium', 164.93, [2,8,18,29,8,2], 'lanthanide', 14, 9)
    +element(68, 'Er', 'Erbium', 167.26, [2,8,18,30,8,2], 'lanthanide', 15, 9)
    +element(69, 'Tm', 'Thulium', 168.93, [2,8,18,31,8,2], 'lanthanide', 16, 9)
    +element(70, 'Yb', 'Ytterbium', 173.05, [2,8,18,32,8,2], 'lanthanide', 17, 9)
    +element(71, 'Lu', 'Lutetium', 174.97, [2,8,18,32,9,2], 'lanthanide', 18, 9)
    +element(72, 'Hf', 'Hafnium', 178.49, [2,8,18,32,10,2], 'transition-metal', 4, 6)
    +element(73, 'Ta', 'Tantalum', 180.95, [2,8,18,32,11,2], 'transition-metal', 5, 6)
    +element(74, 'W', 'Tungsten', 183.84, [2,8,18,32,12,2], 'transition-metal', 6, 6)
    +element(75, 'Re', 'Rhenium', 186.21, [2,8,18,32,13,2], 'transition-metal', 7, 6)
    +element(76, 'Os', 'Osmium', 190.23, [2,8,18,32,14,2], 'transition-metal', 8, 6)
    +element(77, 'Ir', 'Iridium', 192.22, [2,8,18,32,15,2], 'transition-metal', 9, 6)
    +element(78, 'Pt', 'Platinum', 195.08, [2,8,18,32,17,1], 'transition-metal', 10, 6)
    +element(79, 'Au', 'Gold', 196.97, [2,8,18,32,18,1], 'transition-metal', 11, 6)
    +element(80, 'Hg', 'Mercury', 200.59, [2,8,18,32,18,2], 'transition-metal', 12, 6)
    +element(81, 'Tl', 'Thallium', 204.38, [2,8,18,32,18,3], 'post-transition-metal', 13, 6)
    +element(82, 'Pb', 'Lead', 207.2, [2,8,18,32,18,4], 'post-transition-metal', 14, 6)
    +element(83, 'Bi', 'Bismuth', 208.98, [2,8,18,32,18,5], 'post-transition-metal', 15, 6)
    +element(84, 'Po', 'Polonium', '(209)', [2,8,18,32,18,6], 'post-transition-metal', 16, 6)
    +element(85, 'At', 'Astatine', '(210)', [2,8,18,32,18,7], 'metalloid', 17, 6)
    +element(86, 'Rn', 'Radon', '(222)', [2,8,18,32,18,8], 'noble-gas', 18, 6)
    +element(87, 'Fr', 'Francium', '(223)', [2,8,18,32,18,8,1], 'alkali-metal', 1, 7)
    +element(88, 'Ra', 'Radium', '(226)', [2,8,18,32,18,8,2], 'alkaline-earth-metal', 2, 7)
    +element(89, 'Ac', 'Actinium', '(227)', [2,8,18,32,18,9,2], 'actinoid', 4, 10)
    +element(90, 'Th', 'Thorium', 232.04, [2,8,18,32,18,10,2], 'actinoid', 5, 10)
    +element(91, 'Pa', 'Protactinium', 231.04, [2,8,18,32,20,9,2], 'actinoid', 6, 10)
    +element(92, 'U', 'Uranium', 238.03, [2,8,18,32,21,9,2], 'actinoid', 7, 10)
    +element(93, 'Np', 'Neptunium', '(237)', [2,8,18,32,22,9,2], 'actinoid', 8, 10)
    +element(94, 'Pu', 'Plutonium', '(244)', [2,8,18,32,24,8,2], 'actinoid', 9, 10)
    +element(95, 'Am', 'Americium', '(243)', [2,8,18,32,25,8,2], 'actinoid', 10, 10)
    +element(96, 'Cm', 'Curium', '(247)', [2,8,18,32,25,9,2], 'actinoid', 11, 10)
    +element(97, 'Bk', 'Berkelium', '(247)', [2,8,18,32,27,8,2], 'actinoid', 12, 10)
    +element(98, 'Cf', 'Californium', '(251)', [2,8,18,32,28,8,2], 'actinoid', 13, 10)
    +element(99, 'Es', 'Einsteinium', '(252)', [2,8,18,32,29,8,2], 'actinoid', 14, 10)
    +element(100, 'Fm', 'Fermium', '(257)', [2,8,18,32,30,8,2], 'actinoid', 15, 10)
    +element(101, 'Md', 'Mendelevium', '(258)', [2,8,18,32,31,8,2], 'actinoid', 16, 10)
    +element(102, 'No', 'Nobelium', '(259)', [2,8,18,32,32,8,2], 'actinoid', 17, 10)
    +element(103, 'Lr', 'Lawrencium', '(266)', [2,8,18,32,32,8,3], 'actinoid', 18, 10)
    +element(104, 'Rf', 'Rutherfordium', '(267)', [2,8,18,32,32,10,2], 'transition-metal', 4, 7)
    +element(105, 'Db', 'Dubnium', '(268)', [2,8,18,32,32,11,2], 'transition-metal', 5, 7)
    +element(106, 'Sg', 'Seaborgium', '(269)', [2,8,18,32,32,12,2], 'transition-metal', 6, 7)
    +element(107, 'Bh', 'Bohrium', '(270)', [2,8,18,32,32,13,2], 'transition-metal', 7, 7)
    +element(108, 'Hs', 'Hassium', '(277)', [2,8,18,32,32,14,2], 'transition-metal', 8, 7)
    +element(109, 'Mt', 'Meitnerium', '(278)', [2,8,18,32,32,15,2], 'unknown', 9, 7)
    +element(110, 'Ds', 'Darmstadtium', '(281)', [2,8,18,32,32,17,1], 'unknown', 10, 7)
    +element(111, 'Rg', 'Roentgenium', '(282)', [2,8,18,32,32,17,2], 'unknown', 11, 7)
    +element(112, 'Cn', 'Copernicium', '(282)', [2,8,18,32,32,18,2], 'transition-metal', 12, 7)
    +element(113, 'Nh', 'Nihonium', '(286)', [2,8,18,32,32,18,3], 'unknown', 13, 7)
    +element(114, 'Fl', 'Flerovium', '(289)', [2,8,18,32,32,18,4], 'post-transition-metal', 14, 7)
    +element(115, 'Mc', 'Moscovium', '(290)', [2,8,18,32,32,18,5], 'unknown', 15, 7)
    +element(116, 'Lv', 'Livermorium', '(293)', [2,8,18,32,32,18,6], 'unknown', 16, 7)
    +element(117, 'Ts', 'Tennessine', '(294)', [2,8,18,32,32,18,7], 'unknown', 17, 7)
    +element(118, 'Og', 'Oganesson', '(294)', [2,8,18,32,32,18,8], 'unknown', 18, 7)

    +placeholder('57-71', 'lanthanide', 3, 6)
    +placeholder('89-103', 'actinoid', 3, 7)

    .gap.c3.r8

    .key
      .row
        label.alkali-metal(for="alkali-metals") Alkali Metals
        label.alkaline-earth-metal(for="alkaline-earth-metals") Alkaline Earth Metals
        label.lanthanide(for="lanthanides") Lanthanides
        label.actinoid(for="actinoids") Aktinoids
        label.transition-metal(for="transition-metals") Transition Metals
        label.post-transition-metal(for="post-transition-metals") Post-Transition Metals
        label.metalloid(for="metalloids") Metalloids
        label.other-nonmetal(for="other-nonmetals") Other Nonmetals
        label.noble-gas(for="noble-gasses") Noble Gasses
        label.unknown(for="unknown") Unknown

periodic-table-of-elements.markdown

Periodic Table of Elements

I created this project to learn a bit more about JavaScript, (js)fetch, JSON and a bit of animation.

A Pen by Ju1-js on CodePen.

License.

script.js

// ¯\_(ツ)_/¯

/* TODO:
 * - Use data to automatically create the periodic table and add more info when you click on it
 * - Use flexbox to attach element card to search card and make it clickable
 * - Done: Add a element search
 */

const nullReplacement = "N/A";

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

const pureElementCardTemplate = document.querySelector(
  "[data-pureElement-template]"
);
const pureElementCardContainer = document.querySelector(
  "[data-pureElement-cards-container]"
);
const searchInput = document.querySelector("[data-search]");
const searchFilter = document.querySelector("[data-search-filter]");

let pureElements = [];

let lastSearchInput = "";

function jsonFix(_data) {
  _data = _data.elements;
  return _data;
}

// https://jsonplaceholder.typicode.com/users
// src/elements.json
fetch(
  "https://raw.githubusercontent.com/Bowserinator/Periodic-Table-JSON/master/PeriodicTableJSON.json"
)
  .then((res) => res.json())
  .then((data) => {
    data = jsonFix(data);
    pureElements = data.map((_pureElement) => {
      _pureElement.cpkhex = _pureElement["cpk-hex"];
      delete _pureElement["cpk-hex"];

      const card = pureElementCardTemplate.content.cloneNode(true).children[0];
      const name = card.querySelector("[data-name]");
      const name2 = card.querySelector("[data-name2]");
      const symbol = card.querySelector("[data-symbol]");
      const appearance = card.querySelector("[data-appearance]");
      const category = card.querySelector("[data-category]");
      const phase = card.querySelector("[data-phase]");
      const density = card.querySelector("[data-density]");
      const atomic_mass = card.querySelector("[data-atomic_mass]");
      const boil = card.querySelector("[data-boil]");
      const melt = card.querySelector("[data-melt]");
      const molar_heat = card.querySelector("[data-molar_heat]");
      const discovered_by = card.querySelector("[data-discovered_by]");
      const named_by = card.querySelector("[data-named_by]");
      const atomic_number = card.querySelector("[data-atomic_number]");
      const summary = card.querySelector("[data-summary]");
      const period = card.querySelector("[data-period]");
      const xpos = card.querySelector("[data-xpos]");
      const ypos = card.querySelector("[data-ypos]");
      const electron_configuration = card.querySelector(
        "[data-electron_configuration]"
      );
      const electron_configuration_semantic = card.querySelector(
        "[data-electron_configuration_semantic]"
      );
      const electron_affinity = card.querySelector("[data-electron_affinity]");
      const electronegativity_pauling = card.querySelector(
        "[data-electronegativity_pauling]"
      );
      const ionization_energies = card.querySelector(
        "[data-ionization_energies]"
      );
      const cpkhex = card.querySelector("[data-cpkhex]");

      if (_pureElement.category.includes("alkali metal")) {
        card.classList.add("alkali-metal");
      }
      if (_pureElement.category.includes("alkaline earth metal")) {
        card.classList.add("alkaline-earth-metal");
      }
      if (_pureElement.category.includes("lanthanide")) {
        card.classList.add("lanthanide");
      }
      if (_pureElement.category.includes("actinide")) {
        card.classList.add("actinoid");
      }
      if (_pureElement.category.includes("transition metal")) {
        card.classList.add("transition-metal");
      }
      if (_pureElement.category.includes("post-transition metal")) {
        card.classList.add("post-transition-metal");
      }
      if (_pureElement.category.includes("metalloid")) {
        card.classList.add("metalloid");
      }
      if (_pureElement.category.includes("nonmetal")) {
        card.classList.add("other-nonmetal");
      }
      if (_pureElement.category.includes("noble gas")) {
        card.classList.add("noble-gas");
      }
      if (_pureElement.category.includes("unknown")) {
        card.classList.add("unknown");
      }

      if (
        (_pureElement.number >= 57 && _pureElement.number <= 71) ||
        (_pureElement.number >= 89 && _pureElement.number <= 103)
      ) {
        _pureElement.xpos++;
      }

      if (_pureElement.name == null) {
        _pureElement.name = nullReplacement;
      }
      if (_pureElement.symbol == null) {
        _pureElement.symbol = nullReplacement;
      }
      if (_pureElement.appearance == null) {
        _pureElement.appearance = nullReplacement;
      }
      if (_pureElement.category == null) {
        _pureElement.category = nullReplacement;
      }
      if (_pureElement.phase == null) {
        _pureElement.phase = nullReplacement;
      }
      if (_pureElement.density == null) {
        _pureElement.density = nullReplacement;
      }
      if (_pureElement.atomic_mass == null) {
        _pureElement.atomic_mass = nullReplacement;
      }
      if (_pureElement.boil == null) {
        _pureElement.boil = nullReplacement;
      }
      if (_pureElement.melt == null) {
        _pureElement.melt = nullReplacement;
      }
      if (_pureElement.molar_heat == null) {
        _pureElement.molar_heat = nullReplacement;
      }
      if (_pureElement.discovered_by == null) {
        _pureElement.discovered_by = nullReplacement;
      }
      if (_pureElement.named_by == null) {
        _pureElement.named_by = nullReplacement;
      }
      if (_pureElement.atomic_number == null) {
        _pureElement.atomic_number = nullReplacement;
      }
      if (_pureElement.summary == null) {
        _pureElement.summary = nullReplacement;
      }
      if (_pureElement.period == null) {
        _pureElement.period = nullReplacement;
      }
      if (_pureElement.xpos == null) {
        _pureElement.xpos = nullReplacement;
      }
      if (_pureElement.ypos == null) {
        _pureElement.ypos = nullReplacement;
      }
      if (_pureElement.electron_configuration == null) {
        _pureElement.electron_configuration = nullReplacement;
      }
      if (_pureElement.electron_configuration_semantic == null) {
        _pureElement.electron_configuration_semantic = nullReplacement;
      }
      if (_pureElement.electron_affinity == null) {
        _pureElement.electron_affinity = nullReplacement;
      }
      if (_pureElement.electronegativity_pauling == null) {
        _pureElement.electronegativity_pauling = nullReplacement;
      }
      if (_pureElement.ionization_energies == null) {
        _pureElement.ionization_energies = nullReplacement;
      }
      if (_pureElement.cpkhex == null) {
        _pureElement.cpkhex = nullReplacement;
      }

      name.textContent = _pureElement.name;
      name.title = _pureElement.name;
      name2.textContent = _pureElement.name;
      name2.title = _pureElement.name;
      symbol.textContent = _pureElement.symbol;
      symbol.title = _pureElement.symbol;
      appearance.textContent = _pureElement.appearance;
      appearance.title = _pureElement.appearance;
      category.textContent = _pureElement.category;
      category.title = _pureElement.category;
      phase.textContent = _pureElement.phase;
      phase.title = _pureElement.phase;
      density.textContent = _pureElement.density;
      density.title = _pureElement.density;
      atomic_mass.textContent = _pureElement.atomic_mass;
      atomic_mass.title = _pureElement.atomic_mass;
      boil.textContent = _pureElement.boil;
      boil.title = _pureElement.boil;
      melt.textContent = _pureElement.melt;
      melt.title = _pureElement.melt;
      molar_heat.textContent = _pureElement.molar_heat;
      molar_heat.title = _pureElement.molar_heat;
      discovered_by.textContent = _pureElement.discovered_by;
      discovered_by.title = _pureElement.discovered_by;
      named_by.textContent = _pureElement.named_by;
      named_by.title = _pureElement.named_by;
      atomic_number.textContent = _pureElement.number;
      atomic_number.title = _pureElement.number;
      summary.textContent = _pureElement.summary;
      summary.title = _pureElement.summary;
      period.textContent = _pureElement.period;
      period.title = _pureElement.period;
      xpos.textContent = _pureElement.xpos;
      xpos.title = _pureElement.xpos;
      ypos.textContent = _pureElement.ypos;
      ypos.title = _pureElement.ypos;
      electron_configuration.textContent = _pureElement.electron_configuration;
      electron_configuration.title = _pureElement.electron_configuration;
      electron_configuration_semantic.textContent =
        _pureElement.electron_configuration_semantic;
      electron_configuration_semantic.title =
        _pureElement.electron_configuration_semantic;
      electron_affinity.textContent = _pureElement.electron_affinity;
      electron_affinity.title = _pureElement.electron_affinity;
      electronegativity_pauling.textContent =
        _pureElement.electronegativity_pauling;
      electronegativity_pauling.title = _pureElement.electronegativity_pauling;
      ionization_energies.textContent = _pureElement.ionization_energies;
      ionization_energies.title = _pureElement.ionization_energies;
      cpkhex.textContent = _pureElement.cpkhex;
      cpkhex.title = _pureElement.cpkhex;

      pureElementCardContainer.append(card);

      return {
        element: card,
        name: _pureElement.name,
        symbol: _pureElement.symbol,
        appearance: _pureElement.appearance,
        category: _pureElement.category,
        phase: _pureElement.phase,
        density: _pureElement.density,
        atomic_mass: _pureElement.atomic_mass,
        boil: _pureElement.boil,
        melt: _pureElement.melt,
        molar_heat: _pureElement.molar_heat,
        discovered_by: _pureElement.discovered_by,
        named_by: _pureElement.named_by,
        atomic_number: _pureElement.number,
        summary: _pureElement.summary,
        period: _pureElement.period,
        xpos: _pureElement.xpos,
        ypos: _pureElement.ypos,
        electron_configuration: _pureElement.electron_configuration,
        electron_configuration_semantic:
          _pureElement.electron_configuration_semantic,
        electron_affinity: _pureElement.electron_affinity,
        electronegativity_pauling: _pureElement.electronegativity_pauling,
        ionization_energies: _pureElement.ionization_energies,
        cpkhex: _pureElement.cpkhex
      };
    });
  });

// Scroll to div
function scrollToDiv(element, align) {
  element = element.replace("#", "");
  const el = document.getElementById(element);
  let _align;
  switch (align) {
    case align === "top" || align == true:
      _align = true;
      break;
    case align === "bottom" || align == false:
      _align = false;
      break;
  }
  el.scrollIntoView(align);
}

searchInput.addEventListener("input", (e) => {
  const _value = e.target.value.toLowerCase().replace(/\s+/g, " ").trim();
  lastSearchInput = _value;
  searchPureElements(_value);
});

searchFilter.addEventListener("change", function () {
  searchPureElements(lastSearchInput);
});

function searchPureElements(_value) {
  pureElements.forEach((_pureElement) => {
    const isVisible = getFilter(_pureElement, _value);
    _pureElement.element.classList.toggle("hide", !isVisible);
  });
}

function showRightData(_filter, _pureElement) {
  // Show only the applicable data ex. Searching name -> show name, searching density -> show density
  for (
    let i = 0;
    i < _pureElement.element.children[0].children[1].children.length;
    i++
  ) {
    const child = _pureElement.element.children[0].children[1].children[i];
    //console.log(_filter)
    if (child.classList.contains(_filter) && child.classList.contains("hide")) {
      child.classList.remove("hide");
    } else if (
      !child.classList.contains(_filter) &&
      !child.classList.contains("hide")
    ) {
      child.classList.add("hide");
    }
  }
}

function getFilter(_pureElement, _value) {
  const filter = searchFilter.value;
  let _isVisible = false;
  switch (String(filter)) {
    case "name":
      _isVisible = _pureElement.name
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "symbol":
      _isVisible = _pureElement.symbol
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "appearance":
      _isVisible = _pureElement.appearance
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "category":
      _isVisible = _pureElement.category
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "phase":
      _isVisible = _pureElement.phase
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "density":
      _isVisible = _pureElement.density
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "atomic_mass":
      _isVisible = _pureElement.atomic_mass
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "boil":
      _isVisible = _pureElement.boil
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "melt":
      _isVisible = _pureElement.melt
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "molar_heat":
      _isVisible = _pureElement.molar_heat
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "discovered_by":
      _isVisible = _pureElement.discovered_by
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "named_by":
      _isVisible = _pureElement.named_by
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "atomic_number":
      _isVisible = _pureElement.atomic_number
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "summary":
      _isVisible = _pureElement.summary
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "period":
      _isVisible = _pureElement.period
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "xpos":
      _isVisible = _pureElement.xpos
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "ypos":
      _isVisible = _pureElement.ypos
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "electron_configuration":
      _isVisible = _pureElement.electron_configuration
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "electron_configuration_semantic":
      _isVisible = _pureElement.electron_configuration_semantic
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "electron_affinity":
      _isVisible = _pureElement.electron_affinity
        .toString()
        .toLowerCase()
        .replace(/\s+/g, " ")
        .trim()
        .includes(_value);
      break;
    case "electronegativity_pauling":
      _isVisible = _pureElement.electronegativity_pauling
        .toString()
        .replace(/\s+/g, " ")
        .trim()
        .toLowerCase()
        .includes(_value);
      break;
    case "ionization_energies":
      _isVisible = _pureElement.ionization_energies
        .toString()
        .replace(/\s+/g, " ")
        .trim()
        .toLowerCase()
        .includes(_value);
      break;
    case "cpkhex":
      _isVisible = _pureElement.cpkhex
        .toString()
        .replace(/\s+/g, " ")
        .trim()
        .toLowerCase()
        .includes(_value);
      break;
  }
  showRightData(filter, _pureElement);
  return _isVisible;
}

style.sass

$bgColor: #101318
$gridGap: 5px

$alkaliMetalColor: #ecbe59
$alkalineEarthMetalColor: #dee955
$lanthanideColor: #ec77a3
$actinoidColor: #c686cc
$transitionMetalColor: #fd8572
$postTransitionMetalColor: #4cddf3
$metalloidColor: #3aefb6
$otherNonmetalColor: #52ee61
$nobleGasColor: #759fff
$unknownColor: #cccccc

body
  background: $bgColor
  text-shadow: 0 0 0.4vw currentColor

.wrapper
  position: relative
  overflow: hidden
  padding: 2%
  
  > input
    -webkit-appearance: none
    position: fixed
    left: 0
    top: 0
    width: 100%
    height: 100%
    visibility: hidden
    opacity: 0
    pointer-events: none

.periodic-table
  display: grid
  grid-gap: $gridGap
  grid-template-columns: repeat(18, 1fr)



// --------------------------------------
// ELEMENT
.element
  position: relative
  font-size: 0.5vw
  padding-bottom: 100%
  cursor: pointer
  color: #fff
  transition: 500ms
  
  .overlay
    position: fixed
    z-index: 1
    left: 0
    right: 0
    top: 0
    bottom: 0
    background-color: $bgColor
    opacity: 0
    pointer-events: none
    transition: 500ms
  
  .square
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    border: 2px solid
    box-sizing: border-box
    background: $bgColor
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    transition-property: transform, z-index, left, right, top, bottom
    transition-duration: 100ms, 0ms, 200ms, 200ms, 200ms, 200ms
    transition-delay: 0ms, 100ms, 0ms, 0ms, 0ms, 0ms

  .atomic-number
    position: absolute
    left: 0
    top: 0
    padding: 2px

  .label
    text-align: center
    transition: 200ms

  .symbol
    font-size: 1.7vw

  .name
    font-size: 0.7vw

  .atomic-mass
    position: absolute
    left: 0
    right: 0
    bottom: 0
    padding: 2px
    text-align: center

  .atomic-weight
    position: absolute
    right: 0
    top: 0
    list-style: none
    margin: 0
    padding: 2px
    opacity: 0
    transition: 200ms
    text-align: right
  
  .model
    display: none
    position: absolute
    left: -500%
    right: -500%
    top: -500%
    bottom: -500%
    transform: scale(0.1)
    
    .orbital
      position: absolute
      left: 0
      right: 0
      top: 0
      bottom: 0
      border: 5px solid
      border-radius: 50%
      opacity: 0.25
      
      @for $i from 1 through 8
        &:nth-child(#{$i})
          margin: 10% + 5.5 * ($i - 1)
          animation-duration: 46s - 6 * ($i - 1)
      
      .electron
        position: absolute
        left: 0
        right: 0
        top: 0
        bottom: 0

        &::before
          content: ""
          position: absolute
          left: calc(50% - 0.7vw)
          top: -0.7vw
          width: 1.4vw
          height: 1.4vw
          background-color: currentColor
          border-radius: 50%
          opacity: 0.75

        @for $i from 1 through 32
          @for $a from 1 through $i
            &:nth-last-child(#{$i}):first-child ~ .electron:nth-child(#{$a})
              transform: rotate((360deg/$i)*($a - 1))

  input[type="radio"]
    -webkit-appearance: none
    position: absolute
    z-index: 2
    left: 0
    top: 0
    width: 100%
    height: 100%
    opacity: 0
    cursor: pointer
    outline: none
    
    &.activate
      &:hover ~ .square
        z-index: 2
        transform: scale(1.35)
        transition-delay: 0ms
        outline: none
        pointer-events: none
    
      &:checked + input[type="radio"].deactivate
        z-index: 3
        pointer-events: all
      
      &:checked ~ .overlay
        opacity: 0.75

      &:checked ~ .square
        z-index: 3
        transform: scale(3)
        transition-duration: 500ms, 0ms, 200ms, 200ms, 200ms, 200ms
        transition-delay: 0ms
        outline: none
        cursor: auto
        
        .label
          transition-duration: 500ms
          transform: scale(0.75)

        .atomic-weight
          opacity: 1
          transition: 500ms

        .model
          display: block
          animation: fade-in
          animation-duration: 1s
          
        .orbital
          animation-name: rotate
          animation-timing-function: linear
          animation-iteration-count: infinite
    
    &.deactivate
      position: fixed
      display: block
      z-index: 1
      opacity: 0
      pointer-events: none 
    
      &:checked ~ .square
        z-index: 1

        
// --------------------------------------
// PLACEHOLDER     
.placeholder
  position: relative
  z-index: -1
  font-size: 1vw
  padding-bottom: 100%
  color: #fff
  transition: 500ms
  
  .square
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    border: 2px solid
    box-sizing: border-box
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    opacity: 0.5


// --------------------------------------
// GAP     
.gap
  position: relative
  padding-bottom: 100%
  transition: 500ms
  
  &::before
    content: ""
    position: absolute
    left: 50%
    top: 0
    width: 50%
    height: calc(200% + #{$gridGap} * 2 - 4px)
    border-width: 0 0 2px 2px
    border-style: solid
    margin-left: -1px
    color: #fff
    opacity: 0.2
    

  
// --------------------------------------
// COLORS
.alkali-metal
  color: $alkaliMetalColor

.alkaline-earth-metal
  color: $alkalineEarthMetalColor

.lanthanide
  color: $lanthanideColor

.actinoid
  color: $actinoidColor
  
.transition-metal
  color: $transitionMetalColor

.post-transition-metal
  color: $postTransitionMetalColor

.metalloid
  color: $metalloidColor

.other-nonmetal
  color: $otherNonmetalColor

.noble-gas
  color: $nobleGasColor

.unknown
  color: $unknownColor



// --------------------------------------
// ROWS & COLUMNS
@for $i from 1 through 10
  .r#{$i}
    grid-row: $i

@for $i from 1 through 18
  .c#{$i}
    grid-column: $i



// --------------------------------------
// SHIFT EDGE ELEMENTS ON ZOOM
.r1 input[type="radio"].activate:checked ~ .square
  top: 100%

.r10 input[type="radio"].activate:checked ~ .square
  top: -100%

.c1 input[type="radio"].activate:checked ~ .square
  left: 100%

.c18 input[type="radio"].activate:checked ~ .square
  left: -100%



// --------------------------------------
// ANIMATIONS
@keyframes rotate
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)

@keyframes fade-in
  from
    opacity: 0
  to
    opacity: 1

@keyframes noise
  0%, 100%
    background-position: 0 0
  10%
    background-position: -5% -10%
  20%
    background-position: -15% 5%
  30%
    background-position: 7% -25%
  40%
    background-position: 20% 25%
  50%
    background-position: -25% 10%
  60%
    background-position: 15% 5%
  70%
    background-position: 0% 15%
  80%
    background-position: 25% 35%
  90%
    background-position: -10% 10%



// --------------------------------------
// KEY
.key
  position: relative
  z-index: 1
  grid-row: 1
  grid-column-start: 3
  grid-column-end: 17
  font-size: 0.8vw
  line-height: 1.5
  display: flex
  align-items: center
  pointer-events: none
  user-select: none
  
  .row
    position: relative
    display: flex
    width: 100%
    justify-content: space-between
    
    label
      opacity: 0.85
      cursor: pointer
      transition: 120ms
      pointer-events: all
      
      &:hover
        opacity: 1 !important


// --------------------------------------
// CATEGORY TOGGLES
#alkali-metals:checked ~ .periodic-table .element:not(.alkali-metal),
#alkaline-earth-metals:checked ~ .periodic-table .element:not(.alkaline-earth-metal),
#lanthanides:checked ~ .periodic-table .element:not(.lanthanide),
#actinoids:checked ~ .periodic-table .element:not(.actinoid),
#transition-metals:checked ~ .periodic-table .element:not(.transition-metal),
#post-transition-metals:checked ~ .periodic-table .element:not(.post-transition-metal),
#metalloids:checked ~ .periodic-table .element:not(.metalloid),
#other-nonmetals:checked ~ .periodic-table .element:not(.other-nonmetal),
#noble-gasses:checked ~ .periodic-table .element:not(.noble-gas),
#unknown:checked ~ .periodic-table .element:not(.unknown),
#alkali-metals:checked ~ .periodic-table .placeholder,
#alkaline-earth-metals:checked ~ .periodic-table .placeholder,
#lanthanides:checked ~ .periodic-table .placeholder:not(.lanthanide),
#actinoids:checked ~ .periodic-table .placeholder:not(.actinoid),
#transition-metals:checked ~ .periodic-table .placeholder,
#post-transition-metals:checked ~ .periodic-table .placeholder,
#metalloids:checked ~ .periodic-table .placeholder,
#other-nonmetals:checked ~ .periodic-table .placeholder,
#noble-gasses:checked ~ .periodic-table .placeholder,
#unknown:checked ~ .periodic-table .placeholder
  opacity: 0.15
  pointer-events: none

#alkali-metals:checked ~ .periodic-table .key label:not(.alkali-metal),
#alkaline-earth-metals:checked ~ .periodic-table .key label:not(.alkaline-earth-metal),
#lanthanides:checked ~ .periodic-table .key label:not(.lanthanide),
#actinoids:checked ~ .periodic-table .key label:not(.actinoid),
#transition-metals:checked ~ .periodic-table .key label:not(.transition-metal),
#post-transition-metals:checked ~ .periodic-table .key label:not(.post-transition-metal),
#metalloids:checked ~ .periodic-table .key label:not(.metalloid),
#other-nonmetals:checked ~ .periodic-table .key label:not(.other-nonmetal),
#noble-gasses:checked ~ .periodic-table .key label:not(.noble-gas),
#unknown:checked ~ .periodic-table .key label:not(.unknown)
  opacity: 0.65

.category-toggle:not(#lanthanides):not(#actinoids):checked ~ .periodic-table .gap
  opacity: 0.5

.category-toggle:checked ~ .category-cancel
  visibility: visible
  pointer-events: all
  cursor: pointer
  
.search-wrapper
  display: flex
  flex-direction: column
  gap: .25rem

input
  font-size: 1rem

.pureElement-cards
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
  gap: .25rem
  margin-top: 1rem

.card
  border: 2.5px solid
  border-radius: 5px
  padding: .5rem

  > .card-info-wrapper > .body > *
    font-size: .8rem
    color: #777

.hide
  display: none

.header-search
  color: white
  font-size: 2rem

html
  scroll-behavior: smooth

.card > .card-info-wrapper > .body > *
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  width: 100%

.skip-nav-link
  font-variation-settings: "wght" var(--font-weight, 375), "wdth" var(--font-width, 80)
  font-family: Alaska, sans-serif
  font-size: 1.25rem
  color: orange
  letter-spacing: -.5px
  background: black
  padding: 0.5rem, 1.25rem
  border: 0.5rem solid black
  border-radius: 0 0 0.25rem 0.25rem
  position: absolute
  top: 0
  left: 0.5rem
  transform: translateY(-120%)
  transition: transform 325ms ease-in-out

  &:focus
    transform: translateY(0)
  
.collapsible
  background-color: #777
  color: white
  cursor: pointer
  padding: 18px
  width: 100%
  border: none
  text-align: left
  outline: none
  font-size: 15px
  border-radius: 1rem
  transition: border-radius .25s
  

.active, .collapsible:hover
  background-color: #555
  
.active.collapsible
  border-bottom-left-radius: 0rem
  border-bottom-right-radius: 0rem
  
.search
  max-height: 0
  overflow: hidden
  transition: max-height 0.2s     ease-out
  background-color: #111
  
.collapsible:after
  content: '\02795'
  font-size: 13px
  font-weight: bold
  color: white
  float: right
  margin-left: 5px

.active:after
  content: "\2796"
  
.panel
  padding-top: 1rem
  padding-left: 1rem
  
.float-child
  //width: 40%
  height: 20px
  float: left
  
.child-left
  width: 75%
.child-right
  width: 20%
  
#search-filter
  min-width: 70px
  width: 100%
  height: 23.5px
  
#search
  min-width: 140px
  width: 100%
  height: 23.5px