JSFiddle - React, Tailwind, and code Playground

by someprimetime

JavaScript

/*************************************************
 * Commented and explanation of why it doesn't work
 *************************************************/

/** 
 * Card is a closure which contains an object that has some methods inside of it.
 * The inner Card object is an object literal and it's being revealed in a revealing module-like pattern.
 * The only problem is that the scope of `this` is overwritten each time a new instance is created.
 * therefore, Card will overwrite any values passed into as in our `name` which we pass in through the 
 * "constructor"
 * 
 * To fix this, we need to close in on our `Card` object.
 */
var Card = (function () {

    var Card = {

        template: "<div class='Card'><span class='name'></span></div>",

        /**
         * This acts as our constructor and is called whenever we instantiate a new instance of our Card
         * It calls `_parseTemplate` which sets Card.domNode to our template HTML fragment (from `this.template`)
         * and additionally calls our setName method which set the innerHTML of our `name` span element to
         * the name passed in when the object was created.
         * 
         * @param `params` is our `arguments` Array object. 
         */
        init: function (params) {
            this._parseTemplate();
            this.setName(params.name);
        },

        /**
         * This *tries* to set the name property of `this` Card object.
         * Unfortunately, this won't work because we need pass in the [0]th index of the `arguments` array object
         * and grab the `name` key. Since we didn't pass in a valid string for our name,
         * our conditional isn't going to execute. If it were to, then the intent is to grab the `span` element
         * from within our template and make its innerHTML (bad method to be using due
         * to XSS issues in the first place, although it's fast so...), 
         * the name that was passed in as the constructor.
         * 
         *...