JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<input type="text" id='text' value='(1-x^2)^0.5'></input>
<br/>
<label id='solution'></label>
<canvas id='c'></canvas>

CSS

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

JavaScript

var parser = Object.create(null);

//var ex = "1*(2+3)^4/(5-(6+7)*8)",

parser.parse = function (ex) {
    var pemdas = function pemdas(e) {
        //exponent
        while            (/([\-]?[0-9\.]+)[\^]([0-9\.]+)/g.test(e)) {
            e = e.replace(/([\-]?[0-9\.]+)[\^]([0-9\.]+)/g, function (o, c, p) {
                return parseFloat(Math.pow(parseFloat(c), parseFloat(p)).toFixed(12));
            });
        }
        console.log(e);
        //multiply
        while        (/([\-]?[0-9\.]+)[\*]([\-]?[0-9\.]+)/g.test(e)) {
        e = e.replace(/([\-]?[0-9\.]+)[\*]([\-]?[0-9\.]+)/g, function (o, c, p) {
            return parseFloat((parseFloat(c) * parseFloat(p)).toFixed(12));
        });
        }
        console.log(e);
        //divide
        while        (/([\-]?[0-9\.]+)[\/]([\-]?[0-9\.]+)/g.test(e)){
        e = e.replace(/([\-]?[0-9\.]+)[\/]([\-]?[0-9\.]+)/g, function (o, c, p) {
            return parseFloat((parseFloat(c) / parseFloat(p)).toFixed(12));
        });
        }
            console.log(e);
        //add
        while        (/([0-9\.]+)[\+]([\-]?[0-9\.]+)/g.test(e)){
        e = e.replace(/([0-9\.]+)[\+]([\-]?[0-9\.]+)/g, function (o, c, p) {
            return parseFloat((parseFloat(c) + parseFloat(p)).toFixed(12));
        });}
        console.log(e);
        //subtract
            while    (/([0-9\.]+)[\-]([0-9\.]+)/g.test(e)){
        e = e.replace(/([0-9\.]+)[\-]([0-9\.]+)/g, function (o, c, p) {
            return parseFloat((parseFloat(c) - parseFloat(p)).toFixed(12));
        });}
        e = e.replace("--","");
        return parseFloat(e);
    };
    var paren = /(?:[\(])([^\(\)]*)(?:[\)])/;
    while (paren.test(ex)) {
        ex = ex.replace(paren, function (o, c) {
            console.log(pemdas(o));
            return pemdas(o);
        });
    }
    return (pemdas(ex));
};

var pointfunctions = Object.create(null);
pointfunctions.add = function (a) {
    this.x += a.x;
    this.y += a.y;
    return...