jsInterfaceSegregationEx

<!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 Animal {
            constructor(name) {
                this.name = name;
            }

            sayName() {
                console.log(`My name is ${this.name}`);
            }
        }

        const walker = {
            walk() {
                console.log(`${this.name} can walk!`);
            }
        }

        const swimer = {
            swim() {
                console.log(`${this.name} can swim!`);
            }
        }

        const flyer = {
            fly() {
                console.log(`${this.name} can fly!`);
            }
        }


        class Cat extends Animal {
            constructor(name) {
                super(name)
            }
        }

        class Eagle extends Animal {
            constructor(name) {
                super(name)
            }
        }

        class Shark extends Animal {
            constructor(name) {
                super(name)
            }
        }

        Object.assign(Cat.prototype, walker, swimer);
        Object.assign(Eagle.prototype, walker, flyer);
        Object.assign(Shark.prototype, swimer);


        const cat = new Cat('Tom');
        const eagle = new Eagle('Linux');
        const shark = new Shark('Fishy');

        cat.walk();
        cat.swim();

        eagle.walk();
        eagle.fly();

        shark.swim();
    </script>
</body>

</html>