Hello readers, Today in this blog you’ll learn how to create a Random Password Generator App using HTML CSS & JavaScript. Earlier I have shared a blog on how to check Email Validation using JavaScript. Now it’s time to create Random Password Generator.
Random Password Generator is a program that automatically generates a password randomly. Those generated passwords are mix with numbers, alphabets, and punctuations. This type of program helps the user to create a strong password.
Today in this program, I’ll share with you this program (Random Password Generator). In this program, there is a container with an input field, a copy icon, and a button. When you click on the generate password button each time this program automatically generated a random password and, there is shown a copy button that copies that generated password when you click on that button.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Random Password Generator).
Video Tutorial of Random Password Generator App
As you have seen, the Random Password Generator Program in the video. This program generates a random password with the help of JavaScript Math.random() random function. Without JavaScript, this program won’t generate a random password. And therein video, you have also seen, the copy button which copies generated password. It is possible with the JavaScript document.execCommand(“copy”).
If you like this program (Random Password Generator) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
You might like this:
Random Password Generator App [Source Codes]
To create this program (Random Password Generator). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Random Password Generator | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="container">
<div class="text">
Random Password Generator <br>in HTML CSS & JavaScript
</div>
<div class="input-data">
<div class="display">
<input type="text">
<span class="far fa-copy" onclick="copy()"></span>
<span class="fas fa-copy" onclick="copy()"></span>
</div>
<button>Generate Password</button>
</div>
</div>
<script>
const display = document.querySelector("input"),
button = document.querySelector("button"),
copyBtn = document.querySelector("span.far"),
copyActive = document.querySelector("span.fas");
let chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-=";
button.onclick = ()=>{
let i,
randomPassword = "";
copyBtn.style.display = "block";
copyActive.style.display = "none";
for (i = 0; i < 16; i++) {
randomPassword = randomPassword + chars.charAt(
Math.floor(Math.random() * chars.length)
);
}
display.value = randomPassword;
}
function copy(){
copyBtn.style.display = "none";
copyActive.style.display = "block";
display.select();
document.execCommand("copy");
}
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #000;
text-align: center;
}
.container{
width: 450px;
background: #111;
border: 1px solid #444;
border-radius: 5px;
padding: 20px 25px;
}
.container .text{
color: #ccc;
font-weight: 600;
font-size: 26px;
line-height: 35px;
}
.container .input-data{
margin: 20px 5px 15px 5px;
}
.input-data .display{
height: 45px;
width: 100%;
display: flex;
position: relative;
}
.input-data .display input{
height: 100%;
width: 100%;
outline: none;
color: #eee;
border: 1px solid #333;
background: #222;
padding: 10px;
font-size: 17px;
pointer-events: none;
user-select: none;
}
.input-data .display span{
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
color: grey;
z-index: 999;
display: none;
cursor: pointer;
}
.input-data button{
display: block;
height: 45px;
width: 100%;
margin-top: 15px;
border: 1px solid #444;
outline: none;
background: #1b1b1b;
color: #999;
font-size: 17px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s ease;
}
.input-data button:hover{
background: #222;
}
That’s all, now you’ve successfully created a Random Password Generator App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.
