Random Password Generator

EasyProgramming.net tutorial on how to create a simple random password generator

by Nazmus Nasir

HTML

<!-- Easy JavaScript - Random Password Generator #54 -->
<p>
Welcome to the 54th Easy JavaScript tutorial, part of <a href="http://www.easyprogramming.net">EasyProgramming.net</a>. Let's make a random password generator
</p>
<p>
We'll be using a lot of things that we've already learned including String methods, for loop, ternary operator, event listeners, random number generator, and functions. 
</p>
<p>
A random password generator normally asks you for the number of characters and whether or not you want numbers and/or symbols. So let's look at the setup below:
</p>

How many characters? <input type="number" id="charNum" value="12" min="8" max="100" /><br />
Number: <input type="checkbox" id="num"/>
Symbol: <input type="checkbox" id="sym"/><br />
<button id="submit">Submit</button><br />
Your Password: <input type="text" id="yourPw" size="80"/>

CSS

table td{
  /* border: #000 solid 1px; */
  border-bottom: 1px solid #000;
  padding: 5px;
}

JavaScript

var char = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var num = '0123456789';
var sym = '!@#$%^&*=-_';

var charNum = document.getElementById("charNum");
var numBox = document.getElementById("num");
var symBox = document.getElementById("sym");
var submit = document.getElementById("submit");
var yourPw = document.getElementById("yourPw");

submit.addEventListener("click",function(e){
    var characters = char;
    (numBox.checked) ? characters += num : '';
    (symBox.checked) ? characters += sym : '';
    yourPw.value = password(charNum.value, characters);
});

function password(l,characters){
		var pwd = '';
    for(var i = 0; i<l; i++){
    		pwd += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return pwd;
}