JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="math-component-connector-interface">
<p>
<input type="text" placeholder="Input #1" id="input1" />
</p>
<p>
<input type="text" placeholder="Input #2" id="input2" />
</p>
<p>
<input type="text" placeholder="Input #3" id="input3" />
</p>
<p>
<input type="text" placeholder="Output" id="output" />
</p>
<div class="math-connector-tools">
<p>
EQUATION<br />
<input type="text" placeholder="Enter an equation.." id="math-equation" class="math-equation" />
</p>
<div class="equation-errors">

</div>
</div>
</div>

CSS

.math-component-connector-interface{
  font-family: "Arial", serif;
}
.math-equation{
  width: calc(100% - 12px);
  padding: 5px;
  border: solid 1px #ccc;
}
.math-equation.error{
  outline: solid 1px red;
}
.math-equation.valid{
  outline: solid 1px green;
}
.equation-errors{
  background-color: tomato;
  color: #fff;
  padding: 12px;
  display: none;
}
.math-connector-tools{
  position: relative;
}
.math-connector-tools select.properties{
  position: absolute;
  width: 100px;
  padding: 5px;
  bottom: 100%;
  right: 120px;
}
.math-connector-tools select.methods{
  position: absolute;
  width: 100px;
  padding: 5px;
  bottom: 100%;
  right: 0px;
}

JavaScript

var dataObject = {
  x: 65,
  y: 35,
  z: 0
}

var inputComponents = [{
    component: document.getElementById('input1'),
    options: {
      mapto: 'x'
    }
  },
  {
    component: document.getElementById('input2'),
    options: {
      mapto: 'y'
    }
  },
  {
    component: document.getElementById('input3'),
    options: {
      mapto: 'z'
    }
  }
];

var outputComponent = {
  component: document.getElementById('output'),
  options: {
    mapto: 'y'
  }
}

function mathComponentConnector(inputComponents, outputComponent, ui) {

  var t = this;
  
  t.methodsArray = new Array(
  'Math.abs()',
  'Math.acos()',
  'Math.acosh()',
  'Math.asin()',
  'Math.asinh()',
  'Math.atan()',
  'Math.atan2()',
  'Math.atanh()',
  'Math.cbrt()',
  'Math.ceil()',
  'Math.clz32()',
  'Math.cos()',
  'Math.cosh()',
  'Math.exp()',
  'Math.expm1()',
  'Math.floor()',
  'Math.fround()',
  'Math.hypot()',
  'Math.imul()',
  'Math.log()',
  'Math.log10()',
  'Math.log1p()',
  'Math.log2()',
  'Math.max()',
  'Math.min()',
  'Math.pow()',
  'Math.random()',
  'Math.round()',
  'Math.sign()',
  'Math.sin()',
  'Math.sinh()',
  'Math.sqrt()',
  'Math.tan()',
  'Math.tanh()',
  'Math.trunc()'
);

  t.equation = '';
  t.solved = 0;

  t.ui = ui;

  if (t.ui) {

    t.helpermenu = $('<select size="6" class="properties"></select>');

    t.ui.append(t.helpermenu);

    t.helpermenu.click(function() {

      $('#math-equation').val($('#math-equation').val() + '[' + $(this).val() + ']').change().focus();

    });
    
    t.methodsmenu = $('<select size="6" class="methods"></select>');

    t.ui.append(t.methodsmenu);

    t.methodsmenu.click(function() {

      $('#math-equation').val($('#math-equation').val() + $(this).val()).change().focus();

    });
    
    for (let i = 0; i < t.methodsArray.length; i++) {
    
    	var bits = t.methodsArray[i].split('.');
    
    	t.methodsmenu.append('<option value="' + t.methodsArray[i] + '">' + bits[1] + '</option>');
    
    }

  }

  for...