JSFiddle - React, Tailwind, and code Playground

Custom conditions

by tonytlwu

HTML

<textarea id="code">
function anotherFunc(){
  
}

function condition () {
  // return true or false
}
</textarea>
<button id="btn">Validate</button>
<pre id="debug"></pre>

CSS

textarea {
  width: 100%;
  height: 200px;
  font-family: monospace;
}

pre {
  font-family: monospace;
}

JavaScript

function validateCode () {
  return new Promise(function(resolve, reject){
    var code = document.getElementById('code').value;

		try {
    	eval(code);
			if (typeof condition == 'function') {
      	return resolve();
      }
      reject('Your code must include a function named "condition".');
    } catch (e) {
      reject('There is an error with your code. Please make sure your code is valid.');
    }
  });
}

document.getElementById('btn').addEventListener('click', function(e){
	event.preventDefault();
  validateCode()
    .then(function(){
      document.getElementById('debug').innerHTML = 'All good. Go and save your code.';
    })
    .catch(function(e){
      document.getElementById('debug').innerHTML = e;
    });
})