JSFiddle - React, Tailwind, and code Playground

by blesh

HTML

id1: <input id="id1" type="text"/><br/>
id2: <input id="id2" type="text"/>
<hr/>
Sum: <span data-xl="sum('input')"></span><br/>
id1 * id2: <span data-xl="_eq('#id1 * #id2')"></span><br/>
Sum('input') * id2: <span data-xl="_eq('sum(\'input\') * #id2')"></span><br/>
Count('input'): <span data-xl="count('input')"></span><br/>
Avg('input'): <span data-xl="avg('input')"></span><br/>

JavaScript

//EXCEL-like Jquery functionality.

$(function() {
    $(document).on('change', 'input, textbox, select', function() {
        $('[data-xl]').each(function() {
            var sum = function(selector) {
                try {
                    var result = 0;
                    $(selector).each(function() {
                        result += new Number($(this).val() || 0);
                    });
                    return result;
                } catch (err) {
                    return 'error: ' + err;
                }
            };
            var count = function(selector) {
                try {
                    return $(selector).length;
                } catch (err) {
                    return 'error: ' + err;
                }
            };
            var avg = function(selector) {
                try {
                    return sum(selector) / count(selector);
                } catch (err) {
                    return 'error: ' + err;
                }
            };

            var _eq = function(toproc) {
                try {
                    var ids = toproc.match(/(\#\w+)/g);
                    var p = toproc;
                    for (var i = 0; i < ids.length; i++) {
                        var id = ids[i];
                        var v = $(id).val();
                        v = (isNaN(v) || !v) ? 0 : v;
                        p = p.replace(id, v);
                    }
                    return eval(p);
                } catch (err) {
                    return 'error: ' + err;
                }
            };

            $(this).text(eval($(this).data('xl')));
        });
    });
});