JSFiddle - React, Tailwind, and code Playground

by hunter

HTML

<div id="editor">
</div>
<label></label>

CSS

body { font-size: 14pt; font-family: courier; font-weight: bold; }
#editor { height: 400px; border: solid 1px #777; width: 500px; }

.orange { color: orange; }
.purple { color: purple; }

JavaScript

var map = {
    "(": "orange",
    ")": "orange",
    "^": "orange",
    "+": "orange",
    "x": "purple"
};

var test = "(7 + 3) ^ x";

$(test.split("")).each(function(i, e){
    AddCharacter(e);
});

$("html").keypress(function(e) {
    e.preventDefault();
    var c = String.fromCharCode(e.which);
    AddCharacter(c);    
    $("label").html(e.which);
});

function AddCharacter(c)
{    
    $("#editor").append($("<span />", {
        html: c,
        "class": GetClass(c)
    }));
}

// map a character to a css class


function GetClass(c) {
    for (var k in map) {
        if (k === c) {
            return map[k];
        }
    }
}

$(document).keydown(function(e) {
    // prevent backspace
    if (e.keyCode === 8) {
        var $last = $("#editor").children(":last");
        // check for break and remove last and next to last
        if ($last.is("br")) {
            $last.remove();
            $last = $("#editor").children(":last");
        }

        $last.remove();

        return false;
    }
    // insert a break on enter
    if (e.keyCode == 13) {
        $("#editor").append("<br />");
        return false;
    }
});