Create A Periodic Table Of Elements Using jQuery & CSS Grid
| File Size: | 29.3 KB |
|---|---|
| Views Total: | 924 |
| 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.
