JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<button>Generate</button><br />

<div id="dl-list">
    effect: <br />
    slide <input type="checkbox" value="slide" /><br />
    tooltip <input type="checkbox" value="tooltip" /><br />
</div>


<br /><br />

<textarea style=" width: 300px; height: 200px; "></textarea>

JavaScript

$('input[value="slide"]').attr('checked', true );



$('input[type="checkbox"]').on('change', function() {

    var obj = $(this);
    
    var effect = '';
    
    if ( $('input[value="slide"]').is(':checked') ) { 
        effect += '\t function slide() {}\n';
    }
    
    if ( $('input[value="tooltip"]').is(':checked') ) { 
        effect += '\t function tooltip() {}';
    }

    var minimal = 'function minimal() { \n '+ effect +' \n}';
    
    $('textarea').text( minimal );
    
    
});
    
    

// Just realized that this wont work because of ....there's no code minifying........





    // Load separate functions from separate files with ajax?
    
    
    
    
    
// OR perhaps use multiple js files with different content
    
// one specific effect... or something....   IE, similar to jquery UI

// then use jquery to change the url for the right .zip 
    
    


    

// This could be a tad easier for me though....