Password generator

by laustdeleuran

HTML

<form method="get" action="#">
    <h2>Password generator</h2>
    <fieldset>
        <label>Agency name</label>
        <input name="agency-name" type="text" />
    </fieldset>
    <fieldset>
        <label>Client name</label>
        <input name="client-name" type="text" />
    </fieldset>
    <fieldset>
        <label>Project name</label>
        <input name="project-name" type="text" />
    </fieldset>
    <fieldset>
        <label>Production year</label>
        <input name="production-year" type="number" pattern="[0-9]{4}" max="2100" min="2000"  />
    </fieldset>
    <fieldset>
        <label>Shuffle keywords</label>
        <input name="shuffle-keywords" type="checkbox" checked />
    </fieldset>
    <fieldset>
        <label>Add special characters</label>
        <input name="special-characters" type="checkbox" checked />
    </fieldset>
    <fieldset>
        <label>Use random capitals</label>
        <input name="random-capitals" type="checkbox" />
    </fieldset>
    <input type="submit" value="Generate" />
    <div class="feedback">Feedback</div>
</form>

CSS

body {
    font-size:16px;
    padding:1em;
    font-family:Arial, Helvetica Neue, Helvetica, sans-serif;
    background:#f9f9f9;
    line-height:1.5em;
}
h2 {
    font-weight:bold;
    margin-bottom:0.75em;
    padding-bottom:0.75em;
    border-bottom:1px solid #ccc;
}
fieldset {
    position:relative;
}
label {
    width:33%;
    float:left;
}
input {
    font-size:1em;
    font-family:Arial, Helvetica Neue, Helvetica, sans-serif;
}
input[type="submit"] {
    padding:0.5em;
    border:none;
    border-radius:0.25em;
    float:left;
    box-shadow:0 -1px #fff, 0 1px 1px #ccc;
    color:#fff;
    margin:0 0 1.5em 33%;
    background-color: #b316b3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b316b3), to(#a308a3)); /* Safari 4+, Chrome */
    background-image: -webkit-linear-gradient(top, #b316b3, #a308a3); /* Chrome 10+, Safari 5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, #b316b3, #a308a3); /* Firefox 3.6-15 */
    background-image:      -o-linear-gradient(top, #b316b3, #a308a3); /* Opera 11.10+ */
    background-image:         linear-gradient(to bottom, #b316b3, #a308a3); /* Firefox 16+ */
    cursor:pointer;
}
input[type="submit"]:hover {
    text-decoration:underline;
}
input[type="submit"]:active{
    text-decoration:underline;
    background-color: #a308a3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a308a3), to(#b316b3)); /* Safari 4+, Chrome */
    background-image: -webkit-linear-gradient(top, #a308a3, #b316b3); /* Chrome 10+, Safari 5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, #a308a3, #b316b3); /* Firefox 3.6-15 */
    background-image:      -o-linear-gradient(top, #a308a3, #b316b3); /* Opera 11.10+ */
    background-image:         linear-gradient(to bottom, #a308a3, #b316b3); /* Firefox 16+ */
}
.feedback {
    clear:both;
    margin:1.5em 0;
    border-radius:0.25em;
    background:#666;
    padding:0.75em;
    color:#fff;
}
.feedback.success {
...

JavaScript

if (typeof [].shuffle === 'undefined') {
    Array.prototype.shuffle = function() {
        var len = this.length,
            i = len;
        while (i--) {
            var p = parseInt(Math.random()*len),
                t = this[i];
            this[i] = this[p];
            this[p] = t;
        }
    };
}

$(document).ready(function(){
    $('form').each(function(){
        var $form = $(this),
            $agencyName = $form.find('input[name="agency-name"]'),
            $clientName = $form.find('input[name="client-name"]'),
            $projectName = $form.find('input[name="project-name"]'),
            $productionYear = $form.find('input[name="production-year"]'),
            $shuffleKeywords = $form.find('input[name="shuffle-keywords"]'),
            $specialCharacters = $form.find('input[name="special-characters"]'),
            $randomCapitals = $form.find('input[name="random-capitals"]'),
            $feedback = $form.find('.feedback').hide(),
            doFeedback = function(str,type) {
                if (!str) return;
                $feedback
                    .removeClass('success error')
                    .html(str)
                    .fadeIn(250);
                if (type) {
                    $feedback.addClass(type);
                }
            },
            doCapitalize = function(str){
                var final = str.toLowerCase();
                if ($randomCapitals[0].checked) {
                    var chars = final.split('');
                    final = '';
                    for (var i = 0; i < chars.length; i++) {
                        if (Math.random() > 0.5) {
                            final += chars[i].toUpperCase();
                        } else {
                            final += chars[i];
                        }
                    }
                } else {
                    final = final.substr(0,1).toUpperCase() + final.substr(1,final.length);
                }
                return final;
           ...