Как пользоваться плагином CalculatorJS

Вам потребуется только описать логику реакции на действия пользователя, например, на клик мышкой. Благо делается это довольно просто при помощи html атрибутов.

CalculatorJS

Логика работы довольно простая, при клике на теге с атрибутом data-type к выражению должен добавиться очередной символ, для этого есть метод toGlue, а при клике на теге с атрибутом data-action должно произойти действие название которого указанно атрибуте. Итого у нас есть четыре экшина:

1. Посчитать выражение calculate;
2. Изменить знак changeSign
3. Удалить последний символ deleteLastChar
4. Удалить выражение deleteChars

Остается правильно расставить атрибуты data-type и data-action и добавить один не замысловатый обработчик на событие клика по тегам с атрибутами. Навесим наш обработчик на тег в котором находятся все элементы интерфейса и будем читать значения атрибутов из целевого елемента. Если есть data-type то вызываем метод toGlue и передаем ему содержимое тега на котором произошел клик, обратите внимание, что метод не перезаписывает выражение, это нужно сделать явно. Если есть атрибут data-action то вызываем метод указанный в данном атрибуте ясно передав ему текущее выражение. Ниже приведена реализация обработчика, но это еще не весь код.

var display = document.getElementById("calc_display"),
      calc = document.getElementById("calc");

calc.addEventListener('click', function (e) {
            e.preventDefault();
            var type = e.target.getAttribute("data-type");
            if ( type )
                display.innerHTML = self.toGlue(e.target.innerHTML, type);
            if e.target.getAttribute("data-action")
                display.innerHTML = self.expression = self[e.target.getAttribute("data-action")](self.expression)
            false
        )
});

До того как закончить с кодом нужно позаботится об html. Предлагаю генерировать html прямо в коде вот таким образом.

var Calc_template = ''
    +'<div id="calc_area">'
        +'<div id="calc_display"></div>'
        +'<div class="calc_backspace calc_button" data-action="deleteLastChar">&#8592;</div>'
        +'<div class="calc_deleteChars calc_button" data-action="deleteChars">Del</div>'
        +'<div class="calc_changeSign calc_button" data-action="changeSign">&#177;</div>'
        +'<div class="calc_bracketOpen calc_button" data-type="bracketOpen">(</div>'
        +'<div class="calc_bracketClose calc_button" data-type="bracketClose">)</div>'
        +'<div class="calc_divide calc_button" data-type="operator">/</div>'
        +'<div class="calc_multiply calc_button" data-type="operator">*</div>'
        +'<div class="calc_subtract calc_button" data-type="operator">-</div>'
        +'<div class="calc_add calc_button" data-type="operator">+</div>'
        +'<div class="calc_calculate calc_button" data-action="calculate">=</div>'
        +'<div class="calc_comma calc_button" data-type="comma">.</div>'
        +'<div class="calc_null  calc_button" data-type="number">0</div>'
        +'<div class="calc_one calc_button" data-type="number">1</div>'
        +'<div class="calc_two calc_button" data-type="number">2</div>'
        +'<div class="calc_three calc_button" data-type="number">3</div>'
        +'<div class="calc_four calc_button" data-type="number">4</div>'
        +'<div class="calc_five calc_button" data-type="number">5</div>'
        +'<div class="calc_six calc_button" data-type="number">6</div>'
        +'<div class="calc_seven calc_button" data-type="number">7</div>'
        +'<div class="calc_eight calc_button" data-type="number">8</div>'
        +'<div class="calc_nine calc_button" data-type="number">9</div>'
    +'</div>';

Остается создать свой класс калькулятора который будет наследовать от CalculatorJS. Для удобства используем CoffeeScript.

class My_calc extends Calculator
    constructor: (@options)->
        self                    = this
        @expression             = @options.expression || ""
        @lastCharType           = @options.lastCharType || ""
      
        calc                    = document.createElement("DIV")
        calc.id                 = "calculator"
        calc.innerHTML          = Calc_template
        document.body.appendChild(calc)
        display                 = document.getElementById("calc_display")
      
        calc.addEventListener('click', (e)->
            e.preventDefault()
            type = e.target.getAttribute("data-type")
            if !!type
                display.innerHTML = self.toGlue(e.target.innerHTML, type)
            if e.target.getAttribute("data-action")
                display.innerHTML = self.expression = self[e.target.getAttribute("data-action")](self.expression)
            false
        )

Вот и все! Каких-то 20 строчек кода и вы можете создавать сколько угодно калькуляторов на странице простым вызовом new My_calc.

Весь выше описанный код можно посмотреть тут. Там есть еще кусочек отвечающий за анимацию, но не обращайте на него внимания.
Весь код примера компилированный и собранный можно посмотреть тут.
Скачать к себе и поклацать в браузере нажмите тут.