JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="commands-list"></div>
<textarea class="commands-input"></textarea>

CSS

.commands-list{
  display: none;
  position: fixed;
  width: 200px;
  height: 100px;
  background: #f2f2f2;
  border: solid 1px silver;
  bottom: 70px;
}

.command-selected{
  background: red;
}

.command-parameter{
  color: silver;
  font-style: italic;
}

textarea{
  position: fixed;
  bottom: 20px;
}

JavaScript

App = {};
App.q = function(s){return document.querySelector(s);}
Element.prototype.q = function(s){return this.querySelector(s);}
Element.prototype.qa = function(s){return this.querySelectorAll(s);}
Element.prototype.addClass = function(classNames){
  var _t = this;
  classNames.split(' ').map(function(className){
    if(!_t.hasClass(className)){
      _t.className += ' ' + className;
      _t.className = _t.className.replace(/\s+/g, " ").trim();
    }
  });

  return _t;
};
Element.prototype.removeClass = function(classNames){
  var _t = this;

  classNames.split(' ').map(function(className){
    var reg = new RegExp('([^-_]|^)'+className+'([^-_]|$)', 'gm');

    _t.className = _t.className.replace(reg, ' ').replace(/\s+/g, " ");
    _t.className = _t.className.replace(/\s+/g, " ").trim();
  });

  return _t;
};
Element.prototype.attr = function(attributes){
  var t = this;

  function setAttributes(){
    for(var key in attributes){
      if (attributes.hasOwnProperty(key)) {
        t.setAttribute(key, attributes[key]);
      }
    }
  }

  if(typeof(attributes) === 'string'){
    return t.getAttribute(attributes);
  } else {
    setAttributes();
    return t;
  }
};
function parseIntSafe(n){
  return (parseInt(n, 10)||0);
}
App.parseIntSafe = parseIntSafe;

function create(tag, options){
  var Elem = document.createElement(tag);

  for(var attr in options){
    if(attr === 'text'){
      Elem.innerText = options[attr];
    } else if(attr === 'html'){
      Elem.innerHTML = options[attr];
    } else if (options.hasOwnProperty(attr)) {
      Elem.setAttribute(attr, options[attr]);
    }
  }

  return Elem;
}
App.create = create;
Event.prototype.kill = function(){
  var e = this;

  e.stopPropagation();
  e.preventDefault();
};


// -------------------------------------------------------------------------------------
//
// -----------------------------------IGNORE ABOVE!!!-----------------------------------
//
//...