JSFiddle - React, Tailwind, and code Playground

by Yurii Shpylovyi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-core.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<ul class="paramsSelector"></ul>

CSS

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  background color: #ccffff;
}

JavaScript

class coupler {
  constructor(cableTypeVocabulary, vendor, cableType, wires) {
    this.tubeSchema = cableTypeVocabulary.vendor.cableType.tubeSchema,
      this.wiresSchema = cableTypeVocabulary.vendor.cableType.wiresSchema
  }
  showCabeSchema() {
    console.log({
      tubeSchema: this.tubeSchema,
      wiresSchema: this.wiresSchema
    });
  }
}
let vocabulary = {
  vendor: {
    select: null,
    finmark: {
      ut: {
        tube: [{
          text: 'синій',
          color: '#0000ff'
        }, {
          text: 'помаранчевий',
          color: '#ff6600'
        }, {
          text: 'зелений',
          color: '#009933'
        }, {
          text: 'коричневий',
          color: '#663300'
        }, {
          text: 'сірий',
          color: '#808080'
        }, {
          text: 'білий',
          color: '#ffffff'
        }, {
          text: 'червоний',
          color: '#ff0000'
        }, {
          text: 'чорний',
          color: '#000000'
        }, {
          text: 'жовтий',
          color: '#ffff00'
        }, {
          text: 'фіолетовий',
          color: '#ee82ee'
        }, {
          text: 'рожевий',
          color: '#ffc0cb'
        }, {
          text: 'бірюзовий',
          color: '#00ffff'
        }],

        wires: [{
          text: 'синій',
          color: '#0000ff'
        }, {
          text: 'помаранчевий',
          color: '#ff6600'
        }, {
          text: 'зелений',
          color: '#009933'
        }, {
          text: 'коричневий',
          color: '#663300'
        }, {
          text: 'сірий',
          color: '#808080'
        }, {
          text: 'білий',
          color: '#ffffff'
        }, {
          text: 'червоний',
          color: '#ff0000'
        }, {
          text: 'чорний',
          color: '#000000'
        }, {
          text: 'жовтий',
          color: '#ffff00'
        }, {
          text: 'фіолетовий',
          color: '#ee82ee'
        }, {
          text: 'рожевий',
          color:...