more updates

- renaming of files
- highlighting of the text
- clear modules so it doesn’t make more than the 2

css/stylesheet.css

@@ -675,6 +675,20 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .inputField{
-    width: 16px;
+    width: 25px;
     border: 0;
 }
+
+.sb-button{
+    border: 1px solid #515151;
+}
+
+.inputContainer{
+    position: relative;
+    width: 100%;
+}
+
+.inputs{
+    position: relative;
+    display: block;
+}

index.html

@@ -129,24 +129,26 @@
     </div>
     <div class="sandbox_container">
         <div>
-            <div>
-            # of Rows:
-            <input id="numRows" type="number" value="5">
-            </div>
+            <div class="inputContainer">
+                <div>
+                # of Rows:
+                <input class="inputs"id="numRows" type="number" value="5">
+                </div>
 
-            <div>
-            # of Columns:
-            <input id="numColumns" type="number" value="5">
-            </div>
+                <div>
+                # of Columns:
+                <input class="inputs"id="numColumns" type="number" value="5">
+                </div>
 
-            <div>
-            Tracer Name:
-            <input id="tracerName" type="text" value="default">
+                <div>
+                Tracer Name:
+                <input class="inputs"id="tracerName" type="text" value="default">
+                </div>
             </div>
 
             <div>
-                <button id="button-2DMatrix">Create 2DMatrix</button>
-                <button id="button-generateJS">Generate Javascript</button>
+                <button class='sb-button' id="button-2DMatrix">Create 2DMatrix</button>
+                <button class='sb-button' id="button-generateJS">Generate Javascript</button>
             </div>
         </div>
     </div>

js/create/index.js

@@ -102,12 +102,35 @@ const positionModules = () =>{
     }
 }
 
+const clearModules = () =>{
+    var elems = document.getElementsByClassName('module_wrapper');
+    if(elems.length > 0){
+        var parent = elems[0].parentElement;
+        var numChild = parent.childNodes.length;
+        for(var i = 0; i < numChild; i++){
+            parent.removeChild(parent.firstChild);
+        }
+    }
+}
+
+const enabledHightlighting = () =>{
+    var elems = document.getElementsByClassName('module_wrapper');
+    var logger = elems[1];
+    var wrapper = logger.childNodes[1];
+    console.log(elems);
+    console.log(wrapper);
+    for (var i = 0; i < wrapper.childNodes.length; i++) {
+        wrapper.childNodes[i].style["-webkit-user-select"] = "all";
+    }
+}
+
 const setupButtons = () => {
 
     var button_2DMatrix = document.getElementById("button-2DMatrix");
     var logger;
     var arr2DTracer;
     button_2DMatrix.addEventListener('click',function(){
+        clearModules();
         arr2DTracer = new modules.Array2DTracer();
         logger = new modules.LogTracer('Generated Javascript');
 
@@ -123,6 +146,7 @@ const setupButtons = () => {
     var button_JS = document.getElementById('button-generateJS');
     button_JS.addEventListener('click',function(){
         generateJS(logger);
+        enabledHightlighting();
     },false);
 
 };