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 TrafficLightM {
- static colors = ['red', 'yellow', 'green'];
- constructor(color) {
- this._views = [];
- this.colorString = color;
- }
- addView(view) {
- this._views.push(view);
- }
- removeView(view) {
- this._views.splice(this._views.indexOf(view), 1);
- }
- notify() {
- if (this._views.length) {
- for (let view of this._views) {
- view.render();
- }
- }
- }
- set currentColor(val) {
- if (val >= 0) {
- this._currentColor = val;
- if (this._currentColor > TrafficLightM.colors.length - 1) {
- this._currentColor = 0;
- }
- }
- this.notify()
- }
- get currentColor() { return this._currentColor; }
- set colorString(val) {
- this.currentColor = TrafficLightM.colors.indexOf(val);
- }
- get colorString() { return TrafficLightM.colors[this._currentColor]; }
- cycle() {
- ++this.currentColor;
- }
- }
- class TrafficLightV {
- constructor(model) {
- this._model = model;
- this.attach();
- }
- attach() {
- this._model.addView(this);
- }
- detach() {
- this._model.removeView(this);
- }
- render() {
- // empty!
- }
- }
- class TrafficLightVConsole extends TrafficLightV{
- render() {
- console.log(`TrafficLight: ${this._model.colorString}`);
- }
- }
- {
- const tlm = new TrafficLightM('green');
- const tlVConsole = new TrafficLightVConsole(tlm);
- //console.log(`TrafficLightM currentColor: ${tlm.currentColor}`);
- //console.log(`TrafficLightM colorString: ${tlm.colorString}`);
- //for (let i = 0; i < 5; ++i, tlm.cycle()) {
- // //console.log(`TrafficLightM colorString: ${tlm.colorString}`);
- //}
- tlm.colorString = 'red';
- tlm.colorString = 'yellow';
- tlm.currentColor = 2;
- tlm.currentColor = 1;
- }
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment