JSFiddle - React, Tailwind, and code Playground

by f0084rrrr

CSS

body {
  background-color: rgb(17, 17, 17);
  margin: 0 auto;
  display: flex;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
}
[id^='btn'] {
  color: white;
  background: black;
  /* border: 2px solid dodgerblue; */
  position: inherit;
  text-decoration: none;
  border-radius: 20px;
  place-self: center;
  /* margin: 5px; */
  /* padding: 5px; */
  /* width: 100%; */
  /* height: 100%; */
  grid-area: auto;
  /* display: inherit; */
}

JavaScript

const click = 'click';
const globalEventHandler = (...args) => {
  let ar = args;
  console.log(ar);
};
class HTMLElement {
  constructor () {}
  static fromString (string) {
    // let s6 = HTMLElement.fromString(`ELbutton TXsix ID${i} CL${i} EA${i} ETclick`); i++;
    // let string = 'ELbutton TXzero ID' + i + 'CLp EA' + i + ' ' + 'etclick';
    // let s = HTMLElement.fromString(string); i++;
    let spl = string.split(' ').map(v => [ Array.from(v).splice(0, 2).join(''), Array.from(v).splice(2, v.length).join('') ]);
    let args = {};
    spl.map(ar => args[`${ar[0]}`] = ar[1]);
    return this.createElement(args);
  }
  static fromStringArray (stringArray) {
    let args = {};
    stringArray.map(v => [ Array.from(v).splice(0, 2).join(''), Array.from(v).splice(2, v.length).join('') ]);
    stringArray.map(ar => args[`${ar[0]}`] = ar[1]);
    return this.createElement(args);
  }
  static fromObject (obj) { return this.createElement(obj); } // HTMLElement.fromObject({EL: button, TX: 'two', ID: i, CL: i, EA: i, et: click}); i++;
  static createElement (obj) {
    // let o2 = HTMLElement.createElement({EL: button, TX: 'three', ID: i, CL: i, EA: i, et: click}); i++;
    let el = document.createElement(`${obj.EL}`);
    el.id = obj.ID;
    if (obj.TX) { el.innerText = obj.TX; }
    el.className = obj.CL;
    el.addEventListener(obj.ET, () => globalEventHandler(obj.EA));
    if (obj.ST) { this.setStyles(obj.ST, el); }
    return el;
  }
  static fracToPercent (v) { return Array(v).fill(`${Math.floor(100 / v)}%`).join(' '); }
  static setAsGrid (element, cols, rows) {
    let styles = {
      display: 'grid', placeContent: 'center', margin: '0 auto',
      gridTemplateCols: this.fracToPercent(cols), gridTemplateRows: this.fracToPercent(rows)
    };
    this.setStyles(styles, element);
  }
  static getGridAreas (l,w) {
		/*
		let gridAreas = [];
    for (let i = 1; i < v + 1; i++) { gridAreas.push(`${i}/1/${i + 1}/2`); }
    return gridAreas;
		*/
		let ar = [];
		for...