Introduction

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


Tags

Share

JavaScript Random Password Generator

Advertisement:


read_later

Read Later



read_later

Read Later

Introduction

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

Tags

Share





Advertisement

Advertisement




Introduction

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.

Demonstration


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.

Features:

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

project-image
Figure - 30.1


project-image
Figure - 30.2


project-image
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.

project-image
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.

project-image
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.

project-image
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.

project-image
Figure - 30.7


project-image
Figure - 30.8


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

And, it is ready to be executed :)

project-image
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

Download


CSS File

Download



html{background-color:#00B140;font-family: 'McLaren', cursive;}
h1{color:white;text-align:center;user-select:none;}

.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) {
	.interface{width:80%;}
}


JavaScript File

Download



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',
	uppercase: '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!"){
		_password.select();
		document.execCommand('copy');
		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
	};
	
	for(i=0;i<Object.keys(options).length;i++){
		MAIN_STRING += (Object.values(options)[i]) ? key_strings[Object.keys(options)[i]] : "";
	}
	
	if(MAIN_STRING != "" && length > 0){
		for(i=0;i<length;i++){
			PASSWORD += MAIN_STRING[Math.floor(Math.random() * MAIN_STRING.length)];
		}
		
		document.querySelector('input[type="text"]').value = PASSWORD;
		
	}else{
		document.querySelector('input[type="text"]').value = "Include any key string and define the length!";
	}
	
    	
}