JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='input-box box'>
  <div class='input-row'>
    <label>first value</label>
    <input id='firstVal' type='text'/>
  </div>
  <div class='input-row'>
    <label>second value</label>
    <input id='secondVal' type='text'/>
  </div>
</div>
<div class='input-box box'>
  <div class='input-row'>
    <label>greater than</label>
    <input type='radio' name='conditionType' value='firstGreaterThanSecond'/>
  </div>
  <div class='input-row'>
    <label>less than</label>
    <input type='radio' name='conditionType' value='firstLessThanSecond'/>
  </div>
  <div class='input-row'>
    <label>equal to</label>
    <input type='radio' name='conditionType' value='firstEqualToSecond'/>
  </div>
  <div class='input-row'>
    <label>not equal to</label>
    <input type='radio' name='conditionType' value='firstNotEqualToSecond'/>
  </div>
</div>
<div>
  <div>
    <div id='expression-box' class='box'>
      <label>Expression: </label>
      <label class='expression-text'></label>
    </div>
  </div>
  <div>
    <div id='result-box' class='box'>
      <label>Result: </label>
      <label class='result-text'></label>
    </div>
  </div>
</div>
<button id='execute'>
run
</button>

CSS

.box {
  background-color: white;
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  border-radius: 3px;
  margin: 10px;
}
.input-row {
  padding: 3px 0;
}
.input-row label, input {
  display: inline-block;
  vertical-align: middle;
}
.input-row label {
  min-width: 100px;
  text-align: right;
}
.input-row input {
  border: 1px solid #ccc;
  outline: none;
  border-radius: 3px;
  padding: 5px;
}

JavaScript

$(function() {
	$('#firstVal').on('input', function() {
  	var firstVal = $(this).val();
    var secondVal = $('#secondVal').val();
    var conditionType = $('input[name="conditionType"]:checked').parent().children('label').text();
  	$('#expression-box').children('.expression-text').text(firstVal + ' ' + conditionType + ' ' + secondVal);
  });
  $('#secondVal').on('input', function() {
  	var firstVal = $('#firstVal').val();
    var secondVal = $(this).val();
    var conditionType = $('input[name="conditionType"]:checked').parent().children('label').text();
  	$('#expression-box').children('.expression-text').text(firstVal + ' ' + conditionType + ' ' + secondVal);
  });
  $('input[name="conditionType"]').on('change', function() {
  	var firstVal = $('#firstVal').val();
    var secondVal = $('#secondVal').val();
    var conditionType = $(this).parent().children('label').text();
  	$('#expression-box').children('.expression-text').text(firstVal + ' ' + conditionType + ' ' + secondVal);
  });
	$('#execute').on('click', function() {
  	var firstVal = $('#firstVal').val();
    var secondVal = $('#secondVal').val();
    var conditionTypeString = $('input[name="conditionType"]:checked').val();
    var conditionType = stringToConditionType[conditionTypeString];
    var result = conditionChecker([new condition(conditionType, firstVal, secondVal)]);
  	$('#result-box').children('.result-text').text(result);
  });
});

var stringToConditionType = {
	'firstGreaterThanSecond': firstGreaterThanSecond,
  'firstLessThanSecond': firstLessThanSecond,
  'firstEqualToSecond': firstEqualToSecond,
  'firstNotEqualToSecond': firstNotEqualToSecond
};

function firstGreaterThanSecond(first, second) {
	if(first > second) return true;
  return false;
}
function firstLessThanSecond(first, second) {
	if(first < second) return true;
  return false;
}
function firstEqualToSecond(first, second) {
	if(first === second) return true;
  return false;
}
function firstNotEqualToSecond(first, second)...