avr39ripe

jsInterfaceSegregationEx

Jun 21st, 2021
588
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.     <div id="calcController" class="centered">
  52.         <input id="calcInputAll" type="text" placeholder="valA oper valB">
  53.     </div>
  54.  
  55.     <script>
  56.         'use strict'
  57.  
  58.         class Animal {
  59.             constructor(name) {
  60.                 this.name = name;
  61.             }
  62.  
  63.             sayName() {
  64.                 console.log(`My name is ${this.name}`);
  65.             }
  66.         }
  67.  
  68.         const walker = {
  69.             walk() {
  70.                 console.log(`${this.name} can walk!`);
  71.             }
  72.         }
  73.  
  74.         const swimer = {
  75.             swim() {
  76.                 console.log(`${this.name} can swim!`);
  77.             }
  78.         }
  79.  
  80.         const flyer = {
  81.             fly() {
  82.                 console.log(`${this.name} can fly!`);
  83.             }
  84.         }
  85.  
  86.  
  87.         class Cat extends Animal {
  88.             constructor(name) {
  89.                 super(name)
  90.             }
  91.         }
  92.  
  93.         class Eagle extends Animal {
  94.             constructor(name) {
  95.                 super(name)
  96.             }
  97.         }
  98.  
  99.         class Shark extends Animal {
  100.             constructor(name) {
  101.                 super(name)
  102.             }
  103.         }
  104.  
  105.         Object.assign(Cat.prototype, walker, swimer);
  106.         Object.assign(Eagle.prototype, walker, flyer);
  107.         Object.assign(Shark.prototype, swimer);
  108.  
  109.  
  110.         const cat = new Cat('Tom');
  111.         const eagle = new Eagle('Linux');
  112.         const shark = new Shark('Fishy');
  113.  
  114.         cat.walk();
  115.         cat.swim();
  116.  
  117.         eagle.walk();
  118.         eagle.fly();
  119.  
  120.         shark.swim();
  121.     </script>
  122. </body>
  123.  
  124. </html>
RAW Paste Data