Passwords play a vital role in online security, and a strong password generator can help protect your accounts from unauthorized access. This guide will cover the steps to create a random password generator using JavaScript and discuss the benefits of secure, random passwords.
Why Use a Password Generator?
A password generator helps create passwords that are:
- Secure – Randomly generated passwords are typically harder to guess.
- Customizable – You can include or exclude specific characters, numbers, symbols, and even spaces.
- Easy to Use – A few clicks can create a password that meets your specific requirements.
Using a password generator is a proactive way to increase security by ensuring that every account has a unique password that is challenging to guess.
Key Features of our JavaScript Password Generator
This JavaScript password generator comes with many useful features:
- Adjustable Length – Choose a password length between 1 and 30 characters.
- Character Customization – Enable lowercase, uppercase, numbers, symbols, and spaces as needed.
- Exclude Duplicates – Eliminate repeated characters to make passwords harder to crack.
- Real-Time Strength Indicator – Visual feedback on password strength as you adjust settings.
Understanding the Code Behind Password Generators
First of all we will create a file named Index.php
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Codingtutotials | Password Generator JavaScript</title>
<!-- Google Icon Link for Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<link rel="stylesheet" href="style.css">
<script type="rocketlazyloadscript" src="script.js" defer></script>
</head>
<body>
<div class="container">
<h2>Random Password Generator</h2>
<div class="wrapper">
<div class="input-box">
<input type="text" disabled>
<span class="material-symbols-rounded">copy_all</span>
</div>
<div class="pass-indicator"></div>
<div class="pass-length">
<div class="details">
<label class="title">Password Length</label>
<span></span>
</div>
<input type="range" min="1" max="30" value="15" step="1">
</div>
<div class="pass-settings">
<label class="title">Password Settings</label>
<ul class="options">
<li class="option">
<input type="checkbox" id="lowercase" checked>
<label for="lowercase">Lowercase (a-z)</label>
</li>
<li class="option">
<input type="checkbox" id="uppercase">
<label for="uppercase">Uppercase (A-Z)</label>
</li>
<li class="option">
<input type="checkbox" id="numbers">
<label for="numbers">Numbers (0-9)</label>
</li>
<li class="option">
<input type="checkbox" id="symbols">
<label for="symbols">Symbols (!-$^+)</label>
</li>
<li class="option">
<input type="checkbox" id="exc-duplicate">
<label for="exc-duplicate">Exclude Duplicate</label>
</li>
<li class="option">
<input type="checkbox" id="spaces">
<label for="spaces">Include Spaces</label>
</li>
</ul>
</div>
<button class="generate-btn">Generate Password</button>
</div>
</div>
</body>
</html>
Then we will create a file named style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: greenyellow;
}
.container {
width: 450px;
background: #fff;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.container h2 {
font-weight: 600;
font-size: 1.31rem;
padding: 1rem 1.75rem;
border-bottom: 1px solid #d4dbe5;
}
.wrapper {
margin: 1.25rem 1.75rem;
}
.wrapper .input-box {
position: relative;
}
.input-box input {
width: 100%;
height: 53px;
color: #000;
background: none;
font-size: 1.06rem;
font-weight: 500;
border-radius: 4px;
letter-spacing: 1.4px;
border: 1px solid #aaa;
padding: 0 2.85rem 0 1rem;
}
.input-box span {
position: absolute;
right: 13px;
cursor: pointer;
line-height: 53px;
color: #707070;
}
.input-box span:hover {
color: #4285F4!important;
}
.wrapper .pass-indicator {
width: 100%;
height: 4px;
background: #dfdfdf;
margin-top: 0.75rem;
border-radius: 25px;
}
.pass-indicator#weak::before {
content: "";
height: 100%;
width: 20%;
background: #E64A4A;
}
.pass-indicator#medium::before {
content: "";
height: 100%;
width: 50%;
background: #f1c80b;
}
.pass-indicator#strong::before {
content: "";
height: 100%;
width: 100%;
background: #4285F4;
}
.wrapper .pass-length {
margin: 1.56rem 0 1.25rem;
}
.pass-length .details {
display: flex;
justify-content: space-between;
}
.pass-length input {
width: 100%;
height: 5px;
}
.pass-settings .options {
display: flex;
list-style: none;
flex-wrap: wrap;
margin-top: 1rem;
}
.pass-settings .options .option {
display: flex;
align-items: center;
margin-bottom: 1rem;
width: calc(100% / 2);
}
.wrapper .generate-btn {
width: 100%;
color: #fff;
background: #4285F4;
font-size: 1.06rem;
padding: 0.94rem 0;
border-radius: 5px;
text-transform: uppercase;
margin: 0.94rem 0 1.3rem;
}
And then we will create a file called script.js
const lengthSlider = document.querySelector(".pass-length input"),
options = document.querySelectorAll(".option input"),
copyIcon = document.querySelector(".input-box span"),
passwordInput = document.querySelector(".input-box input"),
passIndicator = document.querySelector(".pass-indicator"),
generateBtn = document.querySelector(".generate-btn");
const characters = {
lowercase: "abcdefghijklmnopqrstuvwxyz",
uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
numbers: "0123456789",
symbols: "^!$%&|[](){}:;.,*+-#@<>~"
};
const generatePassword = () => {
let staticPassword = "",
randomPassword = "",
excludeDuplicate = false,
passLength = lengthSlider.value;
options.forEach(option => {
if(option.checked) {
if(option.id !== "exc-duplicate" && option.id !== "spaces") {
staticPassword += characters[option.id];
} else if(option.id === "spaces") {
staticPassword += ` ${staticPassword} `;
} else {
excludeDuplicate = true;
}
}
});
for (let i = 0; i < passLength; i++) {
let randomChar = staticPassword[Math.floor(Math.random() * staticPassword.length)];
if(excludeDuplicate) {
!randomPassword.includes(randomChar) || randomChar == " " ? randomPassword += randomChar : i--;
} else {
randomPassword += randomChar;
}
}
passwordInput.value = randomPassword;
};
const updatePassIndicator = () => {
passIndicator.id = lengthSlider.value <= 8 ? "weak" : lengthSlider.value <= 16 ? "medium" : "strong";
};
const updateSlider = () => {
document.querySelector(".pass-length span").innerText = lengthSlider.value;
generatePassword();
updatePassIndicator();
};
updateSlider();
const copyPassword = () => {
navigator.clipboard.writeText(passwordInput.value);
copyIcon.innerText = "check";
copyIcon.style.color = "#4285F4";
setTimeout(() => {
copyIcon.innerText = "copy_all";
copyIcon.style.color = "#707070";
}, 1500);
};
copyIcon.addEventListener("click", copyPassword);
lengthSlider.addEventListener("input", updateSlider);
generateBtn.addEventListener("click", generatePassword);
Benefits of a JavaScript Password Generator
There are several advantages to using a password generator in JavaScript:
- No API Required: This generator runs directly in the browser with JavaScript, so you don’t need any third-party services or APIs to generate passwords.
- Customizable Options: It offers more flexibility than some online generators, allowing you to tailor passwords to specific security needs.
- Improve Security: With the option to exclude random characters and duplicates, your passwords will be harder to crack.
Conclusion
Creating a password generator with JavaScript is a great project to enhance your JavaScript skills while contributing to online security. Customization options make it suited to different security needs, whether for personal use or business applications. Explore the code and see how you can further personalize the generator by adjusting character type, length, and other settings!
Random Password Generate Source Code
Send download link to:
