JSFiddle - React, Tailwind, and code Playground

by XTREME104

HTML

<textarea id="codeText"></textarea>
<textarea id="consoleText" readonly="readonly"></textarea>

CSS

body {
    padding: 4px;
}

textarea#codeText, textarea#consoleText {
    resize: none;
}

JavaScript

window.onload = init();

function init () {
    setInterval(doresize, 0);
}

function doresize () {
    codeText.style.width = window.innerWidth - 10 + "px";
    codeText.style.height = (window.innerHeight / 2) - 11 + "px";
    consoleText.style.width = window.innerWidth - 10 + "px";
    consoleText.style.height = (window.innerHeight / 2) - 11 + "px";
    
    /* var codeLines = parse(codeText.value);
    var codeTokens = tokenize(codeText.value);
    consoleText.innerHTML = codeLines.join(";\n") + ";\n";
    consoleText.innerHTML += codeLines.length + " lines\n"; */
}

/* function parse (code) {
    var lines = code.split(";");
    for (var i = 0; i < lines.length; i++) {
        lines[i] = lines[i].replace(/^\s+|\s+$/g, "").replace(/\n/g, "");
    }
    return lines;
} */

var symbolTable = {};

var originalSymbol = {
    nud: function () {
        this.error("Undefined.");
    },
    led: function (left) {
        this.error("Missing operator.");
    }
};

function symbol (id, bp) {
    var s = symbolTable[id];
    bp = bp || 0;
    if (s) {
        if (bp >= s.lbp) {
            s.lbp = bp;
        }
    } else {
        s = Object.create(original_symbol);
        s.id = s.value = id;
        s.lbp = bp;
        symbolTable[id] = s;
    }
    return s;
};

symbol(":");
symbol(";");
symbol(",");
symbol(")");
symbol("]");
symbol("}");
symbol("else");

symbol("(end)");
symbol("(name)");

var token;

var advance = function (id) {
    var a, o, t, v;
    if (id && token.id !== id) {
        token.error("Expected '" + id + "'.");
    }
    if (token_nr >= tokens.length) {
        token = symbol_table["(end)"];
        return;
    }
    t = tokens[token_nr];
    token_nr += 1;
    v = t.value;
    a = t.type;
    if (a === "name") {
        o = scope.find(v);
    } else if (a === "operator") {
        o = symbol_table[v];
        if (!o) {
            t.error("Unknown operator.");
        }
    } else if (a === "string" || a ===  "number") {
        a = "literal";
 ...