JSFiddle - React, Tailwind, and code Playground

by axitdn

HTML

<div id="element1">
</div>
<div id="element2">
</div>
<p id="a">Click here</p>
<p id="b">b</p>
<p id="c">c</p>

JavaScript

(function(window) {
    var iQuery = function(selector) {
        return new DOMWrapper(selector);
    };
    DOMWrapper= function(selector) {
        var elems;
        if (typeof selector == "string") {
            elems = document.getElementById(selector);
        } else {
            elems = selector;
        }
        this.collection = elems[1] ? Array.prototype.slice.call(elems) : [elems];
        return this;
    };
    iQuery.fn = DOMWrapper.prototype = {
        addStyles: function(styles) {
            var elems = this.collection;
            for (var i = 0, l = elems.length; i < l; i++) {
                for (var prop in styles) {
                    elems[i].style[prop] = styles[prop];
                }
            }
            return this;
        },
        show: function() {
            alert("ok");
            return this;
        },
        click:function(fn) {
            var elems = this.collection;
            for (var i = 0, l = elems.length; i < l; i++) {
                elems[i].onclick=fn;
            }
        }
    };
    window.$ = iQuery;
    return iQuery;
})(window);

//App
$('a').addStyles({
    color: 'red',
    backgroundColor: 'blue'
}).show();

$('a').click(function(){alert("Hello")});