Generate random password using JavaScript


Posted on April 13, 2021, 8 p.m. by Bishal     (  40)


Card Thumbnail
Hi Everyone, Code With Bishal is back with a new project. So grab your PC and open your favourite Code Editor and start coding with me. In this blog, we will create a random password generator using JavaScript. It is very important that you use a very strong and uncommon password that contains alphabets, letters and special characters. Know more about Password Strength. To check the strength of your password: Check your Password strength. Continue reading this blog to take a demo of the random password generator project. All the downloadable resources are attached to this blog, You can easily download these with the help of the buttons below.

 

What is a random password generator?

Our awesome, random password generator gives visitors an attractive random password generator that generates passwords with a click of a button.

 

How can I use this random password generator using JavaScript?

You can easily copy the code or can download the code from our website and can simply paste it anywhere to get the random password generator.

 

Do I need to know how to code?

No, you don't need to know how to code you can simply copy code from here and paste it wherever you want your random password generator. Also, you can try it on our website using the "TRY IT NOW" option or can download the code using the "Download" button below.
Note: We do not take responsibility for the password generated here.

 

What are the advantages of the random password generator?

A random password generator is a very good way of generating random passwords easily.

 

How can I download the source code of the random password generator?

Scroll the page to the bottom there you will find our download button to download the code.

 

Some Screenshots

 

random password

 

Demo

 

Step by step guide of generating random passwords using JavaScript:

  • Create a file with the name index.html

  • Open index.html

  • Add the Broiler plate of HTML

Broiler Plate of HTML:

<!DOCTYPE html>
<html>
<head>
<title>Random Password generator using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>

 

  • Create a file script.js

  • Link External JavaScript file with your HTML file

Here is how can you link:

Add these code in the <head>  </head> of your HTML document:

<script src="script.js"></script>

 

Now add some JavaScript code to the script.js file:

const input = document.querySelector("input");
const button = document.querySelector("#passgen");
function GeneratePassword(length = 8) {
const randomPassword =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$!%^&*()_+=-";

  let password = "";
  for (let i = 0; i < length; ++i) {
    let at = Math.floor(Math.random() * (randomPassword.length + 1));
    password += randomPassword.charAt(at);
  }
  return password;
}
button.addEventListener("click", () => {
  input.value = GeneratePassword(8);
});

 

  • Create a file style.css

  • Link External CSS file with your HTML file

Here is how can you link:

Add these code in the <head>  </head> of your HTML document:

<link href="style.css" rel="stylesheet">

 

Now add some CSS code to the style.css file:

@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Potta One", sans-serif;
}
label {
position: relative;
}
label input {
font-family: "Potta One", sans-serif;
font-size: 1rem;
color: black;
background: transparent;
padding: 1rem 1.2rem;
min-width: 24rem;
border-radius: 0.2rem;
border: 2px solid #7a7a7a56;
transition: border-color 0.2s;
}

 

Source Code

1) HTML Code:

 

<!DOCTYPE html>
<html>
<head>
<title>Random Password generator using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<label> 
<input type="text" placeholder=" " disabled>
<p>Password</p>
</label>
<button class="genpass" id="passgen" title="Click to Generate Password">Generate Password</button>
</body>
</html>

 

2) CSS Code:

 

@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Potta One", sans-serif;
}
label {
position: relative;
}
label input {
font-family: "Potta One", sans-serif;
font-size: 1rem;
color: black;
background: transparent;

padding: 1rem 1.2rem;
min-width: 24rem;

border-radius: 0.2rem;
border: 2px solid #7a7a7a56;

transition: border-color 0.2s;
}
label p {
color: #f9f9f9;
font-size: 1rem;
user-select: none;

position: absolute;
top: 30%;
transform: translateY(-90%);

margin-left: 0.8rem;
padding: 0 0.4rem;

background: white;
color: black;

transition: top 0.2s, font-size 0.2s, color 0.2s;
}
label input:not(:placeholder-shown) {
border-color: #f80743;
}
label input:not(:placeholder-shown) + p {
top: 0;
font-size: 0.9rem;
color: #ff4754;
}
.genpass {
font-family: Potta One;
font-size: 1rem;
margin-top: 1.2rem;
padding: 1rem 1.2rem;
min-width: 24rem;
border-radius: 0.2rem;
background: #ff4754;
color: #040404;
transition: opacity 0.2s;
}
.genpass:focus,.genpass{
border: none;
outline: none;
}
.genpass:hover {
cursor: pointer;
opacity: 0.6;
}
@media (max-width: 700px) {
.genpass{
padding-top: 5%;
}
}

 

3) JavaScript Code:

 

const input = document.querySelector("input");
const button = document.querySelector("#passgen");
function GeneratePassword(length = 8) {
const randomPassword =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$!%^&*()_+=-";

  let password = "";
  for (let i = 0; i < length; ++i) {
    let at = Math.floor(Math.random() * (randomPassword.length + 1));
    password += randomPassword.charAt(at);
  }
  return password;
}
button.addEventListener("click", () => {
  input.value = GeneratePassword(8);
});

 

 





Leave a Comment:
No comments Found. Be the First one to comment