working version..

everything should be fine

css/stylesheet.css

@@ -675,7 +675,7 @@ input[type=number]::-webkit-outer-spin-button {
     }
 }
 
-.buttonContainer{
+.buttonContainer {
     width: 75px;
     height: 25px;
     display: block;
@@ -684,42 +684,44 @@ input[type=number]::-webkit-outer-spin-button {
     background-color: white;
 }
 
-.inputField{
+.inputField {
     width: 25px;
     border: 0;
 }
 
-.sb-button{
+.sb-button {
     border: 1px solid #515151;
     height: 25px;
     margin: 0 auto;
 }
 
-.auto-gen{
-    height: 34%;
+.auto-gen {
+    top: 30px;
+    height: 100%;
+    width: 100%;
     text-align: center;
     background-color: #262626;
-    display: flex;
     align-items: center;
 }
 
-.auto-gen-tracers{
-    top: 30px;
-    bottom: 66%;
-}
-
-.auto-gen-options{
-    top: 33%;
-    bottom: 33%;
-}
-
-.auto-gen-generate{
-    top: 66%;
-}
-
-.inputs{
+.inputs {
     display: inline-block;
     border: 0;
     background-color: #505050;
     height: 25px;
+    width: 75px;
+}
+
+.grid {
+    width: 50%;
+    height: 50%;
+    float: left;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.fields {
+    margin-top: 5px;
+    margin-bottom: 5px;
 }

js/create/array1d.js

+'use strict';
+
+const array2D = require('./array2d');
+const modules = require('../module');
+const util = require('./util');
+
+const getTracerName = () =>{
+    return document.getElementById("tracerName-1D").value;
+}
+
+const getNumColumns = () => {
+    var column_field = document.getElementById('numColumns-1D');
+    return column_field.value;
+};
+
+const setup = () => {
+    var button_1DMatrix = document.getElementById("button-1DMatrix");
+    var logger;
+    var arr1DTracer;
+    button_1DMatrix.addEventListener('click',function(){
+        util.clearModules();
+        arr1DTracer = new modules.Array1DTracer();
+        var arrElem = document.querySelector('.module_wrapper');
+        arrElem.addEventListener("mousewheel", array2D.mousescroll, false);
+        arrElem.addEventListener("DOMMouseScroll", array2D.mousescroll, false);
+        logger = new modules.LogTracer('Generated Javascript');
+
+        var numColumns = getNumColumns();
+        var data = array2D.fauxData(1,numColumns)[0];
+        console.log(data);
+        arr1DTracer.setData(data);
+        array2D.tableToInputFields(1, numColumns);
+        util.positionModules();
+        arr1DTracer.refresh();
+    },false);
+    var button_JS = document.getElementById('button-generateJS-1D');
+    button_JS.addEventListener('click',function(){
+        array2D.generateJS(logger, 'Array1DTracer');
+    },false);
+};
+
+
+module.exports = {
+    setup
+};

js/create/array2d.js

@@ -3,13 +3,18 @@
 const modules = require('../module');
 const util = require('./util');
 
+
+const getTracerName = () =>{
+    return document.getElementById("tracerName-2D").value;
+}
+
 const getNumRows = () => {
-    var row_field = document.getElementById('numRows');
+    var row_field = document.getElementById('numRows-2D');
     return row_field.value;
 }
 
 const getNumColumns = () => {
-    var column_field = document.getElementById('numColumns');
+    var column_field = document.getElementById('numColumns-2D');
     return column_field.value;
 }
 
@@ -24,12 +29,9 @@ const fauxData = (r, c) => {
     return D;
 }
 
-const tableToInputFields = () => {
+const tableToInputFields = (numRows, numColumns) => {
     var table = document.querySelector('.mtbl-table');
 
-    var numRows = table.childNodes.length;
-    var numColumns = table.childNodes[0].childNodes.length;
-
     for(var i = 0; i < numRows; i++){
         for(var j = 0; j < numColumns; j++){
             var elem = document.createElement('input');
@@ -42,7 +44,9 @@ const tableToInputFields = () => {
     }
 }
 
-const generateJS = (logger) => {
+const generateJS = (logger, tracer) => {
+    if(!logger) return;
+
     logger.clear();
     var table = document.querySelector('.mtbl-table');
 
@@ -70,8 +74,10 @@ const generateJS = (logger) => {
     logger.print(']');
 
 
-    logger.print("let myTableTracer = new Array2DTracer ('"+util.getTracerName()+"')");
+    logger.print("let myTableTracer = new "+ tracer +" ('"+getTracerName()+"')");
     logger.print('myTableTracer._setData (myTable)');
+
+    util.enabledHightlighting();
 }
 
 const mousescroll = (e) =>{
@@ -103,17 +109,20 @@ const setup = () => {
         var data = fauxData(numRows, numColumns);
 
         arr2DTracer.setData(data);
-        tableToInputFields();
+        tableToInputFields(numRows, numColumns);
         util.positionModules();
         arr2DTracer.refresh();
     },false);
-    var button_JS = document.getElementById('button-generateJS');
+    var button_JS = document.getElementById('button-generateJS-2D');
     button_JS.addEventListener('click',function(){
-        generateJS(logger);
-        util.enabledHightlighting();
+        generateJS(logger, 'Array2DTracer');
     },false);
 }
 
 module.exports = {
-    setup
+    setup,
+    mousescroll,
+    fauxData,
+    tableToInputFields,
+    generateJS
 };

js/create/index.js

@@ -2,6 +2,7 @@
 
 const modules = require('../module');
 const array2d = require('./array2d');
+const array1d = require('./array1d');
 const util = require('./util');
 const Server = require('../server');
 const DOM = require('../dom');
@@ -32,43 +33,58 @@ const reloadAlgorithm = () => {
     });
 };
 
-
+const createHTML = () => {
+    $('.workspace').append("<div class='sandbox_container'>\
+            <section class='close_bar'>\
+            <div class='btn' id='btn_close'>\
+                <div class='wrapper'>\
+                    <i class='fa fa-times' aria-hidden='true'></i>\
+                </div>\
+            </div>\
+            </section>\
+            <section class='auto-gen'>\
+                <div class='grid' id='array1D-gen'>\
+                <div> array1DTracer </div>\
+                <i class='fa fa-ellipsis-h fa-5x' aria-hidden='true'></i>\
+                <div class='fields'>\
+                # of Columns: <input class='inputs'id='numColumns-1D' type='number' value='5'>\
+                </div>\
+                <div class='fields'>\
+                Tracer Name: <input class='inputs'id='tracerName-1D' type='text' value='default'>\
+                </div>\
+                <button class='sb-button' id='button-1DMatrix'>Create 1DMatrix</button>\
+                <button class='sb-button' id='button-generateJS-1D'>Generate Javascript</button>\
+                </div>\
+                <div class='grid' id='array2D-gen'>\
+                <div> array2DTracer </div>\
+                <i class='fa fa-th fa-5x' aria-hidden='true'></i>\
+                <div class='fields'>\
+                # of Rows: <input class='inputs'id='numRows-2D' type='number' value='5'>\
+                </div>\
+                <div class='fields'>\
+                # of Columns: <input class='inputs'id='numColumns-2D' type='number' value='5'>\
+                </div>\
+                <div class='fields'>\
+                Tracer Name: <input class='inputs'id='tracerName-2D' type='text' value='default'>\
+                </div>\
+                <button class='sb-button' id='button-2DMatrix'>Create 2DMatrix</button>\
+                <button class='sb-button' id='button-generateJS-2D'>Generate Javascript</button>\
+                </div>\
+                <div class='grid' id='chart-gen'></div>\
+                <div class='grid' id='graph-gen'></div>\
+            </section>\
+    </div>");
+};
 
 const init = () => {
 
     var check = $('.sandbox_container');
     if(!check.length){
         util.clearModules();
-
-        $('.workspace').append("<div class='sandbox_container'>\
-                <section class='close_bar'>\
-                <div class='btn' id='btn_close'>\
-                    <div class='wrapper'>\
-                        <i class='fa fa-times' aria-hidden='true'></i>\
-                    </div>\
-                </div>\
-                </section>\
-                <section class='auto-gen auto-gen-tracers'>\
-                    <button class='sb-button' id='button-2DMatrix'>Create 2DMatrix</button>\
-                </section>\
-                <section class='auto-gen auto-gen-options'>\
-                    <div>\
-                    # of Rows: <input class='inputs'id='numRows' type='number' value='5'>\
-                    </div>\
-                    <div>\
-                    # of Columns: <input class='inputs'id='numColumns' type='number' value='5'>\
-                    </div>\
-                    <div>\
-                    Tracer Name: <input class='inputs'id='tracerName' type='text' value='default'>\
-                    </div>\
-                </section>\
-                <section class='auto-gen auto-gen-generate'>\
-                    <button class='sb-button' id='button-generateJS'>Generate Javascript</button>\
-                </section>\
-        </div>");
+        createHTML();
         array2d.setup();
-
-        closeCreate(moduleWrappers);
+        array1d.setup();
+        closeCreate();
     }
 };
 

js/create/util.js

 'use strict';
 
-
-const getTracerName = () =>{
-    return document.getElementById("tracerName").value;
-}
-
 const positionModules = () =>{
     var elems = document.getElementsByClassName('module_wrapper');
     if(elems <= 0) return;
@@ -47,6 +42,5 @@ const enabledHightlighting = () =>{
 module.exports = {
     enabledHightlighting,
     positionModules,
-    clearModules,
-    getTracerName
+    clearModules
 };