Calculator

My first calculator on JavaScript :-)

by Anton Kolesnikov

HTML

<input type="text" id="result" readonly>
<div id="table">
    <div class="row">
        <div class="cell">
            <input type="button" value="1" />
        </div>
        <div class="cell">
            <input type="button" value="2" />
        </div>
        <div class="cell">
            <input type="button" value="3" />
        </div>
        <div class="cell">
            <input type="button" value="+" />
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <input type="button" value="4" />
        </div>
        <div class="cell">
            <input type="button" value="5" />
        </div>
        <div class="cell">
            <input type="button" value="6" />
        </div>
        <div class="cell">
            <input type="button" value="-" />
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <input type="button" value="7" />
        </div>
        <div class="cell">
            <input type="button" value="8" />
        </div>
        <div class="cell">
            <input type="button" value="9" />
        </div>
        <div class="cell">
            <input type="button" value="*" />
        </div>
    </div>
    <div class="row">
        <div class="cell">
            <input type="button" value="C" />
        </div>
        <div class="cell">
            <input type="button" value="0" />
        </div>
        <div class="cell">
            <input type="button" value="=" />
        </div>
        <div class="cell">
            <input type="button" value="/" />
        </div>
    </div>
</div>

CSS

#table {
    display: table;
}
#result {
    width: 130px;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
.cell input {
    width: 30px;
    height: 30px;
    margin: 5px 5px 0 0;
}

JavaScript

var result = document.getElementById('result');
var table = document.getElementById('table');
var buttons = table.getElementsByTagName('input');
var operands = ['+', '-', '*', '/'];

for (var index = 0, length = buttons.length; index < length; index++) {
    buttons[index].addEventListener('click', onButtonClick, false);
};

// проверяем событие на символ и возвращаем true/false
function isOperand(arr,item) {
    var result = false;
    
    for (var index = 0, length = arr.length; index < length; index++) {
        if (arr[index] == item) {
            return true;
            break;
        };
    };
    
    return result;
};

// вешаем событие на кнопки
function onButtonClick() {

    // проверяем на символ =
    if (this.value == '=') {

        if (isOperand(operands, result.value.substr(-1))) {
            alert('Неверный формат данных для вычисления');
            return;
        };

        // проверяем на пустое поле данных
        if (!result.value) return false;

        // вычисляем результат
        if (eval(result.value) !== 'Infinity') {
            result.value = eval(result.value);
        } else {
            alert('Делить на ноль нехорошо. Ай-я-яй!');
            result.value = '';
        };

        return;
    };

    // кнопка очищения поля ввода
    if (this.value == 'C') {
        result.value = '';
        return;
    };

    // проверка на пустое поле и нажатии символа
    if (isOperand(operands, this.value) && !result.value) return false;

    // проверяем на двойной симпол и заменяем на новый
    if (isOperand(operands, this.value) && isOperand(operands, result.value.substr(-1))) {
        result.value = result.value.substr(0, result.value.length - 1) + this.value;
        return;
    };

    // если все хорошо, то добавляем символ
    result.value += this.value;
};