JSFiddle - React, Tailwind, and code Playground

by rajeshpillai

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<ul>
    <li>Clean dishes</li>
    <li>Walk dog</li>
    <li>Mop floor</li>
</ul>

CSS

.tj-todo {
    padding-left: 0;
}
.tj-todo .tj-todo-item label {
    padding: 0.5em 0.3em;
    display: block;
}
.tj-todo .ui-state-active {
    text-decoration: line-through;
}

JavaScript

$.widget( "tj.todo", {
    options: {
        name: "todo"
    },
    _create: function() {
        this.element.addClass( "tj-todo ui-widget ui-widget-content " +
            "ui-corner-all" );
        this._renderList();
        this._on( this.element, {
            "click input": function( event ) {
                // In case a user adds class="ui-state-disabled" in a list item's markup
                if ( $( event.target ).parents( ".ui-state-disabled" ).length > 0 ) {
                    event.preventDefault();    
                    return;
                }
                this._renderList();
                this._trigger( event.target.checked ? "check" : "uncheck",
                    event, { value: event.target.value } );
            }
        });
    },
    add: function( value ) {
        this.element.append( "<li>" + value + "</li>" );
        this._renderList();
        this._trigger( "add", null, { value: value } );
    },
    remove: function( value ) {
        this.element.find( "[value='" + value + "']" )
            .parents( "li:first" )
            .remove();
        this._trigger( "remove", null, { value: value } );
    },
    check: function( value ) {
        this._toggleCheckbox( value, true );
        this._trigger( "check", null, { value: value } );
    },
    uncheck: function( value ) {
        this._toggleCheckbox( value, false );
        this._trigger( "uncheck", null, { value: value } );
    },
    _toggleCheckbox: function( value, checked ) {
        this.element.find( "[value='" + value + "']" )
            .prop( "checked", checked );
        this._renderList();
    },
    _setOption: function( key, value ) {
        this._super( key, value );
        this._renderList();
        if ( key == "disabled" ) {
            this.element
                .find( "input" ).prop( "disabled", value );
            this.element
                .find( "li" ).toggleClass( "ui-state-disabled", value );
        }
    },
    _renderList:...