Site icon

Strong Random Password Generator Using Javascript

Full To Tech
password generator

Today, in this blog we are going to learn how to create a strong random password generator using javascript. As we know with using personal facts, such as your name, date of birth, home address or favourite singer or sports team, as a password, is this information is easily accessible on Facebook, Twitter and other social media accounts, meaning hackers will find it easy to crack these passwords.

We recommend not using personal information as it’s so easily accessible through social networks, electoral rolls etc, so it’s easy for hackers to crack. Likewise, consecutive strings of numbers like ‘12345’ shouldn’t be used, either, as they’re too obvious.

Why you should use the secure password

A strong password is essential for protecting your personal and professional assets online. Security experts recommend users generate secure passwords for every website and account. Sadly, most online users choose bad passwords (e.g. their name, birthday, child’s name, or a predictable sequence of numbers) for all their accounts. These types of passwords are extremely easy to crack and once an account is compromised, there’s nothing the user can do about it. On the other hand, manually generating strong passwords can be a tedious task. This is exactly why you should use a random secure password online!

You May Also Like:

What makes a password strong?

A strong password should be at least 15 characters long and contain the following elements:

Now let’s begin and know how we can create a random password generator.

First of all, we create an HTML file

The HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CodePen - Password Generator - #013 of #100Days100Projects</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>
<link rel='stylesheet' href='style.css'>
</head>

<body translate="no">

    <div class="container">
        <h2>Password Generator</h2>
        <div class="result-container">
            <span id="result"></span>
            <button class="btn" id="clipboard">
			<i class="far fa-clipboard"></i>
			</button>
        </div>
        <div class="settings">
            <div class="setting">
                <label>Password length</label>
                <input type="number" id="length" min='4' max='20' value='20' />
            </div>
            <div class="setting">
                <label>Include uppercase letters</label>
                <input type="checkbox" id="uppercase" checked />
            </div>
            <div class="setting">
                <label>Include lowercase letters</label>
                <input type="checkbox" id="lowercase" checked />
            </div>
            <div class="setting">
                <label>Include numbers</label>
                <input type="checkbox" id="numbers" checked />
            </div>
            <div class="setting">
                <label>Include symbols</label>
                <input type="checkbox" id="symbols" checked />
            </div>
        </div>
        <button class="btn btn-large" id="generate">
		Generate password
		</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

The CSS

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
	box-sizing: border-box;
}

body {
	background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
	color: #fff;
	display: flex;
	font-family: 'Muli', sans-serif;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
	min-height: 100vh;
}

p {
	margin: 5px 0;
}

h2 {
	margin: 10px 0 20px;
	text-align: center;
}

input[type=checkbox] {
	margin-right: 0;
}

.container {
	background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(90, 92, 106, 1) 0%, rgba(32, 45, 58, 1) 81.3%);
	box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
	padding: 20px;
	width: 350px;
	max-width: 100%;
	border-radius: 10px
}

.result-container {
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	font-size: 18px;
	letter-spacing: 1px;
	padding: 12px 10px;
	height: 50px;
	width: 100%;
}

.result-container #result {
	word-wrap: break-word;
	max-width: calc(100% - 40px);
}

.result-container .btn {
	font-size: 20px;
	position: absolute;
	top: 5px;
	right: 5px;
	height: 40px;
	width: 40px;
}

.btn {
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	padding: 8px 12px;
	background: linear-gradient(to right, #ff416c, #ff4b2b);
}

.btn-large {
	display: block;
	width: 100%;
}

.setting {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 15px 0;
}

@media screen and (max-width: 400px) {
	.result-container {
		font-size: 14px;
	}
}

/* SOCIAL PANEL CSS */
.social-panel-container {
	position: fixed;
	right: 0;
	bottom: 80px;
	transform: translateX(100%);
	transition: transform 0.4s ease-in-out;
}

.social-panel-container.visible {
	transform: translateX(-10px);
}

.social-panel {
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 16px 31px -17px rgba(0, 31, 97, 0.6);
	border: 5px solid #001F61;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: 'Muli';
	position: relative;
	height: 169px;
	width: 370px;
	max-width: calc(100% - 10px);
}

.social-panel button.close-btn {
	border: 0;
	color: #97A5CE;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	top: 5px;
	right: 5px;
}

.social-panel button.close-btn:focus {
	outline: none;
}

.social-panel p {
	background-color: #001F61;
	border-radius: 0 0 10px 10px;
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	padding: 2px 17px 6px;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	text-align: center;
	width: 235px;
}

.social-panel p i {
	margin: 0 5px;
}

.social-panel p a {
	color: #FF7500;
	text-decoration: none;
}

.social-panel h4 {
	margin: 20px 0;
	color: #97A5CE;
	font-family: 'Muli';
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
}

.social-panel ul {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.social-panel ul li {
	margin: 0 10px;
}

.social-panel ul li a {
	border: 1px solid #DCE1F2;
	border-radius: 50%;
	color: #001F61;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	text-decoration: none;
}

.social-panel ul li a:hover {
	border-color: #FF6A00;
	box-shadow: 0 9px 12px -9px #FF6A00;
}

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

	.social-panel-container.visible {
		transform: translateX(0px);
	}

}

The JavaScript

const resultEl = document.getElementById('result');
const lengthEl = document.getElementById('length');
const uppercaseEl = document.getElementById('uppercase');
const lowercaseEl = document.getElementById('lowercase');
const numbersEl = document.getElementById('numbers');
const symbolsEl = document.getElementById('symbols');
const generateEl = document.getElementById('generate');
const clipboard = document.getElementById('clipboard');
const randomFunc = {
   lower: getRandomLower,
   upper: getRandomUpper,
   number: getRandomNumber,
   symbol: getRandomSymbol
};


clipboard.addEventListener('click', () => {
   const textarea = document.createElement('textarea');
   const password = resultEl.innerText;

   if (!password) {
      return;
   }

   textarea.value = password;
   document.body.appendChild(textarea);
   textarea.select();
   document.execCommand('copy');
   textarea.remove();
   swal("Success", "Password copied to clipboard", {
      icon: "success",
   });
   //alert('');
});

generate.addEventListener('click', () => {
   const length = +lengthEl.value;
   const hasLower = lowercaseEl.checked;
   const hasUpper = uppercaseEl.checked;
   const hasNumber = numbersEl.checked;
   const hasSymbol = symbolsEl.checked;

   resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length);
});

function generatePassword(lower, upper, number, symbol, length) {
   let generatedPassword = '';
   const typesCount = lower + upper + number + symbol;
   const typesArr = [{
      lower
   }, {
      upper
   }, {
      number
   }, {
      symbol
   }].filter(item => Object.values(item)[0]);

   // Doesn't have a selected type
   if (typesCount === 0) {
      return '';
   }

   // create a loop
   for (let i = 0; i < length; i += typesCount) {
      typesArr.forEach(type => {
         const funcName = Object.keys(type)[0];
         generatedPassword += randomFunc[funcName]();
      });
   }

   const finalPassword = generatedPassword.slice(0, length);

   return finalPassword;
}

function getRandomLower() {
   return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}

function getRandomUpper() {
   return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
   return +String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}

function getRandomSymbol() {
   const symbols = '!@#$%^&*(){}[]=<>/,.';
   return symbols[Math.floor(Math.random() * symbols.length)];
}

View Demo

Thank you for reading this blog, share this blog as much as possible and also show it to your friends. If you have any questions, feel free to comment.

Exit mobile version