JSFiddle - React, Tailwind, and code Playground

by marcsmith

HTML

<script src="https://github.com/ded/klass/raw/master/klass.min.js"></script>
<!-- want to play around with klass & its clean syntax, and i'm wondering if i'm overcomplicating this by
     wrapping a new klass (anon) with Dude, so i can init properties on (ultimately) Dude using
     an object literal which get's passed to the klass constructor -->
<ol id="foo"></ol>

CSS

ol {
    font-weight: bold;
}
li span {
    display: block;
    margin: 0 0 10px 20px;
    font-weight: normal;
}

JavaScript

var Dude = function(objLit) {

    return new (klass(objLit)
        .methods({

            initialize: function() {
                this._cleanupProperties();
                this._setDerivedProperties();
            },

            _cleanupProperties: function() {
                if (this.shorts) {
                    this.shorts = this.shorts.replace(/Speedo/g, '\'nana Hammock');
                }
            },
            _setDerivedProperties: function() {
                if (!this.shoes) {
                    this.shoes = (this.socks && this.socks==='Wigwam') ? "Converse": "sandals";
                }
            }

        }));
};

var coolDude = {
    'shirt'  : 'plaid',
    'shorts' : 'Speedo',
    'socks'  : 'Wigwam'
};
var lameDude = {
    'shirt'  : 'button-up',
    'shorts' : 'cargo',
    'socks'  : 'dress',
    'shoes'  : 'loafers'
};

[new Dude(coolDude), new Dude(lameDude)].forEach(heyDude);

function heyDude(el, index) {
    $('#foo').append('<li>DUDE ' + (index+1) + ' is rockin\' these:<span>shirt: ' + el.shirt + '<br/>shorts: ' + el.shorts + '<br />socks: ' + el.socks + '<br />shoes: ' + el.shoes + '</span></li>');
}