In this blog post, we'll delve into the creation of a straightforward random password generator using HTML, CSS, and JavaScript. In a previous post, I shared a live password strength indicator built using JavaScript. that provides instant feedback or indications on the strength of your written passwords.
This generator will enable you to generate passwords of specified lengths, both on click and upon page load.
The generated passwords will incorporate a combination of alphanumeric and special characters, enhancing their security.
Additionally, the generator will have a copy feature, allowing you to effortlessly copy the generated passwords for easy use.
You’ll learn in this post:
- How to generate random passwords with alphanumeric values of any length.
- To create functions that generate random values (characters, numbers, special characters etc ) on click.
- How to copy value from input field on click.
Javascript Functions, methods used:
- Math.random() : For generating random values from 0 to 1. Including 0 but not 1.
- Math.floor() : Round the number down.
- For loop : For running some block of code again and again till the limit setted.
Video Tutorial on Simple Random Password Generator:
Simple Random Password Generator.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
I’ve integrated javascript within the html file inside the script tag. You can create a separate file and link it to an html file.
We are going to create a password generator with just 3 steps.
Step 1: Design the Password Generator.
The first step in creating a password generator is to design its layout and appearance. This involves using HTML and CSS to create the basic structure and styling of the password generator. This includes elements such as input fields for password, buttons to generate and copy the password etc.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Password Generator | maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<h2>Password Generator</h2>
<div class="input">
<div class="input_box">
<div class="password_box">
<input type="text" class="password" disabled>
</div>
<button type="button" class="copy_button">Copy <span>Copied!</span></button>
</div>
</div>
<button type="button" class="submit">Generate Password</button>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(0deg, #e91d9e, #ff5555);
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #fff;
padding: 40px;
border-radius: 5px;
}
h2 {
font-size: 40px;
margin-bottom: 30px;
text-align: center;
}
.input {
width: 100%;
background-color: #fafafa;
padding: 5px;
margin: 40px 0px;
border-radius: 1000px;
}
.input_box {
margin: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.password_box {
width: 100%;
text-align: center;
}
input[type="text"] {
width: 90%;
font-size: 20px;
background-color: transparent;
border: none;
outline: none;
}
button {
font-size: 22px;
font-weight: bold;
background: linear-gradient(0deg, #e91d9e, #ff5555);
color: #fff;
border: none;
border-radius: 1000px;
padding: 10px 25px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: linear-gradient(0deg, #ff5555, #e91d9e);
}
button:active {
transform: scale(0.9);
}
.copy_button{
position: relative;
}
.copy_button span{
position: absolute;
left: 12px;
top: 0%;
background-color: #000;
color: #fff;
padding: 10px;
border-radius: 5px;
font-size: 16px;
opacity: 0;
pointer-events: none;
transition: 0.5s;
}
.copy_button .active{
opacity: 1;
top: -100%;
}
.submit{
width: 100%;
font-size: 30px;
}
Output:
Step 2: Create a Password Generation Functionality Using JavaScript.
After design, it's time to add the functionality to generate passwords. We'll create a function that generates random alphanumeric and special characters, with a length of 8. This generated password will be displayed to the user inside input field.
We'll call this function both when the window loads and when the user clicks the button (class="submit"). This ensures that a password is always displayed, whether the user interacts with the page or not.
JavaScript
let password = document.querySelector(".password");
let copy_button = document.querySelector(".copy_button");
let message = document.querySelector(".copy_button span");
let submit = document.querySelector(".submit");
let string = "123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.!@#$%^&*()_";
window.addEventListener("load" , generate_random_password);
submit.addEventListener("click" , generate_random_password);
function generate_random_password(){
password.value = "";
for (let i = 0; i < 8; i++) {
let random_number = Math.floor(Math.random() * string.length);
password.value += string[random_number];
}
}
Output:
Our password generator generates passwords on click and page load. To further enhance its usability, let's incorporate a copy functionality. This feature will allow users to effortlessly copy the generated passwords for easy use.
Step 3: Create a function to copy passwords.
You can add functionality by using JavaScript's navigator.clipboard.writeText() method to copy the generated password to the clipboard.
And to Enhance the user experience we are going to display a pop-up message confirming the successful password copying.Which automatically dismiss after a specified duration.
Also read: How to copy text from input field using JavaScript.
JavaScript
// Copy function
copy_button.onclick = function(){
navigator.clipboard.writeText(password.value);
message.classList.add("active");
setTimeout(() => {
message.classList.remove("active");
}, 1500);
}
Output:
You can add more functionality to this password generator like:
Giving control to users on web page:
- To control the length of password generation.
- Options to add special characters, numbers etc.
- Edit the generated password. etc
You may like:
- How to show password strength in signup form using JavaScript.
- How to generate and verify the random captcha using JavaScript.
- How to generate the random OTP using JavaScript.
- How to create a OTP from input fields using HTML CSS and JavaScript.
Final code:
Creating a random password generator using HTML, CSS, and JavaScript is a simple and straightforward process. With a few lines of code, you can easily generate strong and secure passwords. If you have any questions or suggestions, feel free to leave a comment below.
Share your thoughts.