added equation balancer in tools tab

atoms/index.css

@@ -49,6 +49,10 @@ p {
 	margin-bottom: 1%;
 }
 
+input {
+	font-family: Oswald;
+}
+
 .periodictable {
 	color: #000;
 	width:50px;
@@ -203,6 +207,10 @@ img {
 	margin-top: 12%;
 }
 
+.third {
+	margin-top: 19%;
+}
+
 .sidebar {
 	position: absolute;
 	background-color: #e6f5ff;
@@ -230,6 +238,12 @@ img {
 	width: 20%;
 }
 
+.tools {
+	margin-left: -170%;
+	height: 100%;
+	width: 90%;
+}
+
 .atom {
 	cursor: pointer;
 }
@@ -445,6 +459,31 @@ img {
     animation: updown 1.3s infinite alternate ease;
 }
 
+#balancebutton {
+	width: 10%;
+	font-size: 175%;
+	margin-right: 3%;
+	padding: .5%;
+	text-align:center;
+	box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.2);
+
+	-webkit-transition: box-shadow 0.3s ease;
+	-moz-transition: box-shadow 0.3s ease;
+	-ms-transition: box-shadow 0.3s ease; 
+	transition: box-shadow 0.3s ease;
+}
+
+#balancebutton:hover {
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
+}
+
+.balanceout {
+	text-align: center;
+	width: 15%;
+	height: 4%;
+	font-size: 110%;
+}
+
 @-webkit-keyframes updown {
     0% { transform: translateY(0px); }
     100% { transform: translateY(-4px); }

atoms/index.html

@@ -17,6 +17,7 @@
 				<div class="legendholder"></div>
 			</div>
 		</div>
+		
 		<div class="pulltab second"><p class="tDesc">Settings</p></div>
 		<div class="sidebar settings">
 			<i class="fa fa-close"></i>
@@ -54,6 +55,19 @@
 			</div>
 		</div>
 
+		<div class="pulltab third"><p class="tDesc">Tools</p></div>
+		<div class="sidebar tools">
+			<i class="fa fa-close"></i>
+			<form>
+				Reactants:
+				<input type="text" class="reactant">
+				Products:
+				<input type="test" class="product">
+			</form>
+			<p id="balancebutton">Balance!</p>
+			<div class="balanceholder"><input type="text" class="balanceout" readonly></div>
+		</div>
+		
 		<div class="workspace"></div>
 	</body>
 	<script type='text/javascript'> 

atoms/js/atom.js

@@ -55,7 +55,11 @@ 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"]);
+						if(settings["unit"] != "K") {
+							changeText(p[i],prefix[i] + info[p[i]][settings["unit"]][index] + "° " + settings["unit"]);
+						} else {
+							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/buttons.js

@@ -1,11 +1,15 @@
 get("pulltab")[0].onclick = function(){open(get("elements"));}
 get("pulltab")[1].onclick = function(){open(get("settings"));}
-get("fa")[0].onclick = function(){
+get("pulltab")[2].onclick = function(){open(get("tools"));}
+get("fa")[0].onclick = function() {
 	get("elements").style.marginLeft = "-150%";
 }
-get("fa")[1].onclick = function(){
+get("fa")[1].onclick = function() {
 	get("settings").style.marginLeft = "-40%";
 }
+get("fa")[2].onclick = function() {
+	get("tools").style.marginLeft = "-170%";
+}
 
 function open(dom) {
 	dom.style.marginLeft = "0%";
@@ -32,3 +36,22 @@ for(var i = 0; i < options.length; i++) {
 		}, 300);
 	}
 }
+
+get("balancebutton").onclick = function() {
+	//Invalid form handling
+	var reactants = get("reactant").value;
+	var products = get("products").value;
+	var reacNum = reactants.split("+").length-1;
+	var final = "";
+	var balanced = balanceEquation(get("reactant").value,get("product").value);
+
+	for(var i = 0; i < balanced.length; i++) {
+		if(i == reacNum) {
+			final += balanced[i] + " -> ";
+		} else {
+			final += balanced[i] + " + ";
+		}
+	}
+	final = final.substring(0,final.length-3);
+	get("balanceout").value = final;
+}

atoms/js/tools.js

@@ -138,3 +138,158 @@ function getRanges() {
         }           
     }
 }
