jsMVCDraft

<!DOCTYPE html>
<html lang="en" id="html">

<head>
    <meta charset="UTF-8">
    <title>MVC</title>
    <style>
        html,
        body {
            display: flex;
            width: 95%;
            height: 95%;
            min-width: 810px;
            min-height: 410px;
            align-items: center;
            justify-content: center;
            margin: 8px 15px;
        }

        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 50px;
        }

        .calcElement {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 50px;
            min-height: 50px;
            border: 1px solid black;
            margin: 5px 5px;
            padding: 2px 2px;
            font: bold 30px arial;
        }
    </style>
</head>

<body>
    <div id="calcView" class="centered">
        <div id="calcValA" class="calcElement"></div>
        <div id="calcOp" class="calcElement"></div>
        <div id="calcValB" class="calcElement"></div>
        <div id="calcEqual" class="calcElement">=</div>
        <div id="calcRes" class="calcElement"></div>
    </div>

    <script>
        'use strict'

        class CalcModel {
            constructor() {
                this._valA = 0;
                this._valB = 0;
                this._op = '+';
                this._res = 0;
                this._views = [];
            }

            static operations = {
                '+': (a, b) => +a + +b,
                '-': (a, b) => a - b,
                '/': (a, b) => a / b,
                '*': (a, b) => a * b
            };

            evaluate() {
                //if (this.op == '+') { this._res = this._valA + this._valB }
                //else if (this.op == '-') { this._res = this._valA - this._valB }

                if (Object.keys(CalcModel.operations).includes(this._op)) {
                    this._res = CalcModel.operations[this._op](this._valA, this._valB);
                }
                else {
                    this._res = 'ERROR';
                }
                this.notify();
            }

            addView(view) {
                this._views.push(view);
            }

            removeView(view) {
                this._views.splice(this._views.indexOf(view), 1);
            }

            notify() {
                for (let view of this._views) {
                    view.render();
                }
            }
        }

        class CalcView {
            constructor(calcModel) {
                this._calcModel = calcModel;
                this.attach();
            }

            attach() {
                this._calcModel.addView(this);
            }

            detach() {
                this._calcModel.removeView(this);
            }

            render() {
                console.log(`${this._calcModel._valA} ${this._calcModel._op} ${this._calcModel._valB} = ${this._calcModel._res}`);
            }
        }


        const calcModel = new CalcModel();
        const calcView = new CalcView(calcModel);

        calcModel._valA = 3;
        calcModel._valB = 5;
        calcModel._op = '+';

        calcModel.evaluate();

        calcModel._valA = 7;
        calcModel._valB = 8;
        calcModel._op = '*';

        calcModel.evaluate();
                //console.log(calcModel._res);


    </script>
</body>

</html>