Learn to Make JavaScript Auto Password Generator button

In today’s beginners’ tutorial, we are going to be looking at how to create a JavaScript Auto Password Generator button.

There are many javascript password generator GitHub based. But we are going to learn how to create a random password generator button with JavaScript in a very simple way that is very easy to implement. The 8-character password generated will contain at least a capital letter, a small letter, a number, and a special character, meanwhile, the password length can be adjusted as well.

Are automatically generated passwords safe?

No password is safe whether user-generated or auto-generated, the safety of all passwords depends on how it is stored, where, and who have access to it. Even if you generate the longest and most difficult password ever without keeping it safe, it is as good as a weak password. To make passwords more safe and secure increase the length and character combination that is difficult to guess

JavaScript Auto Password Generator

Javascript generates passwords with special characters automatically, a password of 8 lengths or more.  This button can be added to a user registration form, or reset password form of your web applications or website.

• Create a simple HTML form with a button

<form class="form">
<label class="input">
<input type="password" name="psw" id="pw">
<span onclick="showpw()" id="spw" class="showpw">
<i class="bi bi-eye-slash w3-large"></i></span>
</label>
<button class="button" onclick="generator()">Generate</button>
</form>

•  Add CSS  to style your form.

.form{
margin:14px;
padding:24px;
border-radius:5px;
background-color:orange;
}
.showpw{
width: 5%;
color: gray;
border-radius: 4px;
resize: vertical;
margin-left:-28px; 
}
i{color: green !important;}
.button{
width:20%;
padding:13px 10px;
background-color: rgba(70, 0, 130, 1.0);
color: whitesmoke;
}
.button,.input{
margin: 10px 1;
border-radius: 8px;
box-shadow:0 2px 5px 0 rgba(222,210,110,0.16),0 2px 10px 0 rgba(110,101,210,0.12)
}
.input{
width:80%;
padding:3px 5px;
display: inline-block;
background-color:#eef;
}
/*remove border and make tranparent*/
input[type=text],input[type=password] {
width:100%;
padding: 12px 20px;
border:none;
outline:none;
background-color:#eef!important;
-webkit-box-shadow:none ;
}
input[type=text],input[type=password]:focus{
border:none;
outline:none;
background-color:#eef!important;
-webkit-box-shadow:none ;
}

• Add password toggle button

The password toggle button hides and shows the password when the user clicks on it. Add the following javascript below to activate it.

/* Function to toggle generated password*/
function showpw() {
var x = document.getElementById("pw");
var btn = document.getElementById("spw"); 
if (x.type === "password") {
x.type = "text";
btn.innerHTML ='';
} else {
x.type = "password";
btn.innerHTML ='';
}
}

• Add Password generator javascript code below

You do not need a javascript password generator library before you can create a random password generator button. Just add this simple Javascript code below to generate a random unique password once the password generator button is clicked.

/* Function to generate combination of password */
function passkey() {
var PassWord = '';
var str = '@#$%^&*()}{][?.!'+'0123456789'+
'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz';
for (let i = 1; i <= 8; i++) {
var char = Math.floor(Math.random() * str.length + 1);
PassWord += str.charAt(char)
}
return PassWord;
}
/* Pass the generated password combination
to an password input field */
function generator() {
document.getElementById('pw').value = passkey();
}

Finally, if you have successfully followed the step above on the JavaScript auto password generator, then you will surely come up with the same output below.

OUTPUT

Conclusion

Here comes the end of this lesson. If you have followed the steps above you will arrive at the same output sample. feel free to download the source code below and practice offline.