Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Random password" />
<meta charset=utf-8 />
<title></title>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://www.eyecon.ro/bootstrap-slider/js/bootstrap-slider.js"></script>
</head>
<body>
  
<form class="form-horizontal" role="form">
  <h3>Password generator</h3>
  <div class="form-group">
    <label for="charset" class="col-lg-2 control-label">Charset</label>
    <div class="col-lg-10">
      <input type="text" class="form-control" id="charset" value="AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789!?#@*&.,;:+-=()[]_">
    </div>
  </div>
​
  <div class="form-group">
    <label for="passwordLenghtSlider" class="col-lg-2 control-label">Password lenght:</label><span class="badge" id="passwordLenght"></span>
    <div class="col-lg-10">
      <input type="range" class="form-control" id="passwordLenghtSlider" value="12" min="6" max="100" step="1">
​
    </div>
  </div>
    
  <div class="form-group">
    <div class="col-lg-10">
      <button id="getnewpassword" class="btn btn-success">Click to get a new password</button>
      <button id="clearpasswords" class="btn btn-danger">Clear</button>
    </div>
  </div>
​
  <div class="form-group">
    <label for="passwordResult" class="col-lg-2 control-label">Generated Passwords</label>
    <div class="col-lg-10">
      <div id="passwordResult"></div>
    </div>
  </div>
​
  
</form>  
​
</body>
</html>
 
body {
  margin: 50px;
}
​
 
function random(min, max) {
  return min + parseInt(Math.random() * (max - min + 1), 10);
}
​
function generatePassword() {  
  var lenght = parseInt($('#passwordLenghtSlider').val(), 10);
  var charset = $('#charset').val();
  console.log(lenght);
  console.log(charset);
  var password = "";
  while (lenght > 0) {
    lenght -= 1;
    console.log(length);
    password += charset[random(0, charset.length - 1)];
  }
  return password;
}
​
function getNewPassword() {
  $('#passwordResult').append('<div class="generated well">'+generatePassword()+'</div>');
}
​
$(document).ready(function () {
​
$('#passwordLenghtSlider2').slider()
  .on('slide', function(ev){
     //$('#bar').val(ev.value);
});
  $('#passwordLenght').text($('#passwordLenghtSlider').val());
​
  $('#getnewpassword').click(function (ev) {
    getNewPassword();
    return false;
  });
​
  $('#clearpasswords').click(function (ev) {
    $('#passwordResult').html("");
    return false;
  });
  
  var $slider = $('#passwordLenghtSlider');
  
  $slider.bind('change', function(e) {
    e.preventDefault();
    $('#passwordLenght').html($('#passwordLenghtSlider').val());
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
alex.daquinopro
0viewers