JSFiddle - React, Tailwind, and code Playground

Twitter Bootstrap Button Code Generator

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<h3>Twitter Bootstrap Button Code Generator</h3>
<p>140 Icons, 7 color options. Awesome.</p>

<h4>Options:</h4>
<div class="span3">
    <label for="btnUrl">URL:</label>
    <input type="text" name="btnUrl" id="btnUrl" />
    
    <label for="size">Select Button Size:</label>
    <select name="size" id="size">
        <option value="">-- Select --</option>
        <option value="btn-mini">Mini</option>
        <option value="btn-small">Small</option>
        <option value="btn">Default</option>
        <option value="btn-large">Large</option>
        <option value="btn-link">Link (icon &amp; text only)</option>
    </select>
    
    <label for="icon">Select Icon:</label>
    <select name="icon" id="icon">
        <option value="">-- Select --</option>
        <option value="icon-glass">glass</option>
        <option value="icon-music">music</option>
        <option value="icon-search">search</option>
        <option value="icon-envelope">envelope</option>
        <option value="icon-heart">heart</option>
        <option value="icon-star">star</option>
        <option value="icon-star-empty">star-empty</option>
        <option value="icon-user">user</option>
        <option value="icon-film">film</option>
        <option value="icon-th-large">th-large</option>
        <option value="icon-th">th</option>
        <option value="icon-th-list">th-list</option>
        <option value="icon-ok">ok</option>
        <option value="icon-remove">remove</option>
        <option value="icon-zoom-in">zoom-in</option>
        <option value="icon-zoom-out">zoom-out</option>
        <option value="icon-off">off</option>
        <option value="icon-signal">signal</option>
        <option value="icon-cog">cog</option>
        <option value="icon-trash">trash</option>
        <option value="icon-home">home</option>
        <option value="icon-file">file</option>
        <option...

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);

body { margin: 10px 20px; font-family: 'Raleway'; background: #f2f2f2; color: #444; }
h3 { color: #005299; margin: 0; }
h4 { margin-left: 20px; }
p { font-size: 18px; margin: 0 0 20px; }
textarea { width: 440px; }
label { margin: 0; }
span { margin-left: 8px; }

JavaScript

$(document).ready(function() {
    
    $("#btnUrl").change( function() {
        var urlText = $('input[name="btnUrl"]').val();
        $("a").attr("href", urlText)
        updateTextarea();
    });
    
    $("#btnText").change( function() {
        var btnText = $('input[name="btnText"]').val();
        $("span").html(btnText);
        updateTextarea();
    });
    
    var button = $('.btn'),
        buttonInner = button.children('i'),
        iconSelect = $('select[name="icon"]');
    
   $("select[name='size'], select[name='color']").change(function() {
        button.attr('class', '');
        button.addClass('btn').addClass($("select[name='size']").children('option:selected').val());
        button.addClass('btn').addClass($("select[name='color']").children('option:selected').val());
        updateTextarea();
    });

    iconSelect.change(function() {
        buttonInner.removeClass().addClass('icon-white').addClass($(this).children('option:selected').val());
        updateTextarea();
    });
});

function updateTextarea() {
    var result = $('textarea[name="result"]'),
        target = $('.target'),
        targetHtml = target.html();
        
    result.val(targetHtml);
}