added corresponding theme values, minor css and code fixes

atoms/index.css

@@ -66,6 +66,12 @@ p {
 	box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.2);
 }
 
+.atomvalue  {
+	font-size: 65%;
+	margin: 0;
+	padding: 0;
+}
+
 .oxid {
 	margin: 0;
 	display: inline-block;
@@ -246,8 +252,7 @@ img {
 }
 
 .tabletitle {
-	margin-left:25%;
+	text-align: center;
-
 }
 
 .key {
@@ -296,7 +301,7 @@ img {
 
 .minlegend {
 	position: relative;
-	right:10%;
+	right:3%;
 	bottom:10;
 }
 
@@ -304,7 +309,6 @@ img {
 	position: relative;
 	left: 43%;
 	bottom:50;
-
 }
 
 .normal {

atoms/js/atom.js

@@ -55,7 +55,7 @@ function tableDesc() {
 				if(i == 8 || i == 9) { // If data type is melting or boiling
 					if(info[p[i]][settings["unit"]][index] !== null) {
 						// Get prefix ex. Melting: + actual value + unit
-						changeText(p[i],prefix[i] + info[p[i]][settings["unit"]][index] + " " + settings["unit"]);
+						changeText(p[i],prefix[i] + info[p[i]][settings["unit"]][index] + "° " + settings["unit"]);
 					} else { // If null
 						changeText(p[i],prefix[i] + "Unknown"); // Make unknown
 					}

atoms/js/onload.js

@@ -33,7 +33,11 @@ function createTable() {
     	ele.appendChild(text);
     	cells[info["location"][i]].appendChild(ele);
     	text = document.createTextNode(info["shorthand"][i]);
+    	value = document.createElement("p");
+    	value.appendChild(document.createTextNode(""));
+    	value.className = "atomvalue";
     	cells[info["location"][i]].appendChild(text);
+    	cells[info["location"][i]].appendChild(value);
     	cells[info["location"][i]].className = cells[info["location"][i]].className +" atom"; // Adds class to prevent hover animation on blank cells
     }
 }
@@ -72,7 +76,7 @@ function keyLegend() {
 
 function createGradientLegend() {
 
-	var units = [""," pm"," g/mol", " kJ/mol"," kJ/mol", " eV", "", " g/mL", "",""];
+	var units = [""," pm"," g/mol", " kJ/mol"," kJ/mol", " eV", " g/mL", "", ""];
 
 	// Create Table element
 	var tbl = document.createElement('table');
@@ -142,7 +146,7 @@ function createGradientLegend() {
 	var title = document.createElement("h1");
 	title.className = "tabletitle";
 	if (units[index] != "") {
-			var end = choicesDisplay[1][index] + " (" + units[index] + ")";
+			var end = choicesDisplay[1][index] + " (" + units[index] + " )";
 		} else {
 			var end = choicesDisplay[1][index];
 		}

atoms/js/update.js

@@ -24,10 +24,23 @@ function tableTheme(theme) {
 	for(var i = 0;i < elementCount;i++) {
 		// Changes background color of each cell
 		if (document.getElementsByClassName("periodictable").length != 0) {
-			document.getElementsByClassName("periodictable")[info["location"][i]].style.backgroundColor = getColor(theme, i);
+			var index = get("periodictable")[info["location"][i]];
+			index.style.backgroundColor = getColor(theme, i);
+
+			if(theme == "category") {
+				index.childNodes[2].childNodes[0].nodeValue = "";
+			} else if(theme ==  "melting" || theme == "boiling") {
+				temperatureValue = info[theme][settings["unit"]][i];
+				if(temperatureValue != null) {
+					index.childNodes[2].childNodes[0].nodeValue = temperatureValue + "°";	
+				}
+
+			} else {
+				index.childNodes[2].childNodes[0].nodeValue = info[theme][i];
+			}		
 		}
 	}
-	try {lastElement.click();} catch(err){}
+	try {lastElement.click();} catch(err){} // Last selection still selected when changing themes
 }
 
 function keyChange(theme) {
@@ -66,23 +79,23 @@ function keyChange(theme) {
 }
 
 function legendChange(theme) {
-	var units = [""," pm"," g/mol", " kJ/mol"," kJ/mol", " eV", "", " g/mL", "",""];
+	var units = [""," pm"," g/mol", " kJ/mol"," kJ/mol", " eV", " g/mL", "", ""];
 
 	// Title
-	if (document.getElementsByClassName("tabletitle").length != 0) {
+	if (get("tabletitle").length != 0) {
 		var index = choices[1].indexOf(theme);
 		if (units[index] != "") {
-			var end = choicesDisplay[1][index] + " (" + units[index] + ")";
+			var end = choicesDisplay[1][index] + " (" + units[index] + " )";
 		} else {
 			var end = choicesDisplay[1][index];
 		}
-		document.getElementsByClassName("tabletitle")[0].innerHTML = end;
+		get("tabletitle").innerHTML = end;
 	}
 
 	if (colorChart[theme].length != 2) {
-		document.getElementsByClassName("legendholder")[0].style.display = "none";
+		get("legendholder").style.display = "none";
 	} else {
-		document.getElementsByClassName("legendholder")[0].style.display = "";
+		get("legendholder").style.display = "";
 		var color1 = colorChart[theme][0];
 		var color2 = colorChart[theme][1];
 
@@ -103,14 +116,14 @@ function legendChange(theme) {
 			var newmax = ranges[theme][1] + " " + units[index];
 		}
 
-		if (document.getElementsByClassName("legend").length != 0) {
+		if (get("legend").length != 0) {
 
 			for(var j = 0; j <= 99; j ++) {
-					document.getElementsByClassName("legendcell")[j].style.backgroundColor = gradientColor(color1, color2 , j/100);
+					get("legendcell")[j].style.backgroundColor = gradientColor(color1, color2 , j/100);
 			}
 
-			document.getElementsByClassName("minlegend")[0].innerHTML = newmin;
+			get("minlegend").innerHTML = newmin;
-			document.getElementsByClassName("maxlegend")[0].innerHTML = newmax;
+			get("maxlegend").innerHTML = newmax;
 		}
 	}
 }

atoms/resources/static/info.json

@@ -67,7 +67,7 @@
 				 20.45,19.816,null,13.51,14.78,15.1,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,
 				 null,null,null,null,null],
 	"melting": {
-		"K": [14.009985,0.95,453.65,1560,2348,3823,63.15,54.36,53.53,24.56,370.95,923,933.437,1687,317.3,388.36,171.65,
+		"K": [14.01,0.95,453.65,1560,2348,3823,63.15,54.36,53.53,24.56,370.95,923,933.437,1687,317.3,388.36,171.65,
 			  83.8,336.53,1115,1814,1941,2183,2180,1519,1811,1768,1728,1357.77,692.68,302.9146,1211.4,1090,494,265.95,
 			  115.79,312.46,1050,1799,2128,2750,2896,2430,2607,2237,1828.05,1234.93,594.22,429.75,505.08,903.78,722.66,
 			  386.85,161.4,301.59,1000,1193,1071,1208,1297,1315,1345,1095,1585,1629,1685,1734,1802,1818,1097,1936,2506,