jQuery Password Generator

index.html

<h1>jQuery Password Generator <small>(v2)</small></h1>
<h4>Using jQuery to quickly and easily generate passwords.</h4>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control input-lg" rel="gp" data-size="32" data-character-set="a-z,A-Z,0-9,#">
          <span class="input-group-btn"><button type="button" class="btn btn-default btn-lg getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
    </div>
  </div>
  <br><br>
  <div class="row">
    <div class="col-sm-6">
      <h2>Script Demo</h2><hr>
      
      
      <div class="form-group">
        <label class="text-muted">Using all of the character sets:</label>
        <div class="input-group">
          <input type="text" class="form-control" rel="gp" data-size="32" data-character-set="a-z,A-Z,0-9,#">
          <span class="input-group-btn"><button type="button" class="btn btn-default getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
      <div class="form-group">
        <label class="text-muted">Using both the a-z and A-Z character sets:</label>
        <div class="input-group">
          <input type="text" class="form-control" rel="gp" data-size="32" data-character-set="a-z,A-Z">
          <span class="input-group-btn"><button type="button" class="btn btn-default getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
      <div class="form-group">
        <label class="text-muted">Using only the A-Z character set:</label>
        <div class="input-group">
          <input type="text" class="form-control" rel="gp" data-size="20" data-character-set="A-Z">
          <span class="input-group-btn"><button type="button" class="btn btn-default getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
      <div class="form-group">
        <label class="text-muted">Using only the a-z character set:</label>
        <div class="input-group">
          <input type="text" class="form-control" rel="gp" data-size="32" data-character-set="a-z">
          <span class="input-group-btn"><button type="button" class="btn btn-default getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
      <div class="form-group">
        <label class="text-muted">Using only the number character set:</label>
        <div class="input-group">
          <input type="text" class="form-control" rel="gp" data-size="12" data-character-set="0-9">
          <span class="input-group-btn"><button type="button" class="btn btn-default getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
      
    </div>
    <div class="col-sm-5 col-sm-offset-1">
      
      <h2>How It Works</h2><hr>
      <p><code>data-size</code> attribute is used to set the number of characters that is used in the field, if you need a password with 12 characters, then set this attribute to 12.</p>
      <p><code>data-character-set</code> attribute is used to set the character type used in the password. You can use numbers <code>0-9</code>, letters <code>a-z</code> (and or) <code>A-Z</code>, and spical characters <code>#</code>. All of these sets can be used individually work together.</p>
      
    </div>
  </div>
</div>

jquery-password-generator.markdown

jQuery Password Generator

A quick snippet of code to create a jQuery password generator.

A Pen by Uriel Wilson Jr. on CodePen.

License.

script.js

// Generate a password string
function randString(id){
  var dataSet = $(id).attr('data-character-set').split(',');  
  var possible = '';
  if($.inArray('a-z', dataSet) >= 0){
    possible += 'abcdefghijklmnopqrstuvwxyz';
  }
  if($.inArray('A-Z', dataSet) >= 0){
    possible += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  }
  if($.inArray('0-9', dataSet) >= 0){
    possible += '0123456789';
  }
  if($.inArray('#', dataSet) >= 0){
    possible += '![]{}()%&*$#^<>~@|';
  }
  var text = '';
  for(var i=0; i < $(id).attr('data-size'); i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}

// Create a new password on page load
$('input[rel="gp"]').each(function(){
  $(this).val(randString($(this)));
});

// Create a new password
$(".getNewPass").click(function(){
  var field = $(this).closest('div').find('input[rel="gp"]');
  field.val(randString(field));
});

// Auto Select Pass On Focus
$('input[rel="gp"]').on("click", function () {
   $(this).select();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

body {
  background-color: #5c4084;
  margin: 50px;
}
.container {
  background-color: #fff;
  padding: 40px 80px;
  border-radius: 8px;
}
h1 {
  color: #fff;
  font-size: 4rem;
  font-weight: 900;
  margin: 0 0 5px 0;
  background: -webkit-linear-gradient(#fff, #999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}
h4 {
  color: lighten(#5c3d86,30%);
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin: 0 0 35px 0;
}
input[type=text]:focus {
  border-color: darken(#dce4ec, 20%);
}
.btn.btn-default {
  outline: none !important;
  &:active {
    background-color: darken(#95a5a6, 20%) !important;
  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/flatly/bootstrap.min.css" rel="stylesheet" />