jsClassMarkerBAD

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study</title>
</head>
<body>
    <script>
        'use strict'
        class Marker {
            constructor(color, amountInk) {
                this.color = color
                this.ink = amountInk
                this.charSymvol = this.symvolCount(amountInk)
            }

            symvolCount(amountInk) {
                return amountInk / 0.5
            }

            printText(text) {
                let count = 0;
                for (let i = 0; i < this.charSymvol; ++i) {
                    ++count;
                    if (text[i] == " ") {
                        ++count;
                    }
                }
                return document.writeln(`<p style="color: ${this.color}">${text.substr(0, count)}</p>`);
            }
        }


        class FillMarker extends Marker {
            constructor(color, amountInk) {
                super(color, amountInk)
            }

            fill(amountInk) {
                if (amountInk > 100) {
                    this.charSymvol = 100
                } else {
                    this.charSymvol += this.symvolCount(amountInk)
                }
            }
        }

        let marker1 = new Marker('blue', 13);
        //let msg = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
        marker1.printText('Lorem Ipsum is s');
        marker1.printText('Lorem');
        marker1.printText('Ipsum is si');


        let marker2 = new FillMarker('red', 13);
        marker2.printText('Lorem Ipsum is s');
        marker2.printText('Lorem');
        marker2.printText('Ipsum is simply');
        marker2.fill(20);
        marker2.printText('Lorem Ipsum is simply dummy text of the printing and typesetting industry.');
    </script>
</body>
</html>