diff --git a/index.html b/index.html
index 4f5fa81..9b18a10 100644
--- a/index.html
+++ b/index.html
@@ -1,63 +1,65 @@
 <html>
-	<head>.
-		<title>
-			Logic simulator
-		</title>
-		<!-- Scripts -->
-			<!-- jquery -->
-			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-		
-		<!-- Latest compiled and minified CSS -->
-		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-		<!-- Optional theme --
+
+<head>.
+    <title>
+        Logic simulator
+    </title>
+    <!-- Scripts -->
+    <!-- jquery -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <!-- Optional theme --
 		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 		!--Latest compiled and minified JavaScript -->
-		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-	</head>
-	<body id="body">
-		<svg height = "100%" width = "100%" id = "svg1" viewbox = "0 0 700 700">
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+</head>
+
+<body id="body">
+    <svg height="100%" width="100%" id="svg1" viewbox="0 0 700 700">
 		</svg>
-		
-		<!--And-->
-		<script src="scripts/and_gate.js"></script>
-		<!--Pin-->
-		<script src="scripts/pins.js"></script>
-		<!--Edges-->
-		<script src="scripts/edges.js"></script>
-		<!--Button-->
-		<script src="scripts/but.js"></script>
-		<!--light bulb-->
-		<script src="scripts/light.js"></script>
-		<!--or-->
-		<script src="scripts/or.js"></script>
-		<!--or-->
-		<script src="scripts/text.js"></script>
-		<!--not-->
-		<script src="scripts/not.js"></script>
-		<!--buffer-->
-		<script src="scripts/buffer.js"></script>
-		<!--nand-->
-		<script src="scripts/nand.js"></script>
-		<!--nand with 3 inputs-->
-		<script src="scripts/nand3.js"></script>
-		<!--xor-->
-		<script src="scripts/xor.js"></script>
-		<!--zoom-->
-		<script src="scripts/events.js"></script>
-		<!--Main-->
-		<script src="scripts/main.js"></script>
-		
-		
-		<div class = "modal fade" id = "addel">
-			<div class = "modal-dialog">
-				<div class = "modal-content">
-					<div class = "modal-header">
-						<p>
-							Add a piece!
-						</p>
-					</div>
-					<div class = "modal-body">
-						<select id="sel">
+
+    <!--And-->
+    <script src="scripts/and_gate.js"></script>
+    <!--Pin-->
+    <script src="scripts/pins.js"></script>
+    <!--Edges-->
+    <script src="scripts/edges.js"></script>
+    <!--Button-->
+    <script src="scripts/but.js"></script>
+    <!--light bulb-->
+    <script src="scripts/light.js"></script>
+    <!--or-->
+    <script src="scripts/or.js"></script>
+    <!--or-->
+    <script src="scripts/text.js"></script>
+    <!--not-->
+    <script src="scripts/not.js"></script>
+    <!--buffer-->
+    <script src="scripts/buffer.js"></script>
+    <!--nand-->
+    <script src="scripts/nand.js"></script>
+    <!--nand with 3 inputs-->
+    <script src="scripts/nand3.js"></script>
+    <!--xor-->
+    <script src="scripts/xor.js"></script>
+    <!--zoom-->
+    <script src="scripts/events.js"></script>
+    <!--Main-->
+    <script src="scripts/main.js"></script>
+
+
+    <div class="modal fade" id="addel">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <p>
+                        Add a piece!
+                    </p>
+                </div>
+                <div class="modal-body">
+                    <select id="sel">
 							<option value = "not">Not gate</option>
 							<option value = "light">Light bulb</option>
 							<option value = "but">Button</option>
@@ -67,30 +69,18 @@
 							<option value = "nand">Nand gate</option>
 							<option value = "nand3">Nand gate (3 inputs)</option>
 							<option value = "xor">Xor gate</option>
-						</select>
-						Quantity:
-						<input id = "times" type = "number">
-					</div>
-					<div class = "modal-footer">
-						<button type="button" onclick = '$("#addel").modal("hide"); addel();' class="btn btn-primmary" id = "done">
+						</select> Quantity:
+                    <input id="times" type="number">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" onclick='$("#addel").modal("hide"); addel();' class="btn btn-primmary" id="done">
 							Add!!!
 						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-		<link href="st.css" rel="Stylesheet" type="text/css" />
-	</body>
-</html>
-
-
-
-
-
-
-
-
-
-
-
+                </div>
+            </div>
+        </div>
+    </div>
+    <link href="st.css" rel="Stylesheet" type="text/css" />
+</body>
 
+</html>
\ No newline at end of file
diff --git a/scripts/and_gate.js b/scripts/and_gate.js
index 0457d55..6229082 100644
--- a/scripts/and_gate.js
+++ b/scripts/and_gate.js
@@ -1,104 +1,87 @@
 console.log("and");
