Decoder finished

Author: jkctech

index.html

@@ -16,9 +16,9 @@
 			<div id="botbtns" class="btnblock"></div>
 			<div id="controls">
 				<input type="text" id="buffer">
-				<button class="ctrlbtn" id="clear">Clear</button>
-				<button class="ctrlbtn" id="add">Add</button>
-				<button class="ctrlbtn" id="reset">Reset</button>
+				<button class="ctrlbtn" onclick="clearbuffer()">Clear</button>
+				<button class="ctrlbtn" onclick="addchar()">Add</button>
+				<button class="ctrlbtn" onclick="reset()">Reset</button>
 			</div>
 		</div>
 	</body>

script.js

@@ -25,9 +25,6 @@ long.src = "assets/long.png";
 var topbar = document.getElementById("topbtns");
 var botbar = document.getElementById("botbtns");
 
-var tophalf = document.getElementById("half-top");
-var bothalf = document.getElementById("half-bot");
-
 var toppart = 0;
 var botpart = 0;
 
@@ -50,6 +47,23 @@ function update()
 	document.getElementById("dp-kix").innerText = grid[toppart][botpart];
 }
 
+function reset()
+{
+	toppart = botpart = 0;
+	update();
+}
+
+function clearbuffer()
+{
+	document.getElementById("buffer").value = "";
+}
+
+function addchar()
+{
+	document.getElementById("buffer").value += grid[toppart][botpart];
+	reset();
+}
+
 (function() {
 	for (var i = 0; i < blocks.length; i++)
 	{

style.css

@@ -5,10 +5,10 @@ html, body {
 
 #wrapper {
 	position: absolute;
-    top: 10%;
+    top: 50%;
     left: 50%;
     margin-right: -50%;
-    transform: translate(-50%, -10%);
+    transform: translate(-50%, -50%);
 }
 
 .stripe {