JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<textarea id="code"></textarea>
<div id="result">Write some code to see the result.</div>
<button>Evaluate</button>

CSS

#code {
    float: left;
    margin: 0;
    width: 50%;
    height: 300px;
    box-sizing: border-box;
}

#result {
    float: left;
    padding: 10px;
    width: 50%;
    height: 300px;
    box-sizing: border-box;
}

.correct { color: green; }
.error { color: red; }

JavaScript

console.log = function(msg) {
    return msg;
};

$('button').click(function(e) {
    var code = $('#code').val();
    
    try {
        eval(code); 
    } catch (e) {
        if (e instanceof SyntaxError) {
            alert(e.message);
        }
    }
    
    /*if(res==11) $('#result').removeClass().addClass('correct');
    else $('#result').removeClass().addClass('error');
    
    $('#result').html(res);*/
});