Create A Periodic Table Of Elements Using jQuery & CSS Grid

Create A Periodic Table Of Elements Using jQuery & CSS Grid
File Size: 29.3 KB
Views Total: 517
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A small script that makes uses of jQuery, JSON, and CSS Grid to create a standard periodic table of elements (118 elements) sorted by atomic number.

Hover over or tap any element's name for more details:

  • Name 
  • Appearance
  • Atomic mass
  • Boil
  • Category
  • Color
  • Density
  • Discovered by
  • Melt
  • Molar heat
  • Named by
  • Number 
  • Period
  • Phase
  • Source
  • Spectral image
  • Summary
  • Symbol 
  • xpos
  • ypos
  • shells
  • Electron configuration
  • Electron affinity
  • Electronegativity pauling
  • Ionization energies

How to use it:

1. Load the main stylesheet and jQuery library in the document.

<link rel="stylesheet" href="./assets/css.css" />
<script src="/path/to/cdn/jquery.min.js"></script>

2. Create the HTML for the Periodic Table.

<div class="main-container">
  <div class="info">
    <div id="atomicNum"></div>
    <div id="name"></div>
    <div id="atomicWeight"></div>
    <div id="eConfig"></div>
    <div id="category"></div>
    <div id="discoveredBy"></div>
    <!-- Add More Info Here -->
  <div class="grid-container">
    <div class="grid-item item1" id="1">H</div>

    <div class="grid-item item2">He</div>
    <div class="grid-item item3">Li</div>
    <div class="grid-item item4">Be</div>
    <div class="grid-item item5">B</div>
    <div class="grid-item item6">C</div>
    <div class="grid-item item7">N</div>
    <div class="grid-item item8">O</div>
    <div class="grid-item item9">F</div>
    <div class="grid-item item10">Ne</div>
    <div class="grid-item item11">Na</div>
    <div class="grid-item item12">Mg</div>
    <div class="grid-item item13">Al</div>
    <div class="grid-item item14">Si</div>
    <div class="grid-item item15">P</div>
    <div class="grid-item item16">S</div>
    <div class="grid-item item17">Cl</div>
    <div class="grid-item item18">Ar</div>
    <div class="grid-item item19">K</div>
    <div class="grid-item item20">Ca</div>
    <div class="grid-item item21">Sc</div>
    <div class="grid-item item22">Ti</div>
    <div class="grid-item item23">V</div>
    <div class="grid-item item24">Cr</div>
    <div class="grid-item item25">Mn</div>
    <div class="grid-item item26">Fe</div>
    <div class="grid-item item27">Co</div>
    <div class="grid-item item28">Ni</div>
    <div class="grid-item item29">Cu</div>
    <div class="grid-item item30">Zn</div>
    <div class="grid-item item31">Ga</div>
    <div class="grid-item item32">Ge</div>
    <div class="grid-item item33">As</div>
    <div class="grid-item item34">Se</div>
    <div class="grid-item item35">Br</div>
    <div class="grid-item item36">Kr</div>
    <div class="grid-item item37">Rb</div>
    <div class="grid-item item38">Sr</div>
    <div class="grid-item item39">Y</div>
    <div class="grid-item item40">Zr</div>
    <div class="grid-item item41">Nb</div>
    <div class="grid-item item42">Mo</div>
    <div class="grid-item item43">Tc</div>
    <div class="grid-item item44">Ru</div>
    <div class="grid-item item45">Rh</div>
    <div class="grid-item item46">Pd</div>
    <div class="grid-item item47">Ag</div>
    <div class="grid-item item48">Cd</div>
    <div class="grid-item item49">In</div>
    <div class="grid-item item50">Sn</div>
    <div class="grid-item item51">Sb</div>
    <div class="grid-item item52">Te</div>
    <div class="grid-item item53">I</div>
    <div class="grid-item item54">Xe</div>
    <div class="grid-item item55">Cs</div>
    <div class="grid-item item56">Ba</div>

    <div class="grid-item item72">Hf</div>
    <div class="grid-item item73">Ta</div>
    <div class="grid-item item74">W</div>
    <div class="grid-item item75">Re</div>
    <div class="grid-item item76">Os</div>
    <div class="grid-item item77">Ir</div>
    <div class="grid-item item78">Pt</div>
    <div class="grid-item item79">Au</div>
    <div class="grid-item item80">Hg</div>
    <div class="grid-item item81">Tl</div>
    <div class="grid-item item82">Pb</div>
    <div class="grid-item item83">Bi</div>
    <div class="grid-item item84">Po</div>
    <div class="grid-item item85">At</div>
    <div class="grid-item item86">Rn</div>
    <div class="grid-item item87">Fr</div>
    <div class="grid-item item88">Ra</div>

    <div class="grid-item item104">Rf</div>
    <div class="grid-item item105">Db</div>
    <div class="grid-item item106">Sg</div>
    <div class="grid-item item107">Bh</div>
    <div class="grid-item item108">Hs</div>
    <div class="grid-item item109">Mt</div>
    <div class="grid-item item110">Ds</div>
    <div class="grid-item item111">Rg</div>
    <div class="grid-item item112">Cn</div>
    <div class="grid-item item113">Nh</div>
    <div class="grid-item item114">Fl</div>
    <div class="grid-item item115">Mc</div>
    <div class="grid-item item116">Lv</div>
    <div class="grid-item item117">Ts</div>
    <div class="grid-item item118">Og</div>

    <div class="grid-item item57">La</div>
    <div class="grid-item item58">Ce</div>
    <div class="grid-item item59">Pr</div>
    <div class="grid-item item60">Nd</div>
    <div class="grid-item item61">Pm</div>
    <div class="grid-item item62">Sm</div>
    <div class="grid-item item63">Eu</div>
    <div class="grid-item item64">Gd</div>
    <div class="grid-item item65">Tb</div>
    <div class="grid-item item66">Dy</div>
    <div class="grid-item item67">Ho</div>
    <div class="grid-item item68">Er</div>
    <div class="grid-item item69">Tm</div>
    <div class="grid-item item70">Yb</div>
    <div class="grid-item item71">Lu</div>

    <div class="grid-item item89">Ac</div>
    <div class="grid-item item90">Th</div>
    <div class="grid-item item91">Pa</div>
    <div class="grid-item item92">U</div>
    <div class="grid-item item93">Np</div>
    <div class="grid-item item94">Pu</div>
    <div class="grid-item item95">Am</div>
    <div class="grid-item item96">Cm</div>
    <div class="grid-item item97">Bk</div>
    <div class="grid-item item98">Cf</div>
    <div class="grid-item item99">Es</div>
    <div class="grid-item item100">Fm</div>
    <div class="grid-item item101">Md</div>
    <div class="grid-item item102">No</div>
    <div class="grid-item item103">Lr</div>

