Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="calc">
        <div class="screen"></div>
        <div class="digits">
            <div class="btn cmd">1</div>
            <div class="btn cmd">2</div>
            <div class="btn cmd">3</div>
            <div class="btn cmd">4</div>
            <div class="btn cmd">5</div>
            <div class="btn cmd">6</div>
            <div class="btn cmd">7</div>
            <div class="btn cmd">8</div>
            <div class="btn cmd">9</div>
            <div class="btn cmd">0</div>
            <div class="btn cmd">.</div>
        </div>
        <div class="operators">
            <div class="btn cmd clear">C</div>
            <div class="btn cmd">+</div>
            <div class="btn cmd">-</div>
            <div class="btn cmd">/</div>
            <div class="btn cmd">*</div>
            <div class="btn cmd equal inactive">=</div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

var Model = (function () {
    function Model() {
        this.memory = "";
    }
    Model.prototype.processCmd = function (cmd) {
        if (cmd === "C") {
            return this.memory = "";
        }
        else if (cmd !== "=") {
            this.memory += cmd;
            return this.memory;
        }
        else {
            try {
                var res = eval(this.memory);
            }
            catch (e) {
                res = "Error";
            }
            res = this.memory + "=" + res;
            this.memory = "";
            return res;
        }
    };
    return Model;
}());
var View = (function () {
    function View() {
        this.calc = document.querySelector(".calc");
        this.equal = document.querySelector(".equal");
        this.screen = document.querySelector(".screen");
    }
    View.prototype.listen = function (callback) {
        var self = this;
        this.calc.addEventListener("click", function (event) {
            var target = event.target;
            if (target.classList.contains("cmd") && !target.classList.contains("inactive")) {
                if (target.innerText === self.equal.innerText || target.classList.contains("clear")) {
                    self.equal.classList.add("inactive");
                }
                else {
                    self.equal.classList.remove("inactive");
                }
                callback(target.innerText);
            }
        });
    };
    View.prototype.print = function (expr) {
        this.screen.innerText = expr;
    };
    return View;
}());
var Controller = (function () {
    function Controller(model, view) {
        this.model = model;
        this.view = view;
        this.view.listen(this.processCmd.bind(this));
    }
    Controller.prototype.processCmd = function (cmd) {
        var res = this.model.processCmd(cmd);
        this.view.print(res);
    };
    return Controller;
}());
var App = (function () {
    function App() {
        this.controller = new Controller(new Model, new View);
    }
    return App;
}());
(function start() {
    new App();
})();
//# sourceMappingURL=main.js.map

.calc {
    width: 284px;
    margin: 0 auto;
}

.digits {
    box-sizing: border-box;
    display: inline-flex;
    width: 210px;
    -webkit-flex-flow: row wrap;
    justify-content: center;
}

.operators {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
}

.screen {
    width: 274px;
    height: 60px;
    margin: 0 5px;
    border: 1px solid #000;
    box-sizing: border-box;
}

.digits > .btn {
    background: #f5f5f5;
}

.operators > .btn {
    background: #e5e5e5;
}


.btn {
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    width: 60px;
    height: 40px;
    border: 1px solid #000;
    margin: 5px;
    cursor: pointer;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.37);
    -webkit-user-select: none;
}

.btn:hover {
    /*background: #fff;*/
    opacity: 0.9;
}

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

.btn.clear {
    background: #dd2516;
    color: #fff;
}

.btn.inactive {
    background: #fff;
    box-shadow: none;
    cursor: default;
}