+
+function balanceEquation(reactant, product) {
+    var compounds = [];
+    var vary = [];
+    var matrix = [];
+    var freeMatrix = [];
+    
+    // Create array from inputs.
+    formulaStr = reactant + "+" + product;
+    compounds = formulaStr.replace(/\s/g,"").split("+");
+    
+    // Create element matrix.
+    for(var i = 0; i < compounds.length; i++) {
+        var counter = 0;
+        var indexes = [];
+
+        currString = compounds[i];
+        compounds[i] = [compounds[i]];
+        
+        while(counter < currString.length) {
+            if(currString[counter] == currString[counter].toUpperCase() && isNaN(currString[counter])) {
+                indexes.push(counter);  
+            }
+            counter += 1;
+        }
+
+        indexes.push(currString.length);
+        
+        for(var j = 0; j < indexes.length-1; j++) {
+            element = currString.substring(indexes[j],indexes[j+1]);
+            elementNoNum = element.replace(/[0-9]/g,"");
+
+            if(vary.indexOf(elementNoNum) == -1) {
+                vary.push(elementNoNum);
+            }
+
+            if(element.search(/[0-9]/g) != -1) {
+                compounds[i].push([elementNoNum,parseInt(element.replace(/\D/g,""))]);
+            } else {
+                compounds[i].push([elementNoNum,1]);
+            }
+        }      
+    }
+    
+    for(var x = 0; x < vary.length; x++) {
+        matrix[x] = [];
+        for(var y = 0; y < compounds.length; y++) {
+            var pushed = false;
+            for(var z = 1; z < compounds[y].length; z++) {
+                if(compounds[y][z][0] == vary[x]) {
+                    matrix[x].push(compounds[y][z][1]);
+                    pushed = true;
+                    break;
+                }
+            }
+            if(!pushed) {
+                matrix[x].push(0);
+            }
+        }
+    }
+
+    // Get Reduced Row Echelon Form.
+    var lead = 0;
+    var rows = matrix.length;
+    var columns = matrix[0].length;
+            
+    for(var a = 0; a < rows; a++) {
+        var breakOut = false;
+        if(columns <= lead) {
+            break;
+        }
+        var e = a;
+        while(matrix[e][lead] === 0) {
+            e++;
+            if(rows == e) {
+                e = a;
+                lead++;
+                if(columns == lead) {
+                    breakOut = true;
+                    break;
+                }
+            }
+        }
+        
+        if(breakOut) break;
+        
+        var tmp = matrix[e];
+        matrix[e] = matrix[a];
+        matrix[a] = tmp;
+
+        var val = matrix[a][lead];
+        for(var b = 0; b < columns; b++) {
+            matrix[a][b] /= val;
+        }
+        
+        for(var c = 0; c < rows; c++) {
+            if (c == a) continue;
+            val = matrix[c][lead];
+            for(var d = 0; d < columns; d++) {
+                matrix[c][d] -= val * matrix[a][d];
+            }
+        }
+        lead++;
+         
+    }
+    
+    // Extract free matrix.
+    for(var f = 0; f < matrix.length-1; f++) {
+        freeMatrix.push(matrix[f][matrix[f].length-1]);
+    }
+    freeMatrix.push(1);
+    
+    // Multiply all to integers.
+    var power = 1;
+    var testPow = 1;
+    
+    for(var g = 0; g < freeMatrix.length; g++) {
+        var testInt = freeMatrix[g] * Math.pow(10,testPow);     
+        while(!(testInt == parseInt(testInt))) {
+            testPow += 1;
+        }
+        if(testPow > power) {
+            power = testPow;
+        }
+    }
+    
+    for(var h = 0; h < freeMatrix.length; h++) {
+        freeMatrix[h] *= Math.pow(10,power);
+    }
+    
+    // Get GCD.
+    var gcd = freeMatrix[0];
+    
+    for(var u = 0; u < freeMatrix.length-2; u++) {
+        gcd = getGCD(gcd, freeMatrix[u+1]); 
+    }
+    
+    // Get final answers.
+    for(var w = 0; w < freeMatrix.length; w++) {
+        freeMatrix[w] /= gcd;
+        freeMatrix[w] = Math.abs(freeMatrix[w]);
+        if(freeMatrix[w] != 1) {
+            freeMatrix[w] += compounds[w][0]; 
+        } else {
+            freeMatrix[w] = compounds[w][0];
+        }
+    }
+    
+    return freeMatrix;
+}
+
+function getGCD(a,b) {
+    if(!b) return a;
+    return getGCD(b, a % b);
+}