3. Create a toggle button to toggle between light & dark mode. OPTIONAL.

<div class="modeChanger">
  <button id="modeButton" onclick="modeChange()"></button>

4. Create a toggle button to toggle between light & dark mode. OPTIONAL.

<div class="modeChanger">
  <button id="modeButton" onclick="modeChange()"></button>

5. The main JavaScript to fetch data from info.json and determine which chemical properties should display.

window.onload = data();
function data(){
  var url = "./assets/info.json";
  method: "GET",
  cache: false,
  url: url,
  success: function(data) {
    window.onmouseover=function(e) {
      var x =;
      var res = x.replace("grid-item item", "");
        this.document.getElementById("name").innerHTML = data.elements[res-1].name;
        this.document.getElementById("atomicNum").innerHTML = data.elements[res-1].number;
        this.document.getElementById("atomicWeight").innerHTML = data.elements[res-1].atomic_mass;
        this.document.getElementById("eConfig").innerHTML = data.elements[res-1].electron_configuration;
        this.document.getElementById("category").innerHTML = data.elements[res-1].category;
        var scientist = data.elements[res-1].discovered_by;
          this.document.getElementById("discoveredBy").innerHTML = "Discovery: " + data.elements[res-1].discovered_by;
          this.document.getElementById("discoveredBy").innerHTML = "";
  error: function(error) {  

6. The JavaScript to enable the Light/Dark mode toggle button.

function modeChange(){
  document.body.className = document.body.className == "dark" ? "light" : "dark";

This awesome jQuery plugin is developed by virtualracer. For more Advanced Usages, please check the demo page or visit the official website.