In this project, I programmed a random password generator by which you can create unique passwords depending on selected password key strings.



JavaScript Random Password Generator



Read Later


Read Later


In this project, I programmed a random password generator by which you can create unique passwords depending on selected password key strings.






In this project, I programmed a random password generator by which you can create unique passwords depending on selected password key strings. As per implemented key string, named as lowercase, uppercase, numbers, and symbols: the complexity and intricacy level of the generated password exponentially increases, and therefore you can create various password levels entering the same password length. For instance, you can create a password including 20 characters by implementing either lowercase and uppercase key strings or uppercase and symbols key strings.

Click 'Preview' to try.

For more information about the code files, please visit Source Code section below.

I am acquainted with the idea of programming a random password generator by a YouTube tutorial, but I do not use the code explained in the tutorial; you can find the link above.


Step 1: Design and Features

In this project, I decided to use a green color palette with white as a contrasting element. The mainframe background color is linear-gradient(45deg, #00B140, #80E0A7).

And, to design an elegant interface connoting calmness, I imported McLaren from Google Fonts.


Define the length of the password.

Copy the password to the clipboard easily.

Include any key string as key characters to generate a random password:

1-) Lowercase

2-) Uppercase

3-) Numbers

4-) Symbols

Figure - 30.1

Figure - 30.2

Figure - 30.3

Step 2: HTML

To obtain the required variables for generating random passwords, I used input number and checkbox elements which have unique names - lowercase, uppercase, number, symbol, and length.

Figure - 30.4

Step 3: CSS

I programmed a simple and coherent interface design in CSS; however there is a tricky part, I customized input checkbox elements instead of using the default style; you can find more information here.

Figure - 30.5

Step 4: JavaScript

Now, I will explain how you can code a function which randomly generates a password at any given length and key string in JavaScript step-by-step.

Get the selected key strings and the length using the querySelector method.

Define key strings - lowercase, uppercase, number, symbol.

Figure - 30.6

Add an event listener to 'Generate Password' and detect which key string selected.

For each option in 'options', add the associated key string to 'MAIN_STRING' if the option is selected using Object.keys() and Object.values() functions, and the Ternary operator as shown below.

Using Math.random(), add a random character from 'MAIN_STRING' to 'PASSWORD' from zero to the pre-defined length.

And, display the generated password in the input text element.

Figure - 30.7

Figure - 30.8

To copy the generated password to the clipboard, use select() and execCommand('copy') functions.

And, it is ready to be executed :)

Figure - 30.9

Source Code

Please sign in to download source code files below, including index.html and icon.png, in a zipped folder and try it on your computer.

Zip Folder


CSS File


html{background-color:#00B140;font-family: 'McLaren', cursive;}

.interface{text-align:center;background:linear-gradient(45deg, #00B140, #80E0A7);width:50%;height:auto;border:5px solid white;border-radius:15px;position:relative;margin:auto;margin-top:50px;}
.interface input[type="text"]{color:#00B140;width:80%;font-weight:bold;}
.interface span{color:#335525;background-color:#00B140;border:1px solid white;padding:2px;cursor:pointer;}
.interface span:hover{color:white;}
.interface label{position:relative;color:white;font-size:20px;display:block;text-align:left;padding-left:15px;user-select:none;}
.interface label input[type="number"]{position:absolute;right:20px;color:#00B140;width:50px;font-weight:bold;}
.interface input[type="checkbox"]{height:0;width:0;}
.interface label i{position:absolute;right:20px;height:30px;width:30px;background-color:#335525;cursor:pointer;}
.interface label i:hover{background-color:white;}
.interface label i:after{content: "\2714";position: absolute;top:-2px;right:7px;display:none;color:white;}
.interface label input:checked ~ .mark:after{display:block;}
.interface label input:checked ~ .mark{background-color:#00B140;}
.interface button{outline:none;position:relative;background-color:#335525;width:80%;color:white;border:none;border-radius:15px;font-size:20px;margin:auto;cursor:pointer;font-family: 'McLaren', cursive;}
.interface button:hover{background-color:white;color:#335525;}

@media only screen and (max-width: 700px) {

JavaScript File


var _length = document.querySelector('input[name="length"]');
var _lowercase = document.querySelector('input[name="lowercase"]');
var _uppercase = document.querySelector('input[name="uppercase"]');
var _number = document.querySelector('input[name="number"]');
var _symbol = document.querySelector('input[name="symbol"]');
var copy = document.getElementById("copy");
var generateButton = document.querySelector('.interface button');

const key_strings = {
	lowercase: 'abcdefghijklmnopqrstuvwxyz',
	number: '0123456789',
	symbol: '*;<>()[]{}#$?!^|'

copy.addEventListener("click", () => {
	var _password = document.querySelector('input[type="text"]');
    if(_password.value != "" && _password.value != "Include any key string and define the length!"){;
		alert("Password copied!");

generateButton.addEventListener("click", () => {
	var length = +_length.value;
	var activeLower = _lowercase.checked;
	var activeUpper = _uppercase.checked;
	var activeNumber = _number.checked;
	var activeSymbol = _symbol.checked;
	generateRandomPassword(activeLower, activeUpper, activeNumber, activeSymbol, length);

function generateRandomPassword(lower, upper, num, sym, length){
	let MAIN_STRING = "";
	let PASSWORD = "";
	const options = {
		lowercase: lower,
		uppercase: upper,
		number: num,
		symbol: sym
		MAIN_STRING += (Object.values(options)[i]) ? key_strings[Object.keys(options)[i]] : "";
	if(MAIN_STRING != "" && length > 0){
			PASSWORD += MAIN_STRING[Math.floor(Math.random() * MAIN_STRING.length)];
		document.querySelector('input[type="text"]').value = PASSWORD;
		document.querySelector('input[type="text"]').value = "Include any key string and define the length!";