JSFiddle - React, Tailwind, and code Playground

by richardneililagan

HTML

<button data-url="twitter">foo</button>
<button data-url="facebook">bar</button>
Base
<div id="main">
</div>

CSS

button { width:100px; padding:4px; }

#main {
    padding:10px; 
    background-color:#eee;
    margin-top:10px;
}

JavaScript

var nico = {};

jQuery(function($) {
    
    $.extend(nico, {
        
        container : $('#main'),
        
        templates : {
            itemBox : $('<div>')
        },
        
        fn : {
            createItemBox : function (opts) {
                
                // defaults
                $.extend({
                    text : 'Flickr'
                }, opts);
                
                var el = nico.templates.itemBox
                    .clone().text(opts.text);
                
                nico.container.append(el);
                
            },
            
            performAjax : function (opts) {
                
                // defaults
                $.extend(opts, {});
                
                nico.fn.createItemBox({
                    text : opts.url
                });
                
                /*
                $.ajax({
                  // do something  
                }).success(function(m) {
                
                    if (!opts.button.is(':checked')) { return; }
                
                    m.each(function() {
                        nico.createItemBox(this);
                    });
                    
                });
                */
            }
        }
        
    });
    
    $('button').click(function() {
        
        nico.fn.performAjax({
            url : $(this).data('url')
        });
        
    });
    

});