Calculator Formula Builder

HTML

<div class="col-layout">
    <div class="span6">
        <div class="formula-designer"></div>
    </div>
    <div class="span3">
        <div class="formula-toolbox"> <span class="toolbox-item" data-value="(">(</span>
 <span class="toolbox-item" data-value=")">)</span>
 <span class="toolbox-item" data-value="+">+</span>
 <span class="toolbox-item" data-value="-">-</span>
 <span class="toolbox-item" data-value="*">*</span>  <span class="toolbox-item" data-value="/">/</span>
 <span class="toolbox-item" data-value="1">1</span>
 <span class="toolbox-item" data-value="2">2</span>
 <span class="toolbox-item" data-value="3">3</span>
 <span class="toolbox-item" data-value="4">4</span>
 <span class="toolbox-item" data-value="5">5</span>
 <span class="toolbox-item" data-value="6">6</span>
 <span class="toolbox-item" data-value="7">7</span>
 <span class="toolbox-item" data-value="8">8</span>
 <span class="toolbox-item" data-value="9">9</span>

        </div>
    </div>
</div>
<div class="col-layout">
    <div class="span9">
        <p id="formula"></p>
    </div>
</div>

CSS

.col-layout {
    display: table;
    width: 100%;
}
.col-layout >[class^="span"] {
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
    display:table-cell;
    vertical-align: top;
}
.col-layout .span1 {
    width: 11.1111%;
}
.col-layout .span2 {
    width: 22.2222%;
}
.col-layout .span3 {
    width: 33.3333%;
}
.col-layout .span4 {
    width: 44.4444%;
}
.col-layout .span5 {
    width: 55.5555%;
}
.col-layout .span6 {
    width: 66.6666%;
}
.col-layout .span7 {
    width: 77.7777%;
}
.col-layout .span8 {
    width: 88.8888%;
}
.col-layout .span9 {
    width: 100%;
}
.formula-designer {
    border: 1px solid #000;
    min-height: 2.1em;
    padding: 2px;
}
.formula-toolbox {
    border: 1px solid #000;
    min-height: 2.1em;
    padding: 2px;
}
.toolbox-item, .ui-state-highlight {
    border: 1px dashed #000;
    padding: 5px;
    margin: 2px;
    cursor: pointer;
    min-width: 30px;
    min-height: 30px;
    font-size: 1.5em;
}
.formula-designer .toolbox-item {
    border: none;
}
.formula-designer .toolbox-item:hover {
    border: 1px dashed #000;
}
span {
    display: inline-block;
}
.ui-state-highlight {
    background-color: #00f;
    opacity: 0.8;
    min-height: 30px;
    display: inline-block;
    vertical-align: bottom;
}

JavaScript

$(function ($) {
    var designerUi = {
        config: {
            designer: ".formula-designer",
            toolbox: ".formula-toolbox",
            toolboxItems: ".toolbox-item",
        },

        init: function () {
            this._bind(this.config.designer, "sortable", {
                revert: true,
                placeholder: "ui-state-highlight",
                forcePlaceholderSize: true,
                update: this._sortableUpdated
            });

            this._bind(this.config.toolboxItems, "draggable", {
                helper: "clone",
                revert: "invalid",
                connectToSortable: this.config.designer
            });
        },

        _bind: function (target, f, args) {
            (!args) ? $(target)[f]() : $(target)[f](args);
        },

        _sortableUpdated: function (event, ui) {
            var formula = $(designerUi.config.designer).children(),
                compiledFormula = "";

            $.each(formula, function (i, e) {
                if (!$(e).hasClass("ui-state-placeholder")) {
                    compiledFormula += $(e).attr("data-value");
                }
            });

            try {
                $("#formula").html(eval(compiledFormula));
            } catch (e) {
                $("#formula").html("Incomplete formula");
            }
        },
    };

    designerUi.init();
}(jQuery));