Generate random password using JavaScript
Posted on April 13, 2021, 8 p.m. by Bishal ( 1479)
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
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 =
"[email protected]#$!%^&*()_+=-";
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 =
"[email protected]#$!%^&*()_+=-";
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);
});