Create A Periodic Table Of Elements Using jQuery & CSS Grid
File Size: | 29.3 KB |
---|---|
Views Total: | 885 |
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> <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> </div> </div>
3. Create a toggle button to toggle between light & dark mode. OPTIONAL.
<div class="modeChanger"> <button id="modeButton" onclick="modeChange()"></button> </div>
4. Create a toggle button to toggle between light & dark mode. OPTIONAL.
<div class="modeChanger"> <button id="modeButton" onclick="modeChange()"></button> </div>
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"; $.ajax({ method: "GET", cache: false, url: url, success: function(data) { window.onmouseover=function(e) { var x = e.target.className; var res = x.replace("grid-item item", ""); if(res>0&&res<119){ 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; if(scientist!=null) this.document.getElementById("discoveredBy").innerHTML = "Discovery: " + data.elements[res-1].discovered_by; else this.document.getElementById("discoveredBy").innerHTML = ""; } }; }, error: function(error) { console.log("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.