Calculus

Simple calculator on JS

by hunter s70

HTML

<script src="&lt;link href=&quot;https://fonts.googleapis.com/css?family=Geo&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<div id="calc"></div>

CSS

.b-calc {
    width: 400px;
    margin: 10px auto;
    padding: 20px 10px;
    background: rgba(139, 147, 148, 1);
    border-radius: 8px;
}

.b-calc__input {
    width: 100%;
    font: 40px 'Geo', sans-serif;
    text-align: right;
    box-sizing: border-box;
}

.b-calc__btn-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 10px auto;
    padding: 10px 5px;
    width: 100%;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    box-sizing: border-box;
}

.b-calc__btn {
    flex: 0 1 auto;
    width: 36px;
    text-align: center;
    display: inline-block;
    background: rgba(115, 116, 255, .57);
    padding: 3px 0;
    margin: 2px;
    box-sizing: border-box;
    border-radius: 6px;
}

.b-calc__btn:hover {
    background: rgba(115, 116, 255, .8);
    cursor: pointer;
}

JavaScript

/**
 * Created by hunter_s70 on 26.08.2016.
 * Calculus js -v 1.0.1
 */

var Calculus = function (calculusId) {
    if (!calculusId) return;

    this.param = {
        element             : document.getElementById(calculusId),
        result              : '',
        repSimbolsBan       : /[\\\?\|\s\}\]\[\{=_;:"',!)(<>@№#$&~`ёЁa-zA-Zа-яА-Я]|[-+%^*./](?=[-+%^*./])/,
        dbPointProtect      : /([-+%^*/]{1})?\d+(\.\d+)?[-+%^*/]{1}\d+(\.\d+)?[-+%^*/]{1}|([-+%^*/]{1})?\d+\.\d+\.|([-+%^*/]{1})?(\d+\.)?\d+[-+%^*/]{1}\d+\.\d+\.|[-+%^*/]{1}\d+[-+%^*/]{1}|\.\d+\./g,
        btns                : ['0','1','2','3','4','5','6','7','8','9','^','%','+','-','*','/','.','=']
    };

    this.renderTerminal();
    this.initEvents();
};


Calculus.prototype.renderTerminal = function () {
    this.param.element.innerHTML =
    '<div class="b-calc">'+
        '<input id="b-calc__input" class="b-calc__input" type="text" maxlength="24" autofocus>'+
        '<div class="b-calc__btn-wrap j-btn-wrap">' +
            this.renderCaclBtns()+
        '</div>'+
    '</div>';

    this.param.input = document.getElementById('b-calc__input');
    this.param.btnWrapp = document.querySelector('.j-btn-wrap');
};


Calculus.prototype.renderCaclBtns = function () {
    this.param.btns = this.param.btns.map(function(item, i) {
        return '<span class="b-calc__btn m-calc__btn_'+i+'">'+item+'</span>'
    });
    return this.param.btns.join('');
};


Calculus.prototype.initEvents = function () {

    var self = this;

    //output
    window.onkeypress = function (e) {
        self.param.input.focus();
        if (e.keyCode === 13) {
            self.getValue();
            self.setResult();
        }
    };

    //Turn range in the end
    this.param.input.onclick = function () {
        var valueLength = self.param.input.value.length;

        self.param.input.setSelectionRange(valueLength, valueLength);
    };

    //input width buttons
    this.param.btnWrapp.onclick = function (e) {
       ...