JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<div id="controls">
  <a onclick="updateMe">Refresh All</a>
</div>
<div id="iAmRoot"></div>

CSS

div#iAmRoot {
  background: light-gray;
  padding: 4px;
  margin: 2px text-align: center;
  height: 100%;
  width: 100%;
}

div.widget {
  background: white;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  font-family: calibri;
  -moz-box-shadow: 0 0 7px gray;
  -webkit-box-shadow: 0 0 7px gray;
  box-shadow: 0 0 7px gray;
  width: 80%;
  font-size: 0.9em;
}

div.name {
  font-weight: bold;
  font-size: 1.1em;
}

JavaScript

var myJSON = '[{"name" : "Nightly Batch", "auto" : "false", "db" : ["FCTDEV","FCTSYS","FCTINT","FCTREL"], "sql" : "select sysdate from dual"}, {"name" : "IFP Enrollments", "auto" : "true", "db" : ["FCTDEV","FCTSYS","FCTINT","FCTREL","FCTPVS"], "sql" : "select **sysdate from dual"}, {"name" : "Inbound Claims", "auto" : "true", "db" : ["FCTDEV","FCTSYS","FCTINT","FCTREL","FCTPVS","FCTPRD"], "sql" : "select **sysdate from dual"}, {"name" : "Connections", "auto" : "False", "db" : ["FCTPVS","FCTPRD"], "sql" : "select **sysdate from dual"}]';

var mydata = JSON.parse(myJSON);

for (i = 0; i < mydata.length; ++i) {
  genWidget(i, mydata[i].name, mydata[i].auto, mydata[i].db, mydata[i].sql);
}

function genWidget(id, name, auto, db, sql) {
  var iDiv = document.createElement('div');
  iDiv.id = 'widget' + id;
  iDiv.className = 'widget';
  document.getElementById('iAmRoot').appendChild(iDiv);
  var t = $("<div class='name' id='nm" + id + "'>" + name + "</span>")
  t.appendTo(iDiv);
  if (auto.toLowerCase() == "true") {
    var ar = $("<input type='checkbox' checked='true' id='cb" + id + "' />");
  } else {
    var ar = $("<input type='checkbox' id='cb" + id + "' />");
  }
  ar.appendTo(iDiv);
  var arl = $("<label for='cb" + id + "'> Auto refresh</label>");
  arl.appendTo(iDiv);
  iDiv.innerHTML += "<br />Database: ";
  var s = $("<select id='slct" + id + "' />");
  for (j = 0; j < db.length; ++j) {
    $('<option />', {
      value: db[j],
      text: db[j]
    }).appendTo(s);
  }
  s.appendTo(iDiv);
  iDiv.innerHTML += "<br/>SQL: " + sql + "<br/>";
  //iDiv.innerHTML += "<button id='btn"+id+"'>Run</button><br/>";
  var b = $("<button id='btn" + id + "'>run</button>");
  b.appendTo(iDiv);
  b.click(function() {
    console.log("Running " + $("div#nm" + id).text() + " on " + $("select#slct" + id).val());
    return false;
  });
}