Calculator

Created more than 2 years ago. /now is 19.08.2016

by kontrach

HTML

<div id="container">
    <div id="output">
        <input type="text" size="16" value="0" class="output" />
    </div>
    <div id="numbers-container">
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="0">
    </div>
    <div id="operators">
        <input type="button" class="add" value="+">
        <input type="button" class="substract" value="-">
        <input type="button" class="divide" value="/">
        <input type="button" class="multiply" value="*">
    </div>
    <input type="button" class="equal" value="=">
</div>

CSS

#container {
    margin: 20px;
    width: 140px;
    border: 1px solid blue;
    background: silver;
    border-radius: 5px;
}
#numbers-container {
    display: inline-block;
    width: 100px;
}
#operators {
    display: inline-block;
    width: 30px;
}
.equal{
    position: relative;
    top: -25px;
    left: 31px;
}

JavaScript

//Обработчик события нажатия на кнопки с цифрами
function getPressedNumber() {
    //если нажата именно кнопка (иначе, не будет значения value, которое нам нужно)
    if (event.target.tagName === 'INPUT') {
        //записываем нажатую цифру
        pressedNumber = event.target.value;
        //если была нажата кнопка арифметической операции (в дальнейшем - операции)
        if (isOperationPressed) {
            //записываем нажатые цифры во второй операнд
            secondOperand += pressedNumber;
            //и выводим его на "экран"
            output.value = secondOperand;
        } else {
            //если мы только начинаем вводить число, то записываем в первый операнд
            firstOperand += pressedNumber;
            //и выводим его на "экран"
            output.value = firstOperand;
        }
    }
}
//ставим оутпут в ноль. на экран ноль... поймешь короче :)
function clearOutput() {
    output.value = '0';
}
//обработчик события нажатия на кнопки операций
function operation() {
    //если нажата именно кнопка
    if (event.target.tagName === 'INPUT') {
        //записываем её класс (можно было и значение, но можно по разному)
        operationPressed = event.target.className;
        //ставим 0 на экран
        clearOutput();
        //была нажата кнопка(чтобы в функции getPressedNumber нажатые цифры записывались во второй операнд)
        isOperationPressed = true;
    }
}
//находим элемнеты, чтобы иметь доступ к ним и к их аттрибутам(свойствам)
//поле вывода
var output = document.querySelector('.output');
//контейнер цифер
var numsContainer = document.querySelector('#numbers-container');
//контейнер кнопок операций
var operatorsContainer = document.querySelector('#operators');
//кнопка равно
var equal = document.querySelector('.equal');
// вспомагательные переменные
var pressedNumber;
var firstOperand = '';
var secondOperand = '';
var operationPressed = '';
//кнопка операции ещё не нажата
var isOperationPressed = false;

//вместо ифов. Объект с...