JSFiddle - React, Tailwind, and code Playground

Twitter Bootstrap Button Code Generator More Work

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">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">Medium</option>
        <option value="btn-large">Large</option>
        <option value="btn-link">Link (Icon &amp; Text Only)</option>
    </select>
    
    <label for="icon">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>
    </select>
</div>
<div class="span3">
    <label for="btnText">Text:</label>
    <input type="text" name="btnText" id="btnText" />

    <label for="color">Color:</label>    
    <select name="color" id="color">
        <option value="">-- Select --</option>
        <option value="btn-primary">Dark Blue</option>
        <option value="btn-info">Twitter Blue</option>
        <option value="btn-danger">Danger Red</option>
        <option value="btn-success">Success Green</option>
        <option value="btn-warning">Warning Orange</option>
        <option value="btn-inverse">Dark Gray</option>
    </select>
</div>

<div class="clearfix"></div>

<h4>Demo:</h4>
<div class="span6">
    <div class="target"><a href="" class="btn"><i class=""></i><span></span></a></div>
</div>

<div...

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; }

.iconed { margin-left: 8px; }

JavaScript

$(document).ready(function() {
    // Populate the href
    $("#btnUrl").change( function() {
        var urlText = $('input[name="btnUrl"]').val();
        $("a").attr("href", urlText)
        updateTextarea();
    });
    
    // Populate the Button Text
    $("#btnText").change( function() {
        var btnText = $('input[name="btnText"]').val();
        $("span").html(btnText);
		// If text is entered, add some padding
		if ($("#btnText").val() != '') {
			$("span").attr('class', 'iconed');
		} else {
			$("span").removeClass();
		}
        updateTextarea();
    });
    
    // Disable the Color select if Link is selected
    $("#size").change( function() {
        if ($("select[name='size']").val() == "btn-link") {
            $("select[name='color']").attr("disabled","disabled");
        } else {
            $("select[name='color']").removeAttr("disabled");
        }
    });

	// Add the selected options to the button
    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() {
        if ($("select[name='size']").val() != "btn-link") {
            buttonInner.removeClass().addClass('icon-white').addClass($(this).children('option:selected').val());
            updateTextarea();
        } else {
            buttonInner.removeClass().addClass($(this).children('option:selected').val());
            updateTextarea();
        }
    });
});

// Update the Text Area with the Copy/Paste code
function updateTextarea() {
    var result = $('textarea[name="result"]'),
        target = $('.target'),
        targetHtml = target.html();   ...