JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<div class="agOps-conditions">

</div>

CSS

html,body{
  margin: 0px;
  height: 100%;
}
.agOps-conditions{
  list-style: none;
  margin: 0px;
  padding: 0px;
  font-family: helvetica, serif;
  font-size: 12px;
  height: calc(100% - 30px);
  overflow: auto;
  padding: 15px;
  position: fixed;
  right: 0px;
  width: 480px;
}
.agOps-conditions ul{
  list-style: none;
  margin: 0px;
  padding: 0px;
  font-family: helvetica, serif;
  font-size: 12px;
}
.agOps-conditions ul > li{
  color: #333;
  border: solid 1px #999;
  padding: 12px;
  margin-bottom: 5px;
  position: relative;
}
.agOps-conditions ul > li.unacceptable{
  
  border-color: tomato;
  
}
.agOps-conditions ul > li > button{
  position: absolute;
  right: 4px;
  top: 4px;
  background-color: tomato;
  color: #fff;
  border: none;
  padding: 3px;
  width: 24px;
  line-height: 16px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.agOps-conditions ul > li > button:hover{
  background-color: red;
}
.agOps-conditions >ul > li > p{
  margin: 5px;
}
.agOps-conditions >ul > li > p > label{
  display: inline-block;
  width: 100px;
}
.controller-slider.range .ui-slider-range{
  background: none;
  background-color: #369b46 !important;
}
.controller-slider.outerrange{
  background: none;
  background-color: #369b46 !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
  background: none;
  background-color: #333;
}
.ui-widget.ui-widget-content{
  background-color: #666;
  margin-top: 10px;
  display: inline-block;
  width: calc(100% - 100px);
  margin-left: 10px;
}
.controls{
  padding: 5px;
}
.controls>label{
  display: inline-block;
  text-align: center;
  width: 80px;
  margin: auto;
  background-color: #ccc;
  padding: 2px;
  font-size: 12px;
  transform: translateY(-2px);
}
.controls>span{
  display: inline-block;
  width: 100px;
}
.controls>input[type="number"]{
  width: 44px;
  padding:...

JavaScript

var agOpsAnalyser = function(data,conditions){

	var t = this;
  
  t.useLogger = true;
  
  t.analyse = function(){
  
  	var issues = [];
    var accepted = [];
    var unknown = [];
  
  	for(let i=0;i<conditions.length;i++){
    
    	if(t.useLogger){ console.log("CHECKING:",conditions[i].prop); }
    
    		if(Object.hasOwn(data, conditions[i].prop)){
      
      		if(t.useLogger){ console.log("FOUND CONDITION FOR:",conditions[i].prop); }
      	
        	switch(conditions[i].type){
          
          	// RANGE TYPE REQUIRES acceptableMin and acceptableMax Properties to be set to a number
        
        		case "range":
          
            // check if the value of data is within range
            
            var v = parseFloat(data[conditions[i].prop]);
            
            if(data[conditions[i].prop] == ''){
            
            	v = 0;
            
            }

            if((v < conditions[i].acceptableMin) || (v > conditions[i].acceptableMax)){

              issues.push({
              	"prop": conditions[i].prop,
                "value": v,
              	"reason": "Not within acceptable range of " + conditions[i].acceptableMin + " - " + conditions[i].acceptableMax
              });
              
              //parentElement.find('>ul>li').eq(i).addClass("unacceptable");

            } else {
            
            	accepted.push({
              	"prop": conditions[i].prop,
                "value": v,
              	"reason": "Within acceptable range of " + conditions[i].acceptableMin + " - " + conditions[i].acceptableMax
              });
            
            }

            break;
            
           // OUTERRANGE TYPE REQUIRES acceptableMin and acceptableMax Properties to be set to a number
        
        		case "outerrange":
          
            // check if the value of data is within range
            
            var v = parseFloat(data[conditions[i].prop]);
            
            if(data[conditions[i].prop] ==...