JSFiddle - React, Tailwind, and code Playground

by lelandrichardson

HTML

<div class="container">
    <ul>
        <li id="pink">Pink</li>
        <li id="salmon">Salmon</li>
        <li id="blue">Blue</li>
        <li id="green">Green</li>
        <li id="red">Red</li>
    </ul>  
</div>

CSS

.container {
    width: 400px;
 }

JavaScript

// custom selector implementation
// nickname: dolla
;(function(){

    // utility methods
    // ----------------------------------------------------
    var nop = function() {};
    var compose = function(a,b){
        return function(){
            a.call(this);
            b.call(this);
        }.bind(this);
    };
    // allows registration of multiple handlers without clobbering existing ones
    var registerEvent = function(el,event,callback){
        el['on' + event] = compose.call(el, el['on' + event] || nop, callback );
    };


    // $ and $$ constructors...
    // ---------------------------------------------------
    var $ = function(selector) {
        return document.querySelector(selector);
    };

    var $$ = function(selector) {
        if(this instanceof $$ === false){
            return new $$(selector);
        }
        var items = this,
            results = [],
            length = 0,
            i = 0;

        // this doesn't work on IE 8- and Blackberry Browser and i don't really care.
        results = Array.prototype.slice.call(document.querySelectorAll(selector));

        length = results.length;

        // add the results to the items object
        for ( ; i < length; ) {
            items[i] = results[i];
            i++;
        }

        // add some additional properties to this items object to
        // make it look like an array per http://www.elijahmanor.com/2013/02/jquery-object-quacks-like-array-duck.html
        items.length = length;
        items.splice = [].splice();

        return items;
    };

    $$.fn = $$.prototype;
    $.fn = $.prototype;

    // Prototype Methods
    // -----------------------------------------
    $$.fn.each = function(callback) {
        var i = 0;
        for ( ; i < this.length; ) {
            callback.call(this[i]);
            i++;
        }
        return this; // implement chaining
    };
    
    //register event handlers
    $$.fn.on = function(event, callback) {
       ...