JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

JavaScript

// IIFE - Immediately Invoked Function Expression
(function(encapsulateMyCode) {
  // The global jQuery object is passed as a parameter
  encapsulateMyCode(window.jQuery, window, document);
}(function($, window, document) {

  var tmp = 0;

  var fieldGroups = [];
  var fields = [];

  // The $ is now locally scoped 
  $(function() {
    // The DOM is ready! 
  });

  function Field(options) {
    this.group 					= options.group 				|| "Default";
    this.name 					= options.name 					|| "ERROR! name is missing!";
    this.type 					= options.type 					|| "T";
    this.startColumn 		= options.startColumn 	|| 0;
    this.endColumn 			= options.endColumn 		|| 0;
    this.caseSensitive 	= options.caseSensitive || false;
    this.startRow 			= options.startRow 			|| null;
    this.endRow 				= options.endRow 				|| null;
  }

  function getInstance() {
    var options = readFieldOptionsFromPage();
    var field = new Field(options);
    // eventuale validazione
    return field;
  }

  function readFieldOptionsFromPage() {
    return {
      name: "foo_" + tmp,
      type: "N",
      startColumn: 1,
      endColumn: 1337,
      caseSensitive: true
    };
  }

  function getFieldFromArray(field) {
    for (var i in fields) {
      // cambiare (eventualmente) il criterio di ricerca QUI, se diverso da .name (es .id)
      if (fields[i].name === field.name) {
        return i;
      }
    }
    return false;
  }


  var listFieds_public = function() {
    console.log('listing the fields');
    return fields;
  };

  // The DOM is NOT ready 
  var addField_public = function() {
//    tmp++;
    console.log('adding a field');
    fields.push(getInstance());
    return true;
  };

  var removeField_public = function() {
    console.log('removing a field ');
    var index = getFieldFromArray(getInstance());
    if (index) {
      console.log("Removing field " + fields[index].name);
      fields.splice(index, 1);
      return true;
    } else {
      console.log("Element to...