JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<input type="text" id='text' value='(1*1+-((x)*(x)))^(1/2)'></input>
<br/>
<label id='solution'></label>
<canvas id='c'></canvas>
<br/>
zoom:<input type="range" id='zoom' name="zoom" min="2" max="200" value='5' style="width:500px;position:inline;z-index:1;"></input>

CSS

canvas {
    z-index:-1;
    outline:double black 3px;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    width:100%;
    height:100%;
}

JavaScript

var inputEvents = function (e, cb) {
    var keydownevt = function (ev) {
        cb(ev);

        e.addEventListener('keyup', function keyev(evt) {
            cb(evt);
            e.removeEventListener('keyup', keyev);

        });
    };
    e.addEventListener('focus', function (e2) {

        e.addEventListener('keydown', keydownevt);
        e.addEventListener('blur', function () {
            e.removeEventListener('keydown', keydownevt);
        });
    });
    e.addEventListener('change', cb);
    e.addEventListener('mousedown', function (ev) {
        cb(ev)
        e.addEventListener('mousemove', cb);
        e.addEventListener('mouseup', function (evt) {
            e.removeEventListener('mousemove', cb);
            e.removeEventListener('mouseup', cb);
            cb(evt);
        });
    });

};
var sol = document.getElementById('solution');
var txt = document.getElementById('text');
inputEvents(txt, function (e) {


    if (e.target.value !== e.target.previousvalue) {
        sol.innerHTML = solver(e.target.value);
        redrawer();
    }
    e.target.previousvalue = e.target.value;
});




function solver(aa) {
    var a = (aa.replace(/([\d\.|a-z]+)([\D]*)/gim, "($1)$2"));
    var count = 0;
    var d = [];
    var t = true;
    var D = ["^", "*", "/", "-", "+"];
    var DD = {
        "^": function (gr) {
            return Math.pow(parseFloat(gr[1]), parseFloat(gr[3]));
        },
            "*": function (gr) {
            return (parseFloat(gr[1]) * parseFloat(gr[3]));
        },
            "/": function (gr) {
            return (parseFloat(gr[1]) / parseFloat(gr[3]));
        },
            "-": function (gr) {
            return (parseFloat(gr[1]) - parseFloat(gr[3]));
        },
            "+": function (gr) {
            return (parseFloat(gr[1]) + parseFloat(gr[3]));
        }
    };
    while (t) {
        t = false;
        var a = a.replace(/\(([^\(\)]+)\)/g, function (e, i) {
            var args = [].splice.call(arguments, 0);
 ...