JSFiddle - React, Tailwind, and code Playground

Password Generator

by Jennifer Perrin

HTML

<div class="container">
  <h4>Password Generator</h4>
  <div class="row">
    <div class="eight columns">
      <p><label for="">Length:</label> <input id="length" type="number" value="16"/> <br />
        <label for="">Characters:</label>
        <input type="text" value='12345677890!@$%^&*()-=_+qwertyuiopasdfghjklzxcvbnmQWERTYUIOPSDFGHJKLZXCVBNM[]{};:"\|,<.>/?' id="charset" />
        <button id="generate">Generate</button>
      </p>
    </div>
    <div class="four columns" id="passwords">

    </div>
  </div>
</div>

CSS

body {
  font-family: 'Source Code Pro';
}

#charset {
  width: 300px;
  padding: 10px;
  text-align: center;
}

label {
  width: 120px;
}

#passwords {
  background: #34495e;
  color: #fff;
  padding: 10px;
  border-radius: 2px;
}

.container {
  margin-top: 20px;
}

JavaScript

$("#generate").click(function(){
  var charset = $('#charset').val();
  var password = '';
  var password_length = parseInt($('#length').val());
  for(var i = 0; i < password_length; i ++){
    var random_position = Math.floor(Math.random() * charset.length);
    password += charset[random_position];
  }
  if(password.length == password_length){
    password = password.replace(/</g, "&lt;").replace(/>/g, "&gt;");
	  $('#passwords').prepend(password + '<br/>');    
  }else{
    console.log(password.length , password_length);
  }
});