jQuery Calculator

Simple calculator widget using jQuery

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="calculator">
                <input type="text" class="calculator-input form-control" />
                <div class="calculator-controls">
                     <div class="row">
                        <div class="col-xs-3"><a href="#" class="btn btn-sm">7</a></div>
                        <div class="col-xs-3"><a href="#" class="btn btn-sm">8</a></div>
                        <div class="col-xs-3"><a href="#" class="btn btn-sm">9</a></div>
                        <div class="col-xs-3"><a href="#" class="btn btn-sm operator">+</a></div>
                    </div>
                     <div class="row">
                        <div class="col-xs-3"><a href="#" class="btn btn-sm">4</a></div>
                        <div class="col-xs-3"><a href="#" class="btn btn-sm">5</a></div>
                        <div class="col-xs-3"><a href="#" class="btn btn-sm">6</a></div>
                        <div class="col-xs-3"><a href="#" class="btn btn-sm operator">-</a></div>
                    </div>
                     <div class="row">
                        <div class="col-xs-3"><a href="#" class="btn btn-sm">1</a></div>
                        <div class="col-xs-3"><a href="#" class="btn btn-sm">2</a></div>
                        <div class="col-xs-3"><a href="#" class="btn btn-sm">3</a></div>
                        <div class="col-xs-3"><a href="#" class="btn btn-sm operator">*</a></div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3"><a href="#" class="btn btn-sm">0</a></div>
                        <div class="col-xs-3"><a href="#" class="btn btn-sm">.</a></div>
                        <div class="col-xs-3"><a href="#" class="btn btn-sm calculate">=</a></div>
                        <div...

CSS

.calculator {
    margin-top: 15px;
    background: #ddd;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 2px 2px 3px rgba( 51, 51, 51, 0.2 );
}

.calculator .calculator-controls {
    padding-top: 10px;
    text-align: center;
}

.calculator .calculator-controls .btn {
    font-size: 16px;
    background: #eee; 
    margin-bottom: 5px;
    display: block;
    border: 1px solid #ccc;
    box-shadow: 0px 1px 1px rgba( 51, 51, 51, 0.2 );
    opacity: .8;
    transition: opacity .3s ease;
}

.calculator .calculator-controls .btn:hover {
    opacity: 1;
}

.calculator .calculator-controls .btn:active {
    box-shadow: none;
}

.calculator .calculator-controls .btn.operator {
    background: #f1f1f1;
    color: #0C7BC5;
}

.calculator .calculator-controls .btn.calculate {
    background: #0C7BC5;
    border: 1px solid #0C7BC5;
    color: #fff;
}

JavaScript

$(document).ready(function() {
    var Calculator = function(el) {
        var input, buttons, input1, input2, operator;
        function init(el) {
            if (el) {
                el = $(el)
            } else {
                el = $('#calculator');
                if (el.length < 1) {
                    return null
                }
            }
            input = el.find('.calculator-input');
            buttons = el.find('a.btn');
            events()
        }
        function events() {
            input.on('keydown', function(e) {
                e.preventDefault()
            });
            buttons.on('click', function(e) {
                var target = $(this);
                var val = target.text();
                delegate(target, val);
                e.preventDefault()
            })
        }
        function delegate(target, val) {
            if (target.hasClass('operator')) {
                if (!input1) {
                    input1 = input.val()
                }
                if (operator) {
                    input2 = input.val().split(operator)[1];
                    calculate()
                }
                operator = val;
                updateDisplay(val)
            } else if (target.hasClass('calculate')) {
                if (input1 && input2) {
                    calculate()
                } else if (input1 && operator) {
                    input2 = input.val().split(operator)[1];
                    calculate()
                }
            } else {
                updateDisplay(val)
            }
        }
        function clearDisplay() {
            input.val('')
        }
        function updateDisplay(newValue) {
            input.val(input.val() + newValue)
        }
        function calculate() {
            var val = eval(input1 + operator + input2);
            input1 = val;
            clearDisplay();
            updateDisplay(val);
            input2 = null;
            operator = null
        }
      ...