Random Password Generator using Javascript
Tags: html, css, javascript, webdev
Published: 2021-07-28 14:32:22

In this article I am going to show you how to create a random password generator with the help of JavaScript code. I have already created many types of JavaScript projects but this is the first time I am creating such a system. If you want to make it then hopefully this article will help you.

✅ **Watch Live Preview** 👉👉  [JavaScript Password Generator](https://www.foolishdeveloper.com/2021/07/random-password-generator-javascript.html) 

**Random Password Generator** is a JavaScript project that can generate strong and unique passwords automatically. I made a box in everyone's first web page. I have used a heading or title. Below the title is an input box where the password can be generated. 

Then I made two buttons to copy and generate that password. The unit password will be generated each time you click the Generate button. For this I have used JavaScript `Math.random` and `Math.floor` method. There is also a copy button that will help you copy the sourcecodes.

 If you don't understand what I'm saying then you can definitely watch the video tutorial below. This video will completely help you to know how I made this design.

{% youtube lZkUdFsulFU %}

 Hopefully the video tutorial above has helped you to know how to create this (Random Password Generator).
 Below I show step-by-step what code I have used for what purpose.
 First of all you have to create an HTML and CSS file.

### Step 1: Create a box using html code

I have created a box in the web page using the following codes. I have used the background color of the web page as `purple` and the background color of the box as white.

```html
<div class="box">
   
</div>
```


```css
* {
 margin: 0;
 padding: 0;
 user-select: none;
 box-sizing: border-box;
  }

body {
  background-color: #8d0cf7;
  justify-content: center;
  align-items: center;
  display: flex;
  min-height: 100vh;
    }

 .box{
   background-color: white;
   padding-top: 30px;
   padding: 30px;
 
 }
```
![Create a box using html code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80sjnxtdj4glsm25nt9x.jpg)
### Step 2: Add a heading to that box

 As you can see above, I am the first to use a title here. The following HTML and CSS code helped to create and design that title.

```html
<h2>Random Password Generater</h2>
```


```css
 .box h2{
   margin-bottom: 40px;
   text-align: center;
   font-size: 26px;
   color: #015a96;
   font-family: sans-serif;
 }
```

![Add a heading to that box](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ste0lk8efrry4nv1dj5v.jpg)

### Step 3: Create a display using input

 Now I have created a small input box using the input function. Everything that will generate the password can be seen in that input box. I have used the `height of the box 50 px` and `width 400px`. I have used `user-select: none` so that the user cannot click on the input box.

```html
<input type="text" name="" placeholder="Create password" id="password" readonly>
```


```css

input {
 padding: 20px;
 user-select: none;
 height: 50px;
 width: 400px;
 border-radius: 6px;
 border: none;
 border: 2px solid #8d0cf7;
 outline: none;
 font-size: 22px;
 }

input::placeholder{
  font-size: 23px;
 } 
```

![Create a display using input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwtj3g8eiisfwnxlxvoi.jpg)

### Step 4: Create two buttons to generate and copy the password
 At the end of it all I made two distributions. One button will generate the password and the other will copy the password. I used CSS code to design those two buttons. I have used the height of each `button 50 px`, `width 155px`, `background color purple` and `front color white`.

```html
<table>
   <th><div id="button" class="btn1"onclick="genPassword()">Generate</div></th>
   <th><a  id="button" class="btn2" onclick="copyPassword()">Copy</a></th>
</table>
```


```css
#button {
  font-family: sans-serif;
  font-size: 15px;
  margin-top: 40px;
  border: 2px solid #7100cf;
  width: 155px;
  height: 50px;
  text-align: center;
  background-color: #7100cf;
  display: flex;
  color: rgb(255, 255, 255);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;  
}

 .btn2{
   margin-left: 85px
 }

#button:hover {
  color: white;
  background-color: black;
}
```
![Create two buttons to generate and copy the password](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dq4r37ex0ptdq2arzw4.jpg)
### Step 5: Activate the system using JavaScript code
So far we've only designed it. This time we will make it work using JavaScript code. First I set a variable of the input's ID (`password`).

```javascript
var password=document.getElementById("password");
```
 Now I have added all the `symbols`, `numbers` and `alphabets` in var chars which will be used to create random passwords.

 Then I used var passwordLength which will indicate how many characters this password will be created with.

```javascript
 var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 var passwordLength = 12;
 var password = "";
```
 Now I will create a random password using for loop. Here `Math.random ()` will help to create random passwords.

```javascript
 for (var i = 0; i <= passwordLength; i++) {
   var randomNumber = Math.floor(Math.random() * chars.length);
   password += chars.substring(randomNumber, randomNumber +1);
  }
```
I will associate that password (constant) with the input box. The resulting password will also be seen in the input box.

```javascript
document.getElementById("password").value = password;
```
### Step 6: Activate the copy button
 We have implemented the password generating system and now we will implement the copy button. In the same way we have determined a variable (`copyText`) of the ID (`password`) of that input.
Whatever is written in the input box can be copied with the help of the copy button.
```javascript
function copyPassword() {
  var copyText = document.getElementById("password");
  copyText.select();
  document.execCommand("copy");  
}
```
![Activate the system using JavaScript code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4u550tvuuasfm04ggjog.jpg)
### Final JavaScript code
```javascript
var password=document.getElementById("password");

 function genPassword() {
    var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var passwordLength = 12;
    var password = "";
 for (var i = 0; i <= passwordLength; i++) {
   var randomNumber = Math.floor(Math.random() * chars.length);
   password += chars.substring(randomNumber, randomNumber +1);
  }
        document.getElementById("password").value = password;
 }

function copyPassword() {
  var copyText = document.getElementById("password");
  copyText.select();
  document.execCommand("copy");  
}
```

I hope I have explained to you in this tutorial how I created this random password system with the help of JavaScript. If you want to know better, you can watch the video tutorial above. 

**Related Post:**
1. [BMI Calculator in Javascript](https://groundtutorial.com/bmi-calculator-javascript/) 
2. [Check Palindrome in JavaScript](https://groundtutorial.com/how-to-check-palindrome-in-javascript/)
3. [Touch Image Slider JavaScript](https://groundtutorial.com/touch-image-slider-using-html-css-javascript/)
4. [Double Range Slider in HTML, CSS, Javascript](https://groundtutorial.com/double-range-slider-in-html-css-javascript/) 
5. [Password Strength Checker In JavaScript](https://groundtutorial.com/password-strength-checker-in-javascript/) 

You can also download [Random Password Generator](https://www.foolishdeveloper.com/2021/07/random-password-generator-javascript.html) source code. Please let me know in the comments how you like this design.