-function and(id){
-	this.id = id;
-	this.rep = add(80,80,"blue","black",this.id,false);
-	this.pin1 = new pin(0);
-	this.pin2 = new pin(0);
-	this.o = new pin(1);
-	this.o.nei = this;
-	this.activation = function(){
-		if (this.pin1.val && this.pin2.val){
-			return true;
-		}
-		return false;
-	}
-	
-	this.x = function(){
-		let name = "#" + this.id;
-		return parseFloat($(name).attr("x"));
-	}
-	
-	this.y = function(){
-		let name = "#" + this.id;
-		//console.log("y"+parseFloat($(name).attr("y")));
-		return parseFloat($(name).attr("y"));
-	}
-	
-	//design
-	var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-	$(g).attr({
-        width: "100%",
-        height: "100%"
-    });
-	var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
+
+class and {
+    constructor(id) {
+        this.id = id;
+        this.rep = add(80, 80, "blue", "black", this.id, false);
+        this.pin1 = new pin(0);
+        this.pin2 = new pin(0);
+        this.o = new pin(1);
+        this.o.nei = this;
+        this.activation = function() {
+            if (this.pin1.val && this.pin2.val) {
+                return true;
+            }
+            return false;
+        };
+        this.x = function() {
+            let name = "#" + this.id;
+            return parseFloat($(name).attr("x"));
+        };
+        this.y = function() {
+            let name = "#" + this.id;
+            //console.log("y"+parseFloat($(name).attr("y")));
+            return parseFloat($(name).attr("y"));
+        };
+        //design
+        let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        $(g).attr({
+            width: "100%",
+            height: "100%"
+        });
+        let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
             x: "50",
             y: "50",
-            id: (id+"-skin"),
-			width:"80",
-			height:"80"
+            id: (id + "-skin"),
+            width: "80",
+            height: "80"
         });
-	var img = $(document.createElement('img')).attr({
-        height:"72",
-		width:"72",
-        src:"textures/gates/and_gate.jpg"
+        let img = $(document.createElement('img')).attr({
+            height: "72",
+            width: "72",
+            src: "textures/gates/and_gate.jpg"
+        });
+        let iDiv = document.createElement("div");
+        $(iDiv).append(img);
+        this.skin = skin;
+        this.img = img;
+        $(skin).append(iDiv);
+        //noname(this);
+        $(g).append(skin);
+        let elem = document.getElementById("svg1");
+        elem.appendChild(g);
+        //updating
+        this.update = function() {
+            //the main object and his pins
+            let x = this.x();
+            let y = this.y();
+            this.pin1.set(x - 20, y);
+            this.pin2.set(x - 20, y + 60);
+            this.o.set(x + 80, y + 30);
+            //and the skin
+            let name = "#" + this.id + "-skin";
+            let skin = $(name);
+            skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
+            skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
+        };
+        pieces[pieces.length] = this;
+        addclk(this);
+    }
+}
+
+function addclk(ob) {
+
+    $((ob.img)).on("mousedown touchstart", function(e) {
+        e.preventDefault();
+        let svg = document.getElementById("svg1");
+        $(svg).append(ob.rep);
+        $(svg).append($(ob.pin1.rep));
+        $(svg).append($(ob.pin2.rep));
+        $(svg).append($(ob.o.rep));
+        $(svg).append($(ob.skin));
+        selected = ob.id;
     });
-	var iDiv = document.createElement("div");
-	$(iDiv).append(img);
-	this.skin = skin;
-	this.img = img;
-	$(skin).append(iDiv);
-	//noname(this);
-	$(g).append(skin);
-    var elem = document.getElementById("svg1");
-    elem.appendChild(g);
-	
-	//updating
-	this.update = function(){
-		//the main object and his pins
-		let x = this.x();
-		let y = this.y();
-		this.pin1.set(x-20,y);
-		this.pin2.set(x-20,y+60);
-		this.o.set(x+80,y+30);
-		
-		//and the skin
-		var name = "#"+this.id+"-skin";
-		var skin = $(name);
-		skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
-		skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
-	}
-	pieces[pieces.length] = this;
-	
-	
-	addclk(this);
-}
-
-function addclk(ob){
-	var rep = ob.rep;
-	$((ob.img)).on("mousedown touchstart",function(e){
-		e.preventDefault();
-		var svg = document.getElementById("svg1");
-		$(svg).append(ob.rep);
-		$(svg).append($(ob.pin1.rep));
-		$(svg).append($(ob.pin2.rep));
-		$(svg).append($(ob.o.rep));
-		$(svg).append($(ob.skin));
-		selected = ob.id;
-	});
-	$((ob.img)).on("mouseup touchend",function(e){
-		selected = "yay";
-	});
-}
-/*
-function noname(ob){
-	$((ob.img)).on("mousedown touchstart",function(e){
-		selected = ob.id;
-		console.log("Clicked!!!");
-	});
-	$((ob.img)).on("mouseup touchend",function(e){
-		selected = "yay";
-	});
-}
-*/
-
-
+    $((ob.img)).on("mouseup touchend", function() {
+        selected = "yay";
+    });
+}
\ No newline at end of file
diff --git a/scripts/buffer.js b/scripts/buffer.js
index d9b600b..409faac 100644
--- a/scripts/buffer.js
+++ b/scripts/buffer.js
@@ -1,72 +1,72 @@
-function buffer(id){
-	this.id = id;
-	this.name = "#" + this.id;
-	this.rep = add(80,80,"green","black",this.id,true);
-	this.pin1 = new pin(0);
-	this.o = new pin(1);
-	this.o.nei = this;
-	//this.text = new text(this,"Or-gate");
-	this.activation = function(){
-		if (this.pin1.val){
-			return true;
-		}
-		return false;
-	}
-	
-	this.x = function(){
-		let name = "#" + this.id;
-		return parseFloat($(name).attr("x"));
-	}
-	
-	this.y = function(){
-		let name = "#" + this.id;
-		//console.log("y"+parseFloat($(name).attr("y")));
-		return parseFloat($(name).attr("y"));
-	}
-	
-	//design
-	var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-	$(g).attr({
+function buffer(id) {
+    this.id = id;
+    this.name = "#" + this.id;
+    this.rep = add(80, 80, "green", "black", this.id, true);
+    this.pin1 = new pin(0);
+    this.o = new pin(1);
+    this.o.nei = this;
+    //this.text = new text(this,"Or-gate");
+    this.activation = function() {
+        if (this.pin1.val) {
+            return true;
+        }
+        return false;
+    }
+
+    this.x = function() {
+        let name = "#" + this.id;
+        return parseFloat($(name).attr("x"));
+    }
+
+    this.y = function() {
+        let name = "#" + this.id;
+        //console.log("y"+parseFloat($(name).attr("y")));
+        return parseFloat($(name).attr("y"));
+    }
+
+    //design
+    let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    $(g).attr({
         width: "100%",
         height: "100%"
     });
-	var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
-            x: "50",
-            y: "50",
-            id: (id+"-skin"),
-			width:"80",
-			height:"80"
-        });
-	var img = $(document.createElement('img')).attr({
-        height:"80",
-		width:"80",
-        src:"textures/gates/buffer_gate.jpg"
+    let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
+        x: "50",
+        y: "50",
+        id: (id + "-skin"),
+        width: "80",
+        height: "80"
     });
-	var iDiv = document.createElement("div");
-	$(iDiv).append(img);
-	this.skin = skin;
-	this.img = img;
-	$(skin).append(iDiv);
-	//noname(this);
-	$(g).append(skin);
-    var elem = document.getElementById("svg1");
+    let img = $(document.createElement('img')).attr({
+        height: "80",
+        width: "80",
+        src: "textures/gates/buffer_gate.jpg"
+    });
+    let iDiv = document.createElement("div");
+    $(iDiv).append(img);
+    this.skin = skin;
+    this.img = img;
+    $(skin).append(iDiv);
+    //noname(this);
+    $(g).append(skin);
+    let elem = document.getElementById("svg1");
     elem.appendChild(g);
-	
-	//updating
-	this.update = function(){
-		//the main object and his pins
-		let x = this.x();
-		let y = this.y();
-		this.pin1.set(x-20,y+30);
-		this.o.set(x+80,y+30);
-		
-		//and the skin
-		var name = "#"+this.id+"-skin";
-		var skin = $(name);
-		skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
-		skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
-	}
-	pieces[pieces.length] = this;
-	
-	addclk11(this);
+
+    //updating
+    this.update = function() {
+        //the main object and his pins
+        let x = this.x();
+        let y = this.y();
+        this.pin1.set(x - 20, y + 30);
+        this.o.set(x + 80, y + 30);
+
+        //and the skin
+        let name = "#" + this.id + "-skin";
+        let skin = $(name);
+        skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
+        skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
+    }
+    pieces[pieces.length] = this;
+
+    addclk11(this);
 }
\ No newline at end of file
diff --git a/scripts/but.js b/scripts/but.js
index d66bfbb..b4ff252 100644
--- a/scripts/but.js
+++ b/scripts/but.js
@@ -1,79 +1,63 @@
 console.log("nut");
-function but(id){
-	this.wait = true;
-	this.id = id;
-	this.rep = add(80,80,"orange","black",this.id,true);
-	this.o = new pin(1);
-	this.val = false;
-	addevt(this);
-	$((this.rep)).attr("stroke-width",4);
-	$((this.rep)).attr("stroke","black");
-	this.o.nei = this;
-	this.activation = function(){
-		return this.val;
-	}
-	
-	this.x = function(){
-		let name = "#" + this.id;
-		return parseFloat($(name).attr("x"));
-	}
-	
-	this.y = function(){
-		let name = "#" + this.id;
-		//console.log("y"+parseFloat($(name).attr("y")));
-		return parseFloat($(name).attr("y"));
-	}
-	
-	//design
-	this.init = function(){
-		return 0;
-	}
-	
-	this.update = function(){
-		let x = this.x();
-		let y = this.y();
-		this.o.set(x+80,y+30);
-	}
-	pieces[pieces.length] = this;
-}
-function addevt(ob){
-	/*
-	$((ob.rep)).on("click touchstart",function(){
-		ob.val = (ob.val+1)%2;
-		if (ob.val){
-			$((ob.rep)).attr("fill","red");
-		}
-		else{
-			$((ob.rep)).attr("fill","orange");
-		}
-	});
-	*/
-	
-	$((ob.rep)).on("mousedown touchstart",function(e){
-		var svg = document.getElementById("svg1");
-		$(svg).append(ob.rep);
-		$(svg).append($(ob.o.rep));
-		selected = ob.id;
-		e.preventDefault();
-		if (ob.wait){
-			ob.val = (ob.val+1)%2;
-			if (ob.val){
-				$((ob.rep)).attr("fill","red");
-			}
-			else{
-				$((ob.rep)).attr("fill","orange");
-			}
-			ob.wait = false;
-		}
-	});
-	$((ob.rep)).on("mouseup touchend",function(e){
-		selected = "yay";
-		ob.wait = true;
-	});
+
+function but(id) {
+    this.wait = true;
+    this.id = id;
+    this.rep = add(80, 80, "orange", "black", this.id, true);
+    this.o = new pin(1);
+    this.val = false;
+    addevt(this);
+    $((this.rep)).attr("stroke-width", 4);
+    $((this.rep)).attr("stroke", "black");
+    this.o.nei = this;
+    this.activation = function() {
+        return this.val;
+    }
+
+    this.x = function() {
+        let name = "#" + this.id;
+        return parseFloat($(name).attr("x"));
+    }
+
+    this.y = function() {
+        let name = "#" + this.id;
+        //console.log("y"+parseFloat($(name).attr("y")));
+        return parseFloat($(name).attr("y"));
+    }
+
+    //design
+    this.init = function() {
+        return 0;
+    }
+
+    this.update = function() {
+        let x = this.x();
+        let y = this.y();
+        this.o.set(x + 80, y + 30);
+    }
+    pieces[pieces.length] = this;
 }
 
+function addevt(ob) {
 
-
-
-
-
+    $((ob.rep)).on("mousedown touchstart", function(e) {
+        let svg = document.getElementById("svg1");
+        $(svg).append(ob.rep);
+        $(svg).append($(ob.o.rep));
+        selected = ob.id;
+        e.preventDefault();
+        if (ob.wait) {
+            ob.val = (ob.val + 1) % 2;
+            if (ob.val) {
+                $((ob.rep)).attr("fill", "red");
+            } else {
+                $((ob.rep)).attr("fill", "orange");
+            }
+            ob.wait = false;
+        }
+    });
+    $((ob.rep)).on("mouseup touchend", function() {
+        selected = "yay";
+        ob.wait = true;
+    });
+}
\ No newline at end of file
diff --git a/scripts/edges.js b/scripts/edges.js
index 329ba50..034724a 100644
--- a/scripts/edges.js
+++ b/scripts/edges.js
@@ -1,95 +1,91 @@
-var l_count = 0;
-var lines = [];
+let l_count = 0;
+let lines = [];
 console.log("started2");
-function edge(start,end){
-	this.id = l_count.toString()+"line";
-	l_count++;
-	this.start = start;
-	this.end = end;
-	console.log(start+end);
-	
-	console.log(this.end);
-	console.log(this.start);
-	
-	lines[lines.length] = this;
-	
-	var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-	$(g).attr({
+
+function edge(start, end) {
+    this.id = l_count.toString() + "line";
+    l_count++;
+    this.start = start;
+    this.end = end;
+    console.log(start + end);
+
+    console.log(this.end);
+    console.log(this.start);
+
+    lines[lines.length] = this;
+
+    let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    $(g).attr({
         width: "100%",
         height: "100%"
     });
-	var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'line')).attr({
+    let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'line')).attr({
         x1: "50",
-        y1:"50",
-		x2:"55",
-		y2:"55",
+        y1: "50",
+        x2: "55",
+        y2: "55",
         id: this.id,
-        fill:"yellow",
-		stroke: "black"
+        fill: "yellow",
+        stroke: "black"
     });
-	$(el).attr("stroke-width","2");
-	$(g).append(el);
-	var elem = document.getElementById("svg1");
+    $(el).attr("stroke-width", "2");
+    $(g).append(el);
+    let elem = document.getElementById("svg1");
     elem.appendChild(g);
-	
-	//console.log("succes"+lines);
-	
-	this.rep = el;
-	this.name = "#"+this.id;
-	
-	this.update = function(){
-		let adr = this.start.name;
-		let temp = $(adr).attr("x");
-		let n = this.name;
-		//console.log("updating"+adr+temp+n);
-		temp = (parseFloat(temp)).toString();
-		$(n).attr("x1",temp);
-		temp = $(adr).attr("y");
-		temp = (parseFloat(temp)+10).toString();
-		$(n).attr("y1",temp);
-		adr = this.end.name;
-		temp = $(adr).attr("x");
-		temp = (parseFloat(temp)+20).toString();
-		$(n).attr("x2",temp);
-		temp = $(adr).attr("y");
-		temp = (parseFloat(temp)+10).toString();
-		$(n).attr("y2",temp);
-		
-		//and the color based on the state
-		if (this.start.val){
-			$((this.rep)).attr("stroke","yellow");
-		}
-		else{
-			$((this.rep)).attr("stroke","black");
-		}
-	}
-	
-	
-	rem_edge(this);
+
+    //console.log("succes"+lines);
+
+    this.rep = el;
+    this.name = "#" + this.id;
+
+    this.update = function() {
+        let adr = this.start.name;
+        let temp = $(adr).attr("x");
+        let n = this.name;
+        //console.log("updating"+adr+temp+n);
+        temp = (parseFloat(temp)).toString();
+        $(n).attr("x1", temp);
+        temp = $(adr).attr("y");
+        temp = (parseFloat(temp) + 10).toString();
+        $(n).attr("y1", temp);
+        adr = this.end.name;
+        temp = $(adr).attr("x");
+        temp = (parseFloat(temp) + 20).toString();
+        $(n).attr("x2", temp);
+        temp = $(adr).attr("y");
+        temp = (parseFloat(temp) + 10).toString();
+        $(n).attr("y2", temp);
+
+        //and the color based on the state
+        if (this.start.val) {
+            $((this.rep)).attr("stroke", "yellow");
+        } else {
+            $((this.rep)).attr("stroke", "black");
+        }
+    }
+
+
+    rem_edge(this);
 }
 
-function rem_edge(ob){
-	$((ob.rep)).on("click touchstart",function(e){
-		e.preventDefault();
-		//removing the edge from the array
-		for (var i = 0; i < lines.length; i++) {
-			if (lines[i] == (ob.id)) {
-				lines.splice(i, 1);
-			}
-		}
-		
-		//removing the visual
-		$((ob.rep)).remove();
-		
-		//fixing the actual start and end pins
-		ob.start.nei = "yay";
-		ob.start.val = false;
-		ob.start.state = true;
-		ob.end.val = false;
-		ob.end.state = true;
-	});
-}
-
-
+function rem_edge(ob) {
+    $((ob.rep)).on("click touchstart", function(e) {
+        e.preventDefault();
+        //removing the edge from the array
+        for (let i = 0; i < lines.length; i++) {
+            if (lines[i] == (ob.id)) {
+                lines.splice(i, 1);
+            }
+        }
 
+        //removing the visual
+        $((ob.rep)).remove();
 
+        //fixing the actual start and end pins
+        ob.start.nei = "yay";
+        ob.start.val = false;
+        ob.start.state = true;
+        ob.end.val = false;
+        ob.end.state = true;
+    });
+}
\ No newline at end of file
diff --git a/scripts/events.js b/scripts/events.js
index cca3b72..97087f9 100644
--- a/scripts/events.js
+++ b/scripts/events.js
@@ -1,118 +1,102 @@
 window.addEventListener("keydown", function(e) {
     // space and arrow keys
-    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
+    if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
         e.preventDefault();
     }
 }, false);
-var xvb = 0;
-var yvb=0;
-var zoomx = window.innerWidth;
-var zoomy = window.innerHeight;
+let xvb = 0;
+let yvb = 0;
+let zoomx = window.innerWidth;
+let zoomy = window.innerHeight;
 
 updatescr();
 
-function updatescr(){
-	if (zoomx < 51){
-		zoomx += 50;
-	}
-	if (zoomy < 51){
-		zoomy += 50;
-	}
-	let newname = xvb.toString() + " " + yvb.toString() + " " + zoomx.toString() + " " + zoomy.toString();
-	$("#svg1").removeAttr("viewBox");
-	$("#svg1").each(function(){$(this)[0].setAttribute("viewBox",newname)});
+function updatescr() {
+    if (zoomx < 51) {
+        zoomx += 50;
+    }
+    if (zoomy < 51) {
+        zoomy += 50;
+    }
+    let newname = xvb.toString() + " " + yvb.toString() + " " + zoomx.toString() + " " + zoomy.toString();
+    $("#svg1").removeAttr("viewBox");
+    $("#svg1").each(function() { $(this)[0].setAttribute("viewBox", newname) });
 }
-document.addEventListener("keydown",e=> {
-	if(e.keyCode == 40){
-		yvb += 10;
-		updatescr();
-	}
-	else if(e.keyCode == 39){
-		xvb += 10;
-		updatescr();
-	}
-	else if(e.keyCode == 38){
-		yvb -= 10;
-		updatescr();
-	}
-	else if(e.keyCode == 37){
-		xvb -= 10;
-		updatescr();
-	}
-	else if(e.keyCode == 187){
-		if (!(zoomx < 101)&&!(zoomy < 101)){
-			xvb += 25;
-			yvb += 25;
-		}
-		zoomx -= 50;
-		zoomy -= 50;
-		updatescr();
-	}
-	else if(e.keyCode == 189){
-		xvb -= 25;
-		yvb -= 25;
-		zoomx += 50;
-		zoomy += 50;
-		updatescr();
-	}
-},false);
+document.addEventListener("keydown", e => {
+    if (e.keyCode == 40) {
+        yvb += 10;
+        updatescr();
+    } else if (e.keyCode == 39) {
+        xvb += 10;
+        updatescr();
+    } else if (e.keyCode == 38) {
+        yvb -= 10;
+        updatescr();
+    } else if (e.keyCode == 37) {
+        xvb -= 10;
+        updatescr();
+    } else if (e.keyCode == 187) {
+        if (!(zoomx < 101) && !(zoomy < 101)) {
+            xvb += 25;
+            yvb += 25;
+        }
+        zoomx -= 50;
+        zoomy -= 50;
+        updatescr();
+    } else if (e.keyCode == 189) {
+        xvb -= 25;
+        yvb -= 25;
+        zoomx += 50;
+        zoomy += 50;
+        updatescr();
+    }
+}, false);
 
 
-var zooming  = false;
-var xbeg = 0;
-var ybeg = 0;
-var moveing = false;
+let zooming = false;
+let xbeg = 0;
+let ybeg = 0;
+let moveing = false;
 
-$("svg").on("mousemove touchmove",function(e){
-	if (moveing && selected == "yay"){
-		if (!(zooming)){
-			zooming = true;
-			
-			//setting our first mouse poitions
-			xbeg = e.pageX * zoomx/window.innerWidth;
-			ybeg = e.pageY * zoomy/window.innerHeight;
-			
-			xbeg += xvb;
-			ybeg += yvb;
-			console.log("started zooming"+xbeg+"and"+ybeg);
-			//moveing = (moveing +1)%2;
-		}
-		
-		var newx = e.pageX * zoomx/window.innerWidth;
-		var newy = e.pageY * zoomy/window.innerHeight;
-		
-		newx += xvb;
-		newy += yvb;
-		
-		xvb -= newx - xbeg;
-		yvb -= newy - ybeg;
-		updatescr();
-		
-		console.log(xvb+"newx"+newx+"xbeg"+xbeg);
-	}
+$("svg").on("mousemove touchmove", function(e) {
+    if (moveing && selected == "yay") {
+        if (!(zooming)) {
+            zooming = true;
+
+            //setting our first mouse poitions
+            xbeg = e.pageX * zoomx / window.innerWidth;
+            ybeg = e.pageY * zoomy / window.innerHeight;
+
+            xbeg += xvb;
+            ybeg += yvb;
+            console.log("started zooming" + xbeg + "and" + ybeg);
+            //moveing = (moveing +1)%2;
+        }
+
+        let newx = e.pageX * zoomx / window.innerWidth;
+        let newy = e.pageY * zoomy / window.innerHeight;
+
+        newx += xvb;
+        newy += yvb;
+
+        xvb -= newx - xbeg;
+        yvb -= newy - ybeg;
+        updatescr();
+
+        console.log(xvb + "newx" + newx + "xbeg" + xbeg);
+    }
 });
 
 
-$("svg").on("mousedown touchstart",function(e){
-	//e.preventDefault();
-	moveing = true;
+$("svg").on("mousedown touchstart", function() {
+    //e.preventDefault();
+    moveing = true;
 });
 
 
-$("svg").on("mouseup touchend",function(e){
-	e.preventDefault();
-	selected = "yay";
-	zooming = false;
-	moveing = false;
-});
-
-
-
-
-
-
-
-
-
-
-
+$("svg").on("mouseup touchend", function(e) {
+    e.preventDefault();
+    selected = "yay";
+    zooming = false;
+    moveing = false;
+});
\ No newline at end of file
diff --git a/scripts/light.js b/scripts/light.js
index a51630f..1c20bf6 100644
--- a/scripts/light.js
+++ b/scripts/light.js
@@ -1,84 +1,78 @@
 console.log("bulb");
-function light(id){
-	this.id = id;
-	var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-	$(g).attr({
+
+function light(id) {
+    this.id = id;
+    let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    $(g).attr({
         width: "100%",
         height: "100%"
     });
-	var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle')).attr({
+    let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle')).attr({
         cx: "50",
-        cy:"50",
-		r: "40",
+        cy: "50",
+        r: "40",
         id: this.id,
-        fill:"white",
-		stroke: "black"
+        fill: "white",
+        stroke: "black"
     });
-	$(el).attr("stroke-width","2");
-	$(el).attr("class","light");
-	$(g).append(el);
-	//$(el).attr("onmousedown","selected='"+this.id+"';");
-	$(el).attr("onmouseup","selected='yay';");
-	var elem = document.getElementById("svg1");
+    $(el).attr("stroke-width", "2");
+    $(el).attr("class", "light");
+    $(g).append(el);
+    //$(el).attr("onmousedown","selected='"+this.id+"';");
+    $(el).attr("onmouseup", "selected='yay';");
+    let elem = document.getElementById("svg1");
     elem.appendChild(g);
-	this.rep = el;
-	
-	this.i = new pin(0);
-	this.val = false;
-	//addevt(this);
-	$((this.rep)).attr("stroke-width",4);
-	
-	this.activation = function(){
-		return this.i.val;
-	}
-	
-	this.x = function(){
-		let name = "#" + this.id;
-		return parseFloat($(name).attr("cx"));
-	}
-	
-	this.y = function(){
-		let name = "#" + this.id;
-		//console.log("y"+parseFloat($(name).attr("y")));
-		return parseFloat($(name).attr("cy"));
-	}
-	
-	//design
-	this.init = function(){
-		return 0;
-	}
-	
-	this.update = function(){
-		if (this.i.val != "yay"){
-			if ((this.activation())){
-				$((this.rep)).attr("fill","yellow");
-			}
-			else{
-				$((this.rep)).attr("fill","white");
-			}
-		}
-		//console.log($((this.rep)).attr("fill"));
-		let x = this.x();
-		let y = this.y();
-		this.i.set(x-60,y-10);
-	}
-	pieces[pieces.length] = this;
-	
-	addclk_light(this);
+    this.rep = el;
+
+    this.i = new pin(0);
+    this.val = false;
+    //addevt(this);
+    $((this.rep)).attr("stroke-width", 4);
+
+    this.activation = function() {
+        return this.i.val;
+    }
+
+    this.x = function() {
+        let name = "#" + this.id;
+        return parseFloat($(name).attr("cx"));
+    }
+
+    this.y = function() {
+        let name = "#" + this.id;
+        //console.log("y"+parseFloat($(name).attr("y")));
+        return parseFloat($(name).attr("cy"));
+    }
+
+    //design
+    this.init = function() {
+        return 0;
+    }
+
+    this.update = function() {
+        if (this.i.val != "yay") {
+            if ((this.activation())) {
+                $((this.rep)).attr("fill", "yellow");
+            } else {
+                $((this.rep)).attr("fill", "white");
+            }
+        }
+        //console.log($((this.rep)).attr("fill"));
+        let x = this.x();
+        let y = this.y();
+        this.i.set(x - 60, y - 10);
+    }
+    pieces[pieces.length] = this;
+
+    addclk_light(this);
 }
 
-function addclk_light(ob){
-	var rep = ob.rep;
-	$(ob.rep).on("mousedown touchstart",function(e){
-		e.preventDefault();
-		var svg = document.getElementById("svg1");
-		$(svg).append(ob.rep);
-		$(svg).append($(ob.i.rep));
-		selected=ob.id;
-	});
-}
-
-
-
-
-
+function addclk_light(ob) {
+    $(ob.rep).on("mousedown touchstart", function(e) {
+        e.preventDefault();
+        let svg = document.getElementById("svg1");
+        $(svg).append(ob.rep);
+        $(svg).append($(ob.i.rep));
+        selected = ob.id;
+    });
+}
\ No newline at end of file
diff --git a/scripts/main.js b/scripts/main.js
index 02ec665..f50434a 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -6,63 +6,60 @@
 //====================first adding the modal=================================
 
 //order is used to generate new id's for components
-var order = 0;
-
-//selected indicates what is the last element the user clicked on
-var selecte="yay"
+let order = 0;
 
 //piece would contain all the components 
 //(without pins and edges)
 //we will use that array for updating the value and the position
-var pieces = [];
+let pieces = [];
 
-//this 'modal' variable is used to keep the blue box
+//this 'modal' letiable is used to keep the blue box
 //basically when you click on it the modal for adding components will pop
-var modal =  add(40,40,"blue","black","butt",false);
+let modal = add(40, 40, "blue", "black", "butt", false);
 
 //adding the event for clicking
-$(modal).on("mousedown touchstart",function(e){
-	
-	//showing the modal
-	//actually 'modal' is just the button
-	//and 'addel' is the true id of the modal from DOM
-	$("#addel").modal("show");
-	
-	//being sure we wont move the components
-	moveing = false;
-	
-	//activatng the drag and drop for the blue box
-	selected = "butt"; 
+$(modal).on("mousedown touchstart", function() {
+
+    //showing the modal
+    //actually 'modal' is just the button
+    //and 'addel' is the true id of the modal from DOM
+    $("#addel").modal("show");
+
+    //being sure we wont move the components
+    moveing = false;
+
+    //activatng the drag and drop for the blue box
+    selected = "butt";
 });
 
 //the event for finishing the drag and drop on the blue box
-$(modal).on("mouseup touchend",function(e){
-	//telling that we dont want to drag it anymore
-	selected = "yay"; 
+$(modal).on("mouseup touchend", function() {
+    //telling that we dont want to drag it anymore
+    selected = "yay";
 });
 
 //changing the positon of the blue box
 //we dont want it to be in the left top corner at 0 0
-$(modal).attr("y","500");
-$(modal).attr("x","500");
+$(modal).attr("y", "500");
+$(modal).attr("x", "500");
 
-//var desc = new text(modal,"+")
+//let desc = new text(modal,"+")
 
 
 //used for actually getting the new ids
-function getname(){
-	//getting the 'order'
-	//than making it bigger by 1
-	//convert it to string
-	//than add 'piece' to it for avoiding confusion between pieces and pins
-	return ((order++).toString()+"piece")
+function getname() {
+    //getting the 'order'
+    //than making it bigger by 1
+    //convert it to string
+    //than add 'piece' to it for avoiding confusion between pieces and pins
+    return ((order++).toString() + "piece")
 }
 
 //the function that fires when you tap 'add'
-function addel(){
-	for (var i = 0;i < parseFloat($("#times").val());i++){
-		var added =  eval("new "+$("#sel option:selected").attr("value")+"(getname())");
-	}
+function addel() {
+    for (let i = 0; i < parseFloat($("#times").val()); i++) {
+        let added = eval("new " + $("#sel option:selected").attr("value") + "(getname())");
+    }
 }
 
 
@@ -71,32 +68,32 @@ function addel(){
 //================================preventing deafult actions==========================
 
 //nothing to say here
-$("img,rect,circle,p,foreignObject").on("mousedown touchstart",function(e){
-	e.preventDefault();
+$("img,rect,circle,p,foreignObject").on("mousedown touchstart", function(e) {
+    e.preventDefault();
 });
-$("*").on("mouseup touchend",function(e){
-	e.preventDefault();
-	moveing = false;
+$("*").on("mouseup touchend", function(e) {
+    e.preventDefault();
+    moveing = false;
 });
-$("img").on("click touchstart",function(e){
-	e.preventDefault();
+$("img").on("click touchstart", function(e) {
+    e.preventDefault();
 });
 
 
 
-//===============================variables============================================
+//===============================letiables============================================
 
 //setting the drag and drop to our value
 //'yay' means 'nothing selected'
-var selected = "yay";
+let selected = "yay";
 
 //the first positios of the clicks
-var firstx = 0;
-var firsty = 0;
+let firstx = 0;
+let firsty = 0;
 
 //the first position of an element dragged
-var fx = 0;
-var fy = 0;
+let fx = 0;
+let fy = 0;
 
 //snap settings
 let snap = false;
@@ -105,40 +102,39 @@ let snap = false;
 
 //nothing to say here...
 //just some basic things
-$("body").on("mousemove touchmove",function(e){
-	//calling the drag function
-	drag(e,selected);
+$("body").on("mousemove touchmove", function(e) {
+    //calling the drag function
+    drag(e, selected);
 });
-$("body").on("mouseup touchend",function(e){
-	selected = "yay";
-	console.log("got a mouse up");
+$("body").on("mouseup touchend", function(e) {
+    selected = "yay";
+    console.log("got a mouse up");
 });
-$("body").on("mousedown touchstart",function(e){
-	//beeing sure that we actually want to drag something
-	if (selected!="yay"){
-		
-		//setting our first mouse poitions
-		firstx = e.pageX * zoomx/window.innerWidth;
-		firsty = e.pageY * zoomy/window.innerHeight;
-		
-		firstx += xvb;
-		firsty += yvb;
-		
-		//conveerting the id to an actual thing 
-		name = "#"+selected;
-		
-		//beeing sure we get the corect attributes
-		//circle have 'cx' and 'cy'
-		//and rectangles have 'x' and 'y'
-		if ($(name).attr("class")=="light"){
-			fx = parseFloat($(name).attr("cx"));
-			fy = parseFloat($(name).attr("cy"));
-		}
-		else{
-			fx = parseFloat($(name).attr("x"));
-			fy = parseFloat($(name).attr("y"));
-		}
-	}
+$("body").on("mousedown touchstart", function(e) {
+    //beeing sure that we actually want to drag something
+    if (selected != "yay") {
+
+        //setting our first mouse poitions
+        firstx = e.pageX * zoomx / window.innerWidth;
+        firsty = e.pageY * zoomy / window.innerHeight;
+
+        firstx += xvb;
+        firsty += yvb;
+
+        //conveerting the id to an actual thing 
+        name = "#" + selected;
+
+        //beeing sure we get the corect attributes
+        //circle have 'cx' and 'cy'
+        //and rectangles have 'x' and 'y'
+        if ($(name).attr("class") == "light") {
+            fx = parseFloat($(name).attr("cx"));
+            fy = parseFloat($(name).attr("cy"));
+        } else {
+            fx = parseFloat($(name).attr("x"));
+            fy = parseFloat($(name).attr("y"));
+        }
+    }
 });
 
 
@@ -147,130 +143,130 @@ $("body").on("mousedown touchstart",function(e){
 
 
 //thefunction that tranfers the data from the event to our set_position function
-function drag(e,selected){
-	
-	//the name
-	let name = "#" + selected;
-	
-	//the positions
-	let x = e.pageX;
-	let y = e.pageY;
-	
-	x *= zoomx/window.innerWidth;
-	y *= zoomy/window.innerHeight;
-	
-	//updating positions
-	set_position(name,x,y);
+function drag(e, selected) {
+
+    //the name
+    let name = "#" + selected;
+
+    //the positions
+    let x = e.pageX;
+    let y = e.pageY;
+
+    x *= zoomx / window.innerWidth;
+    y *= zoomy / window.innerHeight;
+
+    //updating positions
+    set_position(name, x, y);
 }
 
 //our main place to change things
-function set_position(name,x,y){
-	var obj,objx,objy;
-	obj = "#"+selected;
-	
-	x = parseFloat(x);
-	y = parseFloat(y);
-	
-	x += xvb;
-	y += yvb;
-	
-	
-	
-	if ($(name).attr("class")!="light"){
-		//getting the variables
-		obj = "#"+selected;
-		objx = parseFloat($(obj).attr("x"));
-		objy = parseFloat($(obj).attr("y"));
-				
-		x = parseFloat(x);
-		y = parseFloat(y);
-				
-		xdif = fx - firstx;
-		ydif = fy - firsty;
-				
-		x += xdif;
-		y += ydif;
-				
-		//x -= parseFloat($(obj).attr("width"));
-		//y -= parseFloat($(obj).attr("height"));
-		if (snap){
-			x = Math.floor(x/80)*80;
-			y = Math.floor(y/80)*80;
-		}
-		//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
-		//setting the new positions
-		$(obj).attr("x",(x).toString());
-		$(obj).attr("y",(y).toString());
-	}
-	else{
-		//for circles
-		//getting the variables
-		obj = "#"+selected;
-		objx = parseFloat($(obj).attr("cx"));
-		objy = parseFloat($(obj).attr("cy"));
-				
-		x = parseFloat(x);
-		y = parseFloat(y);
-				
-		xdif = fx - firstx;
-		ydif = fy - firsty;
-				
-		x += xdif;
-		y += ydif;
-				
-		//x -= parseFloat($(obj).attr("width"));
-		//y -= parseFloat($(obj).attr("height"));
-		if (snap){
-			x = Math.floor(x/80)*80+40;
-			y = Math.floor(y/80)*80+40;
-		}
-		//console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
-		//setting the new positions
-		$(obj).attr("cx",(x).toString());
-		$(obj).attr("cy",(y).toString());
-	}
+function set_position(name, x, y) {
+    let obj, objx, objy;
+    obj = "#" + selected;
+
+    x = parseFloat(x);
+    y = parseFloat(y);
+
+    x += xvb;
+    y += yvb;
+
+
+
+    if ($(name).attr("class") != "light") {
+        //getting the letiables
+        obj = "#" + selected;
+        objx = parseFloat($(obj).attr("x"));
+        objy = parseFloat($(obj).attr("y"));
+
+        x = parseFloat(x);
+        y = parseFloat(y);
+
+        xdif = fx - firstx;
+        ydif = fy - firsty;
+
+        x += xdif;
+        y += ydif;
+
+        //x -= parseFloat($(obj).attr("width"));
+        //y -= parseFloat($(obj).attr("height"));
+        if (snap) {
+            x = Math.floor(x / 80) * 80;
+            y = Math.floor(y / 80) * 80;
+        }
+        //console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
+        //setting the new positions
+        $(obj).attr("x", (x).toString());
+        $(obj).attr("y", (y).toString());
+    } else {
+        //for circles
+        //getting the letiables
+        obj = "#" + selected;
+        objx = parseFloat($(obj).attr("cx"));
+        objy = parseFloat($(obj).attr("cy"));
+
+        x = parseFloat(x);
+        y = parseFloat(y);
+
+        xdif = fx - firstx;
+        ydif = fy - firsty;
+
+        x += xdif;
+        y += ydif;
+
+        //x -= parseFloat($(obj).attr("width"));
+        //y -= parseFloat($(obj).attr("height"));
+        if (snap) {
+            x = Math.floor(x / 80) * 80 + 40;
+            y = Math.floor(y / 80) * 80 + 40;
+        }
+        //console.log("obj:"+obj+"objx:"+objx+"objy:"+objy+"xdif:"+xdif+"ydif:"+ydif)
+        //setting the new positions
+        $(obj).attr("cx", (x).toString());
+        $(obj).attr("cy", (y).toString());
+    }
 }
 
-function add(h,w,color,stroke,id,on){
-	var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-	$(g).attr({
+function add(h, w, color, stroke, id, on) {
+    let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    $(g).attr({
         width: "100%",
         height: "100%"
     });
-	var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect')).attr({
+    let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect')).attr({
         x: "50",
-        y:"50",
+        y: "50",
         id: id,
-        fill:color,
-        height: h.toString()+"px",
-        width:  w.toString()+"px",
-		stroke: stroke,
-		rx:"20",
-		ry:"20"
+        fill: color,
+        height: h.toString() + "px",
+        width: w.toString() + "px",
+        stroke: stroke,
+        rx: "20",
+        ry: "20"
     });
-	if (on){
-		$(el).attr("onmousedown","selected='"+id+"';");
-		$(el).attr("onmouseup","selected='yay';");
-	}
-	$(el).attr("stroke-width","4");
-	$(g).append(el);
-	var elem = document.getElementById("svg1");
+    if (on) {
+        $(el).attr("onmousedown", "selected='" + id + "';");
+        $(el).attr("onmouseup", "selected='yay';");
+    }
+    $(el).attr("stroke-width", "4");
+    $(g).append(el);
+    let elem = document.getElementById("svg1");
     elem.appendChild(g);
-	return el;
+    return el;
 }
 
 console.log(pieces);
-setInterval(function(){
-	for (var i = 0;i < pieces.length;i++){
-		pieces[i].update();
-	}
-	for (var i = 0;i < lines.length;i++){
-		lines[i].update();
-	}
-	for (var i = 0;i < pins.length;i++){
-		pins[i].update();
-	}
-},0.001);
+
+setInterval(function() {
+    for (let i = 0; i < pieces.length; i++) {
+        pieces[i].update();
+    }
+    for (let i = 0; i < lines.length; i++) {
+        lines[i].update();
+    }
+    for (let i = 0; i < pins.length; i++) {
+        pins[i].update();
+    }
+}, 0.001);
 
 
 
diff --git a/scripts/nand.js b/scripts/nand.js
index a7a7fb7..edd1aed 100644
--- a/scripts/nand.js
+++ b/scripts/nand.js
@@ -1,74 +1,74 @@
-function nand(id){
-	this.id = id;
-	this.name = "#" + this.id;
-	this.rep = add(80,80,"green","black",this.id,true);
-	this.pin1 = new pin(0);
-	this.pin2 = new pin(0);
-	this.o = new pin(1);
-	this.o.nei = this;
-	//this.text = new text(this,"Or-gate");
-	this.activation = function(){
-		if (!(this.pin1.val && this.pin2.val)){
-			return true;
-		}
-		return false;
-	}
-	
-	this.x = function(){
-		let name = "#" + this.id;
-		return parseFloat($(name).attr("x"));
-	}
-	
-	this.y = function(){
-		let name = "#" + this.id;
-		//console.log("y"+parseFloat($(name).attr("y")));
-		return parseFloat($(name).attr("y"));
-	}
-	
-	//design
-	var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-	$(g).attr({
+function nand(id) {
+    this.id = id;
+    this.name = "#" + this.id;
+    this.rep = add(80, 80, "green", "black", this.id, true);
+    this.pin1 = new pin(0);
+    this.pin2 = new pin(0);
+    this.o = new pin(1);
+    this.o.nei = this;
+    //this.text = new text(this,"Or-gate");
+    this.activation = function() {
+        if (!(this.pin1.val && this.pin2.val)) {
+            return true;
+        }
+        return false;
+    }
+
+    this.x = function() {
+        let name = "#" + this.id;
+        return parseFloat($(name).attr("x"));
+    }
+
+    this.y = function() {
+        let name = "#" + this.id;
+        //console.log("y"+parseFloat($(name).attr("y")));
+        return parseFloat($(name).attr("y"));
+    }
+
+    //design
+    let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    $(g).attr({
         width: "100%",
         height: "100%"
     });
-	var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
-            x: "50",
-            y: "50",
-            id: (id+"-skin"),
-			width:"80",
-			height:"80"
-        });
-	var img = $(document.createElement('img')).attr({
-        height:"80",
-		width:"80",
-        src:"textures/gates/nand_gate.jpg"
+    let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
+        x: "50",
+        y: "50",
+        id: (id + "-skin"),
+        width: "80",
+        height: "80"
     });
-	var iDiv = document.createElement("div");
-	$(iDiv).append(img);
-	this.skin = skin;
-	this.img = img;
-	$(skin).append(iDiv);
-	//noname(this);
-	$(g).append(skin);
-    var elem = document.getElementById("svg1");
+    let img = $(document.createElement('img')).attr({
+        height: "80",
+        width: "80",
+        src: "textures/gates/nand_gate.jpg"
+    });
+    let iDiv = document.createElement("div");
+    $(iDiv).append(img);
+    this.skin = skin;
+    this.img = img;
+    $(skin).append(iDiv);
+    //noname(this);
+    $(g).append(skin);
+    let elem = document.getElementById("svg1");
     elem.appendChild(g);
-	
-	//updating
-	this.update = function(){
-		//the main object and his pins
-		let x = this.x();
-		let y = this.y();
-		this.pin1.set(x-20,y);
-		this.pin2.set(x-20,y+60);
-		this.o.set(x+80,y+30);
-		
-		//and the skin
-		var name = "#"+this.id+"-skin";
-		var skin = $(name);
-		skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
-		skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
-	}
-	pieces[pieces.length] = this;
-	
-	addclk(this);
+
+    //updating
+    this.update = function() {
+        //the main object and his pins
+        let x = this.x();
+        let y = this.y();
+        this.pin1.set(x - 20, y);
+        this.pin2.set(x - 20, y + 60);
+        this.o.set(x + 80, y + 30);
+
+        //and the skin
+        let name = "#" + this.id + "-skin";
+        let skin = $(name);
+        skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
+        skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
+    }
+    pieces[pieces.length] = this;
+
+    addclk(this);
 }
\ No newline at end of file
diff --git a/scripts/nand3.js b/scripts/nand3.js
index e5f932d..e298aad 100644
--- a/scripts/nand3.js
+++ b/scripts/nand3.js
@@ -1,93 +1,92 @@
-function nand3(id){
-	this.id = id;
-	this.rep = add(80,80,"blue","black",this.id,false);
-	this.pin1 = new pin(0);
-	this.pin2 = new pin(0);
-	this.pin3 = new pin(0);
-	this.o = new pin(1);
-	this.o.nei = this;
-	this.activation = function(){
-		if (!((this.pin1.val && this.pin2.val)&&this.pin3.val)){
-			return true;
-		}
-		return false;
-	}
-	
-	this.x = function(){
-		let name = "#" + this.id;
-		return parseFloat($(name).attr("x"));
-	}
-	
-	this.y = function(){
-		let name = "#" + this.id;
-		//console.log("y"+parseFloat($(name).attr("y")));
-		return parseFloat($(name).attr("y"));
-	}
-	
-	//design
-	var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-	$(g).attr({
+function nand3(id) {
+    this.id = id;
+    this.rep = add(80, 80, "blue", "black", this.id, false);
+    this.pin1 = new pin(0);
+    this.pin2 = new pin(0);
+    this.pin3 = new pin(0);
+    this.o = new pin(1);
+    this.o.nei = this;
+    this.activation = function() {
+        if (!((this.pin1.val && this.pin2.val) && this.pin3.val)) {
+            return true;
+        }
+        return false;
+    }
+
+    this.x = function() {
+        let name = "#" + this.id;
+        return parseFloat($(name).attr("x"));
+    }
+
+    this.y = function() {
+        let name = "#" + this.id;
+        //console.log("y"+parseFloat($(name).attr("y")));
+        return parseFloat($(name).attr("y"));
+    }
+
+    //design
+    let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    $(g).attr({
         width: "100%",
         height: "100%"
     });
-	var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
-            x: "50",
-            y: "50",
-            id: (id+"-skin"),
-			width:"80",
-			height:"80"
-        });
-	var img = $(document.createElement('img')).attr({
-        height:"72",
-		width:"72",
-        src:"textures/gates/nand_gate.jpg"
+    let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
+        x: "50",
+        y: "50",
+        id: (id + "-skin"),
+        width: "80",
+        height: "80"
     });
-	var iDiv = document.createElement("div");
-	$(iDiv).append(img);
-	this.skin = skin;
-	this.img = img;
-	$(skin).append(iDiv);
-	//noname(this);
-	$(g).append(skin);
-    var elem = document.getElementById("svg1");
+    let img = $(document.createElement('img')).attr({
+        height: "72",
+        width: "72",
+        src: "textures/gates/nand_gate.jpg"
+    });
+    let iDiv = document.createElement("div");
+    $(iDiv).append(img);
+    this.skin = skin;
+    this.img = img;
+    $(skin).append(iDiv);
+    //noname(this);
+    $(g).append(skin);
+    let elem = document.getElementById("svg1");
     elem.appendChild(g);
-	
-	//updating
-	this.update = function(){
-		//the main object and his pins
-		let x = this.x();
-		let y = this.y();
-		this.pin1.set(x-20,y);
-		this.pin2.set(x-20,y+60);
-		this.pin3.set(x-20,y+30);
-		this.o.set(x+80,y+30);
-		
-		//and the skin
-		var name = "#"+this.id+"-skin";
-		var skin = $(name);
-		skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
-		skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
-	}
-	pieces[pieces.length] = this;
-	
-	
-	clk(this,[this.pin1,this.pin2,this.pin3,this.o]);
+
+    //updating
+    this.update = function() {
+        //the main object and his pins
+        let x = this.x();
+        let y = this.y();
+        this.pin1.set(x - 20, y);
+        this.pin2.set(x - 20, y + 60);
+        this.pin3.set(x - 20, y + 30);
+        this.o.set(x + 80, y + 30);
+
+        //and the skin
+        let name = "#" + this.id + "-skin";
+        let skin = $(name);
+        skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
+        skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
+    }
+    pieces[pieces.length] = this;
+
+
+    clk(this, [this.pin1, this.pin2, this.pin3, this.o]);
 }
 
-function clk(ob,arr){
-	var rep = ob.rep;
-	$((ob.img)).on("mousedown touchstart",function(e){
-		e.preventDefault();
-		var svg = document.getElementById("svg1");
-		$(svg).append(ob.rep);
-		$(svg).append($(ob.pin1.rep));
-		for (var i = 0; i < arr.length;i++){
-			$(svg).append($(i.rep));
-		}
-		$(svg).append($(ob.skin));
-		selected = ob.id;
-	});
-	$((ob.img)).on("mouseup touchend",function(e){
-		selected = "yay";
-	});
+function clk(ob, arr) {
+    $((ob.img)).on("mousedown touchstart", function(e) {
+        e.preventDefault();
+        let svg = document.getElementById("svg1");
+        $(svg).append(ob.rep);
+        $(svg).append($(ob.pin1.rep));
+        for (let i = 0; i < arr.length; i++) {
+            $(svg).append($(i.rep));
+        }
+        $(svg).append($(ob.skin));
+        selected = ob.id;
+    });
+    $((ob.img)).on("mouseup touchend", function() {
+        selected = "yay";
+    });
 }
\ No newline at end of file
diff --git a/scripts/not.js b/scripts/not.js
index 21b31a3..62bcacf 100644
--- a/scripts/not.js
+++ b/scripts/not.js
@@ -1,94 +1,87 @@
-function not(id){
-	this.id = id;
-	this.name = "#" + this.id;
-	this.rep = add(80,80,"green","black",this.id,true);
-	this.pin1 = new pin(0);
-	this.o = new pin(1);
-	this.o.nei = this;
-	//this.text = new text(this,"Or-gate");
-	this.activation = function(){
-		if (!this.pin1.val){
-			return true;
-		}
-		return false;
-	}
-	
-	this.x = function(){
-		let name = "#" + this.id;
-		return parseFloat($(name).attr("x"));
-	}
-	
-	this.y = function(){
-		let name = "#" + this.id;
-		//console.log("y"+parseFloat($(name).attr("y")));
-		return parseFloat($(name).attr("y"));
-	}
-	
-	//design
-	var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-	$(g).attr({
+function not(id) {
+    this.id = id;
+    this.name = "#" + this.id;
+    this.rep = add(80, 80, "green", "black", this.id, true);
+    this.pin1 = new pin(0);
+    this.o = new pin(1);
+    this.o.nei = this;
+    //this.text = new text(this,"Or-gate");
+    this.activation = function() {
+        if (!this.pin1.val) {
+            return true;
+        }
+        return false;
+    }
+
+    this.x = function() {
+        let name = "#" + this.id;
+        return parseFloat($(name).attr("x"));
+    }
+
+    this.y = function() {
+        let name = "#" + this.id;
+        //console.log("y"+parseFloat($(name).attr("y")));
+        return parseFloat($(name).attr("y"));
+    }
+
+    //design
+    let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    $(g).attr({
         width: "100%",
         height: "100%"
     });
-	var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
-            x: "50",
-            y: "50",
-            id: (id+"-skin"),
-			width:"80",
-			height:"80"
-        });
-	var img = $(document.createElement('img')).attr({
-        height:"80",
-		width:"80",
-        src:"textures/gates/not_gate.jpg"
+    let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
+        x: "50",
+        y: "50",
+        id: (id + "-skin"),
+        width: "80",
+        height: "80"
     });
-	var iDiv = document.createElement("div");
-	$(iDiv).append(img);
-	this.skin = skin;
-	this.img = img;
-	$(skin).append(iDiv);
-	//noname(this);
-	$(g).append(skin);
-    var elem = document.getElementById("svg1");
+    let img = $(document.createElement('img')).attr({
+        height: "80",
+        width: "80",
+        src: "textures/gates/not_gate.jpg"
+    });
+    let iDiv = document.createElement("div");
+    $(iDiv).append(img);
+    this.skin = skin;
+    this.img = img;
+    $(skin).append(iDiv);
+    //noname(this);
+    $(g).append(skin);
+    let elem = document.getElementById("svg1");
     elem.appendChild(g);
-	
-	//updating
-	this.update = function(){
-		//the main object and his pins
-		let x = this.x();
-		let y = this.y();
-		this.pin1.set(x-20,y+30);
-		this.o.set(x+80,y+30);
-		
-		//and the skin
-		var name = "#"+this.id+"-skin";
-		var skin = $(name);
-		skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
-		skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
-	}
-	pieces[pieces.length] = this;
-	
-	addclk11(this);
+
+    //updating
+    this.update = function() {
+        //the main object and his pins
+        let x = this.x();
+        let y = this.y();
+        this.pin1.set(x - 20, y + 30);
+        this.o.set(x + 80, y + 30);
+
+        //and the skin
+        let name = "#" + this.id + "-skin";
+        let skin = $(name);
+        skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
+        skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
+    }
+    pieces[pieces.length] = this;
+
+    addclk11(this);
 }
 
-function addclk11(ob){
-	var rep = ob.rep;
-	$((ob.img)).on("mousedown touchstart",function(e){
-		e.preventDefault();
-		var svg = document.getElementById("svg1");
-		$(svg).append(ob.rep);
-		$(svg).append($(ob.pin1.rep));
-		$(svg).append($(ob.o.rep));
-		$(svg).append($(ob.skin));
-		selected = ob.id;
-	});
-	$((ob.img)).on("mouseup touchend",function(e){
-		selected = "yay";
-	});
-}
-
-
-
-
-
-
+function addclk11(ob) {
+    $((ob.img)).on("mousedown touchstart", function(e) {
+        e.preventDefault();
+        let svg = document.getElementById("svg1");
+        $(svg).append(ob.rep);
+        $(svg).append($(ob.pin1.rep));
+        $(svg).append($(ob.o.rep));
+        $(svg).append($(ob.skin));
+        selected = ob.id;
+    });
+    $((ob.img)).on("mouseup touchend", function() {
+        selected = "yay";
+    });
+}
\ No newline at end of file
diff --git a/scripts/or.js b/scripts/or.js
index adb3ca0..f58175f 100644
--- a/scripts/or.js
+++ b/scripts/or.js
@@ -1,86 +1,74 @@
-function or(id){
-	this.id = id;
-	this.name = "#" + this.id;
-	this.rep = add(80,80,"green","black",this.id,true);
-	this.pin1 = new pin(0);
-	this.pin2 = new pin(0);
-	this.o = new pin(1);
-	this.o.nei = this;
-	//this.text = new text(this,"Or-gate");
-	this.activation = function(){
-		if (this.pin1.val || this.pin2.val){
-			return true;
-		}
-		return false;
-	}
-	
-	this.x = function(){
-		let name = "#" + this.id;
-		return parseFloat($(name).attr("x"));
-	}
-	
-	this.y = function(){
-		let name = "#" + this.id;
-		//console.log("y"+parseFloat($(name).attr("y")));
-		return parseFloat($(name).attr("y"));
-	}
-	
-	//design
-	var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-	$(g).attr({
+function or(id) {
+    this.id = id;
+    this.name = "#" + this.id;
+    this.rep = add(80, 80, "green", "black", this.id, true);
+    this.pin1 = new pin(0);
+    this.pin2 = new pin(0);
+    this.o = new pin(1);
+    this.o.nei = this;
+    //this.text = new text(this,"Or-gate");
+    this.activation = function() {
+        if (this.pin1.val || this.pin2.val) {
+            return true;
+        }
+        return false;
+    }
+
+    this.x = function() {
+        let name = "#" + this.id;
+        return parseFloat($(name).attr("x"));
+    }
+
+    this.y = function() {
+        let name = "#" + this.id;
+        //console.log("y"+parseFloat($(name).attr("y")));
+        return parseFloat($(name).attr("y"));
+    }
+
+    //design
+    let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    $(g).attr({
         width: "100%",
         height: "100%"
     });
-	var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
-            x: "50",
-            y: "50",
-            id: (id+"-skin"),
-			width:"80",
-			height:"80"
-        });
-	var img = $(document.createElement('img')).attr({
-        height:"80",
-		width:"80",
-        src:"textures/gates/or_gate.jpg"
+    let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
+        x: "50",
+        y: "50",
+        id: (id + "-skin"),
+        width: "80",
+        height: "80"
     });
-	var iDiv = document.createElement("div");
-	$(iDiv).append(img);
-	this.skin = skin;
-	this.img = img;
-	$(skin).append(iDiv);
-	//noname(this);
-	$(g).append(skin);
-    var elem = document.getElementById("svg1");
+    let img = $(document.createElement('img')).attr({
+        height: "80",
+        width: "80",
+        src: "textures/gates/or_gate.jpg"
+    });
+    let iDiv = document.createElement("div");
+    $(iDiv).append(img);
+    this.skin = skin;
+    this.img = img;
+    $(skin).append(iDiv);
+    //noname(this);
+    $(g).append(skin);
+    let elem = document.getElementById("svg1");
     elem.appendChild(g);
-	
-	//updating
-	this.update = function(){
-		//the main object and his pins
-		let x = this.x();
-		let y = this.y();
-		this.pin1.set(x-20,y);
-		this.pin2.set(x-20,y+60);
-		this.o.set(x+80,y+30);
-		
-		//and the skin
-		var name = "#"+this.id+"-skin";
-		var skin = $(name);
-		skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
-		skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
-	}
-	pieces[pieces.length] = this;
-	
-	addclk(this);
-}
-/*
-function addclk(ob){
-	var rep = ob.rep;
-	$(ob.rep).on("mousedown touchstart",function(e){
-		var svg = document.getElementById("svg1");
-		$(svg).append(ob.rep);
-		$(svg).append($(ob.pin1.rep));
-		$(svg).append($(ob.pin2.rep));
-		$(svg).append($(ob.o.rep));
-	});
-}
-*/
+
+    //updating
+    this.update = function() {
+        //the main object and his pins
+        let x = this.x();
+        let y = this.y();
+        this.pin1.set(x - 20, y);
+        this.pin2.set(x - 20, y + 60);
+        this.o.set(x + 80, y + 30);
+
+        //and the skin
+        let name = "#" + this.id + "-skin";
+        let skin = $(name);
+        skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
+        skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
+    }
+    pieces[pieces.length] = this;
+
+    addclk(this);
+}
\ No newline at end of file
diff --git a/scripts/pins.js b/scripts/pins.js
index b89227b..7e78ee1 100644
--- a/scripts/pins.js
+++ b/scripts/pins.js
@@ -1,71 +1,68 @@
-var count = 0;
-var pins = [];
-var sels = "yay";
-var sele = "yay";
-var num;
-function pin(type){
-	this.state = true;
-	this.nei = "yay";
-	this.val = false;
-	if (type == 0){
-		this.type = true;
-		color = "black";
-	}
-	else{
-		this.type = false;
-		color = "red";
-	}
-	this.update = function(){
-		if (this.nei != "yay"){
-			if (!(this.type)){
-				this.val = this.nei.activation();
-			}
-			else{
-				this.val = this.nei.val;
-			}
-		}
-		if (this.val){
-			$((this.rep)).attr("fill","red");
-		}
-		else{
-			$((this.rep)).attr("fill","yellow");
-		}
-	}
-	this.id = count.toString();
-	this.name = "#"+this.id;
-	this.rep = add(20,20,"yellow","black",this.id,false);
-	clicked(this);
-	count++;
-	this.name = "#"+this.id;
-	this.set = function(x,y){
-		$(this.name).attr("x",x.toString());
-		$(this.name).attr("y",y.toString());
-	}
-	pins[pins.length] = this;
-	this.num = pins.length-1;
+let count = 0;
+let pins = [];
+let sels = "yay";
+let sele = "yay";
+let num;
+
+function pin(type) {
+    this.state = true;
+    this.nei = "yay";
+    this.val = false;
+    if (type == 0) {
+        this.type = true;
+        color = "black";
+    } else {
+        this.type = false;
+        color = "red";
+    }
+    this.update = function() {
+        if (this.nei != "yay") {
+            if (!(this.type)) {
+                this.val = this.nei.activation();
+            } else {
+                this.val = this.nei.val;
+            }
+        }
+        if (this.val) {
+            $((this.rep)).attr("fill", "red");
+        } else {
+            $((this.rep)).attr("fill", "yellow");
+        }
+    }
+    this.id = count.toString();
+    this.name = "#" + this.id;
+    this.rep = add(20, 20, "yellow", "black", this.id, false);
+    clicked(this);
+    count++;
+    this.name = "#" + this.id;
+    this.set = function(x, y) {
+        $(this.name).attr("x", x.toString());
+        $(this.name).attr("y", y.toString());
+    }
+    pins[pins.length] = this;
+    this.num = pins.length - 1;
 }
 
-function clicked(ob){
-	$(ob.rep).on("click touchstart",function(e){
-		e.preventDefault();
-		if (ob.type == true){
-			sels = ob;
-		}
-		else{
-			sele = ob;
-		}
-		console.log("click"+sels+sele+ob.type);
-		if ((sels!="yay")&&(sele!="yay")){
-			console.log("step 2");
-			if ((sels.state)){
-				sels.nei = sele;
-				sels.state = false;
-				sele.state = false;
-				a = new edge(sels,sele);
-				sels = "yay";
-				sele = "yay";
-				console.log("end");
-			}
-		}
-	});
+function clicked(ob) {
+    $(ob.rep).on("click touchstart", function(e) {
+        e.preventDefault();
+        if (ob.type == true) {
+            sels = ob;
+        } else {
+            sele = ob;
+        }
+        console.log("click" + sels + sele + ob.type);
+        if ((sels != "yay") && (sele != "yay")) {
+            console.log("step 2");
+            if ((sels.state)) {
+                sels.nei = sele;
+                sels.state = false;
+                sele.state = false;
+                a = new edge(sels, sele);
+                sels = "yay";
+                sele = "yay";
+                console.log("end");
+            }
+        }
+    });
 }
\ No newline at end of file
diff --git a/scripts/text.js b/scripts/text.js
index b6e2c67..4736757 100644
--- a/scripts/text.js
+++ b/scripts/text.js
@@ -1,41 +1,42 @@
-var t_count = 0;
-function text(parent,value){
-	//variables
-	this.parent = parent;
-	this.val = value;
-	this.id = t_count.toString() + "text";
-	t_count++;
-	this.name = "#"+this.id;
-	
-	//adding the text to the SVG
-	var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-	$(g).attr({
+let t_count = 0;
+
+function text(parent, value) {
+    //letiables
+    this.parent = parent;
+    this.val = value;
+    this.id = t_count.toString() + "text";
+    t_count++;
+    this.name = "#" + this.id;
+
+    //adding the text to the SVG
+    let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    $(g).attr({
         width: "100%",
         height: "100%"
     });
-	var el = $(document.createElementNS('http://www.w3.org/2000/svg', 'text')).attr({
+    let el = $(document.createElementNS('http://www.w3.org/2000/svg', 'text')).attr({
         x: "50",
-        y:"50",
+        y: "50",
         id: this.id,
-        fill:"white",
-		stroke: "black"
+        fill: "white",
+        stroke: "black"
     });
-	$(el).text(value);
-	$(el).attr("class","heavy");
-	$(g).append(el);
-	var elem = document.getElementById("svg1");
+    $(el).text(value);
+    $(el).attr("class", "heavy");
+    $(g).append(el);
+    let elem = document.getElementById("svg1");
     elem.appendChild(g);
-	this.rep = el;
-	$((this.rep)).on("click touchstart",function(e){
-		e.preventDefault();
-	});
-	
-	//updating
-	this.update = function(){
-		$((this.name)).attr("x",(parseFloat($((this.parent)).attr("x"))+15).toString());
-		$((this.name)).attr("y",(parseFloat($((this.parent)).attr("y"))+25).toString());
-	}
-	
-	//beeing sure it would be updated
-	pieces[pieces.length] = this;
+    this.rep = el;
+    $((this.rep)).on("click touchstart", function(e) {
+        e.preventDefault();
+    });
+
+    //updating
+    this.update = function() {
+        $((this.name)).attr("x", (parseFloat($((this.parent)).attr("x")) + 15).toString());
+        $((this.name)).attr("y", (parseFloat($((this.parent)).attr("y")) + 25).toString());
+    }
+
+    //beeing sure it would be updated
+    pieces[pieces.length] = this;
 }
\ No newline at end of file
diff --git a/scripts/xor.js b/scripts/xor.js
index 3b250a6..fddfa1d 100644
--- a/scripts/xor.js
+++ b/scripts/xor.js
@@ -1,73 +1,73 @@
-function xor(id){
-	this.id = id;
-	this.name = "#" + this.id;
-	this.rep = add(80,80,"green","black",this.id,true);
-	this.pin1 = new pin(0);
-	this.pin2 = new pin(0);
-	this.o = new pin(1);
-	this.o.nei = this;
-	//this.text = new text(this,"Or-gate");
-	this.activation = function(){
-		if (!(this.pin1.val && this.pin2.val) && (this.pin1.val || this.pin2.val)){
-			return true;
-		}
-		return false;
-	}
-	
-	this.x = function(){
-		let name = "#" + this.id;
-		return parseFloat($(name).attr("x"));
-	}
-	
-	this.y = function(){
-		let name = "#" + this.id;
-		//console.log("y"+parseFloat($(name).attr("y")));
-		return parseFloat($(name).attr("y"));
-	}
-	
-	//design
-	var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-	$(g).attr({
+function xor(id) {
+    this.id = id;
+    this.name = "#" + this.id;
+    this.rep = add(80, 80, "green", "black", this.id, true);
+    this.pin1 = new pin(0);
+    this.pin2 = new pin(0);
+    this.o = new pin(1);
+    this.o.nei = this;
+    //this.text = new text(this,"Or-gate");
+    this.activation = function() {
+        if (!(this.pin1.val && this.pin2.val) && (this.pin1.val || this.pin2.val)) {
+            return true;
+        }
+        return false;
+    }
+
+    this.x = function() {
+        let name = "#" + this.id;
+        return parseFloat($(name).attr("x"));
+    }
+
+    this.y = function() {
+        let name = "#" + this.id;
+        //console.log("y"+parseFloat($(name).attr("y")));
+        return parseFloat($(name).attr("y"));
+    }
+
+    //design
+    let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    $(g).attr({
         width: "100%",
         height: "100%"
     });
-	var skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
-            x: "50",
-            y: "50",
-            id: (id+"-skin"),
-			width:"80",
-			height:"80"
-        });
-	var img = $(document.createElement('img')).attr({
-        height:"80",
-		width:"80",
-        src:"textures/gates/xor.jpg"
+    let skin = $(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')).attr({
+        x: "50",
+        y: "50",
+        id: (id + "-skin"),
+        width: "80",
+        height: "80"
     });
-	var iDiv = document.createElement("div");
-	$(iDiv).append(img);
-	this.skin = skin;
-	this.img = img;
-	$(skin).append(iDiv);
-	//noname(this);
-	$(g).append(skin);
-    var elem = document.getElementById("svg1");
+    let img = $(document.createElement('img')).attr({
+        height: "80",
+        width: "80",
+        src: "textures/gates/xor.jpg"
+    });
+    let iDiv = document.createElement("div");
+    $(iDiv).append(img);
+    this.skin = skin;
+    this.img = img;
+    $(skin).append(iDiv);
+    //noname(this);
+    $(g).append(skin);
+    let elem = document.getElementById("svg1");
     elem.appendChild(g);
-	
-	//updating
-	this.update = function(){
-		//the main object and his pins
-		let x = this.x();
-		let y = this.y();
-		this.pin1.set(x-20,y);
-		this.pin2.set(x-20,y+60);
-		this.o.set(x+80,y+30);
-		
-		//and the skin
-		var name = "#"+this.id+"-skin";
-		var skin = $(name);
-		skin.attr("x",(parseFloat($((this.rep)).attr("x"))+4).toString());
-		skin.attr("y",(parseFloat($((this.rep)).attr("y"))+4).toString());
-	}
-	pieces[pieces.length] = this;
-	clk(this,[this.pin1,this.pin2,this.output]);
+
+    //updating
+    this.update = function() {
+        //the main object and his pins
+        let x = this.x();
+        let y = this.y();
+        this.pin1.set(x - 20, y);
+        this.pin2.set(x - 20, y + 60);
+        this.o.set(x + 80, y + 30);
+
+        //and the skin
+        let name = "#" + this.id + "-skin";
+        let skin = $(name);
+        skin.attr("x", (parseFloat($((this.rep)).attr("x")) + 4).toString());
+        skin.attr("y", (parseFloat($((this.rep)).attr("y")) + 4).toString());
+    }
+    pieces[pieces.length] = this;
+    clk(this, [this.pin1, this.pin2, this.output]);
 }
\ No newline at end of file
diff --git a/st.css b/st.css
index dfc12c4..c030fe1 100644
--- a/st.css
+++ b/st.css
@@ -1,22 +1,24 @@
 body {
-    background-color:rgba(0,0,0,0.7);
-	/*
+    background-color: rgba(0, 0, 0, 0.7);
+    /*
     background-image: url("bg.jpg");
     background-repeat: no-repeat;
     background-size: cover;
 	*/
-	margin:0;
+    margin: 0;
 }
 
-.heavy { font: bold 20px sans-serif; }
+.heavy {
+    font: bold 20px sans-serif;
+}
 
 img {
-	border-radius: 17px;
-	height: 74;
-	width: 74;
+    border-radius: 17px;
+    height: 74;
+    width: 74;
 }
 
 #butt {
-	rx: 10;
-	ry: 10;
+    rx: 5;
+    ry: 5;
 }
\ No newline at end of file