Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
- <div id="calcController" class="centered">
- <input id="calcInputAll" type="text" placeholder="valA oper valB">
- </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
- };
- get valA() { return this._valA; }
- get valB() { return this._valB; }
- get op() { return this._op; }
- set valA(val) {
- if (this._valA != val) { this._valA = val; }
- }
- set valB(val) {
- if (this._valB != val) { this._valB = val; }
- }
- set op(val) {
- if (this._op != val) { this._op = val; }
- }
- 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() {
- // empty!
- }
- }
- class CalcViewConsole extends CalcView {
- render() {
- console.log(`${this._calcModel._valA} ${this._calcModel._op} ${this._calcModel._valB} = ${this._calcModel._res}`);
- }
- }
- class CalcViewHtmlDiv extends CalcView {
- constructor(calcModel, div) {
- super(calcModel);
- this._mainDiv = document.querySelector(`#${div}`);
- this._valA = this._mainDiv.querySelector(`#calcValA`);
- this._valB = this._mainDiv.querySelector(`#calcValB`);
- this._op = this._mainDiv.querySelector(`#calcOp`);
- this._res = this._mainDiv.querySelector(`#calcRes`);
- }
- render() {
- this._valA.textContent = this._calcModel._valA;
- this._valB.textContent = this._calcModel._valB;
- this._op.textContent = this._calcModel._op;
- this._res.textContent = this._calcModel._res;
- }
- }
- class CalcController {
- constructor(calcModel) {
- this._calcModel = calcModel;
- }
- setValA(val, evaluate = false) {
- this._calcModel.valA = val;
- if (evaluate) {
- this._calcModel.evaluate();
- }
- }
- setValB(val, evaluate = false) {
- this._calcModel.valB = val;
- if (evaluate) {
- this._calcModel.evaluate();
- }
- }
- setOp(val, evaluate = false) {
- this._calcModel.op = val;
- if (evaluate) {
- this._calcModel.evaluate();
- }
- }
- }
- class CalcControllerText extends CalcController {
- evaluateText(text) {
- let data = [...text.matchAll(/\s*(\d+)\s*([+-/*]){1}\s*(\d+)/g)][0];
- if (data) {
- let [, valA, op, valB] = data;
- this.setValA(valA);
- this.setValB(valB);
- this.setOp(op, true);
- return true;
- }
- return false;
- }
- }
- class CalcControllerHtmlInputText extends CalcControllerText {
- constructor(calcModel, input) {
- super(calcModel);
- this._input = document.querySelector(`#${input}`);
- this._input.addEventListener('change', (event) => { this.onChange(event); });
- }
- onChange(event) {
- if (!this.evaluateText(event.target.value)) {
- alert('Invalid input for evalution!');
- }
- }
- }
- const calcModel = new CalcModel();
- const calcViewConsole = new CalcViewConsole(calcModel);
- const calcViewHtmlDiv = new CalcViewHtmlDiv(calcModel, 'calcView');
- const calcController = new CalcController(calcModel);
- const calcControllerText = new CalcControllerText(calcModel);
- const calcControllerHtmlInputText = new CalcControllerHtmlInputText(calcModel, 'calcInputAll');
- calcController.setValA(3);
- calcController.setValB(5);
- calcController.setOp('+', true);
- calcController.setValA(7);
- calcController.setValB(8);
- calcController.setOp('*', true);
- //calcViewConsole.detach();
- //calcViewHtmlDiv.detach();
- calcController.setValA(5);
- calcController.setValB(6);
- calcController.setOp('*', true);
- console.log(calcControllerText.evaluateText(' 7 + 8 '));
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement