JSFiddle - React, Tailwind, and code Playground

YUI Dependency Management Add a t-rabbits module, then add a t-killer-rabbits module that requires t-rabbit to create a class KillerRabbit class that extends RegularRabbits. Also refactor output function to use node-base, instead of writing directly with document.write.

by David Iglesias

HTML

<div id="output"></div>

CSS

#output { 
    padding: 20px; 
    font-family: "Georgia", serif;
}
#output p { margin-bottom: 10px; }
#output hr { margin: 20px; }
#output blockquote {
   padding: 20px;
   border-left: 4px solid #AAA;        
}
#output strong { color: red; }

JavaScript

// Build adds the boilerplate for you
YUI.add('t-rabbits', function(Y) {
    Y.namespace('Rabbits');

    /**
     * Constructor function to create regular rabbits
     * @param name {String} The name of the rabbit
     * @constructor
     */
    Y.Rabbits.RegularRabbit = function(name) {
        this.name = name;
        if (name) {
            this._writeOutput('Created RegularRabbit: ' + this.name);
        }
    };

    /**
     * This method appends a string to the contents of the output div
     * @param str {String} The string to append
     */
    Y.Rabbits.RegularRabbit.prototype._writeOutput = function(str) {
        Y.one('#output').append('<p>' + str + '</p>');
    };
    
    /**
     * This method lets our rabbits speak
     * @param what {String} Whatever the rabbit has to say
     */
    Y.Rabbits.RegularRabbit.prototype.speak = function(what) {
        this._writeOutput('<blockquote>' + this.name + ' says: ' + what + '</blockquote>');
    };

// The build also adds this boilerplate!
}, '3.5.0', {
    requires: ['node-base'] // Used to "writeOutput"
});

YUI.add('t-killer-rabbits', function(Y) {
    Y.namespace('Rabbits');
    
    /**
     * Constructor function to create killer rabbits
     * @param name {String} The name of the rabbit
     * @param eyes {String} The color of the eyes of the killer rabbit
     * @constructor
     */
    Y.Rabbits.KillerRabbit = function(name, eyes) {
        Y.Rabbits.RegularRabbit.call(this, name);
        this.eyes = eyes;
        this._writeOutput(this.name + ' is now a ' + this.eyes + '-eyed KillerRabbit!');
    }
    
    // The prototype is a RegularRabbit, also fix the constructor reference
    Y.Rabbits.KillerRabbit.prototype = new Y.Rabbits.RegularRabbit();
    Y.Rabbits.KillerRabbit.prototype.constructor = Y.Rabbits.KillerRabbit;
    
    /**
     * Kills a victim
     * @param who {String} The name of the victim killed by this rabbit
     */
    Y.Rabbits.KillerRabbit.prototype.kill = function(who) {
...