JSFiddle - React, Tailwind, and code Playground

JQUERY PLUGIN GENERATOR

by Jennifer Perrin

HTML

<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<h1>Tha jQuery code</h1>
<p>
    <span class="notes">by Kees C. Bakker</span>
    <span class="notes">
        After writing some jQuery plugins I decided it was time to build a 
        generator that would create the basic structure of the plug in. The
        class that's generated is based on the article 
        <a href="http://jmquery.com/2010/04/jquery-plugin-development-pattern/">
            jQuery Development Pattern</a>. If you have some questions or feedback,
        just <a href="http://keestalkstech.blogspot.com">post it on my blog</a>.
    </span>
</p>
<p>
    <h2>General</h2>
    <label title="Name of the class." for="Name">Plugin name:</label><input id="Name" type="text" class="name" /><br/>
    <label title="Will occur on as the scription of the plugin." for="Description">Description:</label><textarea id="Description" class="description" rows="1"></textarea><br/>
</p>
<p>
    <h2>Default settings</h2>
    <table id="Options">
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default value</th>
            <th></th>
        </tr>
    </table>
    <button id="AddOption">Add</button>
</p>
<p>
    <h2>Privates</h2>
    <span class="notes">
        Add here the options. By default the element is saved to <pre>this.$el</pre>, the settings are saved to <pre>this.opts</pre> and the defaults are save to <pre>this.defaults</pre>.
    </span>
    <table id="Constants">
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Value</th> 
            <th></th>
        </tr>
    </table>
    <button id="AddConstant">Add</button>
</p>
<p>
    <h2>Public methods</h2>
    <table id="Methods">
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th></th>
        </tr>
    </table>
    <button id="AddMethod">Add</button>
</p>
<p>
    <h2>Tha code:</h2>
    <pre...

CSS

body{
    font-family:arial; 
    font-size:13px;  
    padding:10px;
}

p {
    margin-bottom:20px;   
}

label{
    width:90px;
    display:inline-block;
    vertical-align:text-top;
    padding-top:4px;
}

textarea, input, select{
    margin:1px;
    padding:1px;
    font-family: arial;
    font-size:12px;
    vertical-align:text-top;
}

.row textarea{
    vertical-align:text-bottom;
    margin-top:1px;
}

textarea {    
    overflow-x:hidden;
    overflow-y:hidden;
    width:239px;
    margin-top:4px;
    
    padding-top:2px;
    padding-bottom:2px;
    padding-left:3px;
    padding-right:2px;
    resize:none;
    
    font-family:courier new;
    font-size:12px;
    line-height:1.3em;
}

textarea.description {
    font-family:arial;
    font-size:12px;
    line-height:1.3em;
}

input { 
    width: 100px;
}

table {
    display:none;   
}

h1, h2, h3 {
    font-family:Impact;  
    font-size:20px; 
    margin-bottom:4px;
}

h1{
    font-size:25px; 
    text-transform:uppercase;
}

h3
{
    color:gray;
}

th {
    padding-left:1px;
}

td{
    vertical-align:top;
    padding-right:2px;
    font-size:20px;
}

ul {
    list-style-type: disc;
    list-style-position: inside;
    margin:10px;
}

ul, li { 
    color:gray;
}

span.notes {
    display:block;
    color:gray;
    margin-bottom:8px;
    font-size:12px;
}

span.notes pre {
    display:inline;
    background-color:#F1F1F1;
}

#Name {
    width:240px;   
}

#code
{
    border:solid 1px #F1F1F1;
    padding:3px;
    width:100%;
    overflow-x:auto;
}

tr.row button
{
    vertical-align:top;
    margin-top:0px;
}

.error, .name-error {
    border:1px solid red;
    padding:2px;
}

#error{
    display:none;
    color:red;
    display:block;
    margin-top:4px;
}

JavaScript

//JQUERY GENERATOR BY Kees C. Bakker - http://jsfiddle.net/KeesCBakker/QkPBF/

(function($){

var optionRow = 
    '<tr class="row"><td><input class="name" /></td><td><select class="type"><option value="string">string</option><option value="number">number/bool</option><option value="script">function/script</option></select></td><td><textarea rows="1" class="value" ></textarea></td><td><button class="deleteRow">delete</button></td></tr>';

var methodRow = '<tr class="row"><td><input class="name" /></td><td><textarea rows="1" class="description" ></textarea></td><td><button class="deleteRow">delete</button></tr>';

var constantRow = '<tr class="row"><td><input class="name" /></td><td><select class="type"><option value="string">string</option><option value="number">number/bool</option><option value="script">function/script</option></select></td><td><textarea rows="1" class="value" ></textarea></td><td><button class="deleteRow">delete</button></td></tr>';

$('#Name').focus();

$('#AddOption').click(function() {
    addRow($('#Options'), optionRow);
});

$('#AddConstant').click(function() {
    addRow($('#Constants'), constantRow);
});

$('#AddMethod').click(function() {
    addRow($('#Methods'), methodRow);
});

$('.deleteRow').live('click', function() {

    var $this = $(this);

    if ($this.parents('table:first').find('tr').length === 2) {
        $this.parents('table:first').hide();
    }

    $this.parents('tr:first').remove();

    refresh();
});

function addRow($table, template) {
    var $row = $(template);
    $table.append($row);
    $table.show();
    $row.find('input:first').focus();

    $('select', $row).change(function() {
        $('textarea', $row).focus();
    });
}

function refresh() {
    
    if($('.error:first').length > 0)
    {
        $('#error').show();
    }
    else
    {
        $('#error').hide();
    }

    var name = $('#Name').val();
    var className = name.substr(0, 1).toUpperCase() + name.substr(1);
    var jqName =...