avr39ripe

jsMVCDraft

Jun 10th, 2021
473
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en" id="html">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>MVC</title>
  7.     <style>
  8.         html,
  9.         body {
  10.             display: flex;
  11.             width: 95%;
  12.             height: 95%;
  13.             min-width: 810px;
  14.             min-height: 410px;
  15.             align-items: center;
  16.             justify-content: center;
  17.             margin: 8px 15px;
  18.         }
  19.  
  20.         .centered {
  21.             display: flex;
  22.             flex-direction: row;
  23.             align-items: center;
  24.             justify-content: center;
  25.             padding: 50px;
  26.         }
  27.  
  28.         .calcElement {
  29.             display: flex;
  30.             justify-content: center;
  31.             align-items: center;
  32.             min-width: 50px;
  33.             min-height: 50px;
  34.             border: 1px solid black;
  35.             margin: 5px 5px;
  36.             padding: 2px 2px;
  37.             font: bold 30px arial;
  38.         }
  39.     </style>
  40. </head>
  41.  
  42. <body>
  43.     <div id="calcView" class="centered">
  44.         <div id="calcValA" class="calcElement"></div>
  45.         <div id="calcOp" class="calcElement"></div>
  46.         <div id="calcValB" class="calcElement"></div>
  47.         <div id="calcEqual" class="calcElement">=</div>
  48.         <div id="calcRes" class="calcElement"></div>
  49.     </div>
  50.  
  51.     <script>
  52.         'use strict'
  53.  
  54.         class CalcModel {
  55.             constructor() {
  56.                 this._valA = 0;
  57.                 this._valB = 0;
  58.                 this._op = '+';
  59.                 this._res = 0;
  60.                 this._views = [];
  61.             }
  62.  
  63.             static operations = {
  64.                 '+': (a, b) => +a + +b,
  65.                 '-': (a, b) => a - b,
  66.                 '/': (a, b) => a / b,
  67.                 '*': (a, b) => a * b
  68.             };
  69.  
  70.             evaluate() {
  71.                 //if (this.op == '+') { this._res = this._valA + this._valB }
  72.                 //else if (this.op == '-') { this._res = this._valA - this._valB }
  73.  
  74.                 if (Object.keys(CalcModel.operations).includes(this._op)) {
  75.                     this._res = CalcModel.operations[this._op](this._valA, this._valB);
  76.                 }
  77.                 else {
  78.                     this._res = 'ERROR';
  79.                 }
  80.                 this.notify();
  81.             }
  82.  
  83.             addView(view) {
  84.                 this._views.push(view);
  85.             }
  86.  
  87.             removeView(view) {
  88.                 this._views.splice(this._views.indexOf(view), 1);
  89.             }
  90.  
  91.             notify() {
  92.                 for (let view of this._views) {
  93.                     view.render();
  94.                 }
  95.             }
  96.         }
  97.  
  98.         class CalcView {
  99.             constructor(calcModel) {
  100.                 this._calcModel = calcModel;
  101.                 this.attach();
  102.             }
  103.  
  104.             attach() {
  105.                 this._calcModel.addView(this);
  106.             }
  107.  
  108.             detach() {
  109.                 this._calcModel.removeView(this);
  110.             }
  111.  
  112.             render() {
  113.                 console.log(`${this._calcModel._valA} ${this._calcModel._op} ${this._calcModel._valB} = ${this._calcModel._res}`);
  114.             }
  115.         }
  116.  
  117.  
  118.         const calcModel = new CalcModel();
  119.         const calcView = new CalcView(calcModel);
  120.  
  121.         calcModel._valA = 3;
  122.         calcModel._valB = 5;
  123.         calcModel._op = '+';
  124.  
  125.         calcModel.evaluate();
  126.  
  127.         calcModel._valA = 7;
  128.         calcModel._valB = 8;
  129.         calcModel._op = '*';
  130.  
  131.         calcModel.evaluate();
  132.                 //console.log(calcModel._res);
  133.  
  134.  
  135.     </script>
  136. </body>
  137.  
  138. </html>
RAW Paste Data