PASSWORD GENERATOR using HTML, CSS, and Javascript
Tags: javascript, html, css, webdev
Published: 2021-10-20 10:44:35


==================================================



![](https://images.unsplash.com/photo-1477039181047-efb4357d01bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80)Photo by [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

Dear Reader,

Let’s build a password generator which generate passwords of different lengths and which can include or exclude special characters in the generated passwords based on user selection. This is going to be simple. Stay with me till the end. 🔐

Folder structure:

1.  _index.html — contains the HTML layout which defines the element structure that would be shown on the page._
2.  _style.css- contains CSS code for styling. Using CSS we can style the different portions to make them more visually appealing._
3.  _script.js — contains Javascript code where all the functions are placed._

HTML Layout
===========

Open VSCode and create the basic HTML structure in an **index.html** file by pressing ! and then pressing tab. Give the **title** as ‘**Password Generator**’. Link **style.css** and **script.js** to the created HTML file and link **FontAwesome** CSS to use icons**.**

Generate Password Button: Create **button** inside **div** class **wrapper** clicking on which we will generate the password. Add `<i class=”fab fa-keycdn”></i>` to display icon.

```
<button id="generate" class="action-btn">Generate Password <i class="fab fa-keycdn"></i></button>
```

Slider to select length: Add one more div class **slider\_main** inside **wrapper class .slider\_main** class contains the slider which is used to select the length of the password. The  min, max and the initial  value is set and the selected value using slider will be displayed in the **output** section.

```
<div class="slider\_main">
 <input type="range" value="8" min="1" max="25" class="slider"oninput="this.nextElementSibling.value = this.value" id="slider">
 <output>8</output>
</div>
```

Checkbox to include special characters: Add an **input** tag of type **checkbox**, on checking we will include special characters in the password, and on unchecking we will remove special characters from password.

```
<label class="container" style="font-family: fantasy;color: rgb(3, 3, 3);">Include special characters
            <input type="checkbox" checked="checked" id="checkbox">
            <span class="checkmark"></span>
        </label>
```

Password display and copy button: Add a **h5** tag under div class **wrapper\_main** to display the generated password and add a button to copy the generated password. Use `<i class=”fas fa-clipboard”>` for the clipboard icon.

```
<div class="wrapper_main">
        <h5 id="pwd_txt"></h5>
        <button id="clipboard" class="clipboard">
            <i class="fas fa-clipboard"></i>
        </button>
</div>
```

Here is the complete HTML code,

```
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link rel="stylesheet" href="style.css"> 
</head>

<body>
    <div class="wrapper">
        <button id="generate" class="action-btn">
            Generate Password <i class="fab fa-keycdn"></i>
        </button>
        <div class="slider_main">
            <input type="range" value="8" min="1" max="25" class="slider"
                oninput="this.nextElementSibling.value = this.value" id="slider">
            <output>8</output>
        </div>
        <label class="container" style="font-family: fantasy;color: rgb(3, 3, 3);">Include special characters
            <input type="checkbox" checked="checked" id="checkbox">
            <span class="checkmark"></span>
        </label>
    </div>



    <div class="wrapper_main">
        <h5 id="pwd_txt"></h5>
        <button id="clipboard" class="clipboard">
            <i class="fas fa-clipboard"></i>
        </button>
    </div>
    <script src="script.js"></script>
</body>

</html> 

```

CSS Styling
===========

Implement a slider to override the default one and hovering on the slider will make it less opaque.

```
.slider{

-webkit-appearance: none;
width: 70%;
height: 10px;
background: #f7be04;
border-radius: 15px;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
margin-left: 40px;
margin-top: 25px;
margin-bottom: 20px;
}

.slider:hover{
opacity: 0.5;
}
```

Complete CSS code is here

```
html{
min-height: 100%;
}

  

body{
min-height: 100%;
background-color: #2d3436;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
text-align: center;
}

  

.slider{
-webkit-appearance: none;
width: 70%;
height: 10px;
background: #f7be04;
border-radius: 15px;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
margin-left: 40px;
margin-top: 25px;
margin-bottom: 20px;
}

.slider:hover{
opacity: 0.5;
}

.slider::-webkit-slider-thumb{
-webkit-appearance: none;
width: 15px;
height: 15px;
background: #000000;
border-radius: 50%;
cursor: pointer;
}

.action-btn{
background-color: #000;
border: 0;
color: #f7be04;
font-size: 20px;
cursor: pointer
padding: 10px;
margin: 10px  20px;
border-radius: 15px;
font-family: fantasy;
opacity: 1;
transition: opacity .2s;
}

  

.action-btn:hover{
opacity: 0.5;
}

  

.wrapper{
display: flex;
background-color: rgb(253, 253, 252);
flex-direction: column;
width: 30%;
margin-top: 10%;
margin-left: 35%;
border-radius: 15px;
font-family: fantasy;
padding-bottom: 1%;
}

.slider_main{
display: flex;
flex-direction: row;
}

output{
margin-top: 20px;
margin-left: 10px;
}

  

.wrapper_main
{
display: flex;
background-color: rgb(253, 253, 252);
flex-direction: row;
width: 22%;
margin-top: 5%;
margin-left: 38%;
border-radius: 15px;
font-family: Georgia, serif;
padding-left: 45px;
}

  

.clipboard{
margin-left: auto;
cursor: pointer;
border: 0;
background-color: white;
color:black;
border-radius: 15px;
font-size: 23px;
opacity: 1;
transition: opacity .2s;
}

  

.clipboard:hover{
opacity: 0.5;
}
```

Javascript logic
================

We need to generate the password by selecting characters randomly. The length slider value given by the user will determine the length of the password and the user can choose whether to include special characters or not using the checkbox. To implement this functionality let’s fetch the required elements and store them in the below constants and variables.

password\_ele — To store the **h5** element which is used to set the generated password.

string — To store the **characters** used to generate passwords except for special characters.

special\_chars —Used to store **special characters**, based on check box value we can add special characters to the password.

generate — Used to store the **Generate Password** button.

clipboard — Used to store **clipboard** button.

pwd\_length — Used to store the **slider** element.

```
const password_ele = document.getElementById("pwd_txt");

var string = "ABCDEFGHIJKLMNOPQRSTUVWXYZacdefghijklnopqrstuvwxyz0123456789";

const special_chars = "@#$%^&*";

const generate = document.getElementById("generate");

const clipboard = document.getElementById("clipboard");

var pwd_length = document.getElementById("slider");
```

On clicking **Generate Password** button we will execute some lines of codes to generate the password using **Math.random()** function. If checkbox is checked then we will add special characters to our original string. Original string contains `“ABCDEFGHIJKLMNOPQRSTUVWXYZacdefghijklnopqrstuvwxyz0123456789”.`

Loop through the string to fetch the character randomly and in each loop add the randomly selected character to the **password** variable which was empty initially. The number of times the loop is executed is equal to the slider length so, the length of the password will be equal to the length given by the user.

```
generate.addEventListener('click', () => {
    let password = "";
    var checked = document.getElementById("checkbox").checked;
    var final_string = string;
    console.log(checked);
    if (checked) {
        final_string += "@#$%^&*";
    }
    for (var i = 0; i < pwd_length.value; i++) {
        let pwd = final_string[Math.floor(Math.random() * final_string.length)];
        password += pwd;
    }
    password_ele.innerText = password;
    final_string = string;
});
```

on click of clipboard icon, the password text should get selected and display an alert message.

```
  

clipboard.addEventListener('click', () => {

 navigator.clipboard.writeText(password_ele.innerText);

 alert("Password copied to clipboard");

});
```

Complete javascript code is here,

```
const password_ele = document.getElementById("pwd_txt");
var string = "ABCDEFGHIJKLMNOPQRSTUVWXYZacdefghijklnopqrstuvwxyz0123456789";
const special_chars = "@#$%^&*";
const generate = document.getElementById("generate");
const clipboard = document.getElementById("clipboard");
var pwd_length = document.getElementById("slider");


generate.addEventListener('click', () => {
    let password = "";
    var checked = document.getElementById("checkbox").checked;
    var final_string = string;
    console.log(checked);
    if (checked) {
        final_string += "@#$%^&*";
    }
    for (var i = 0; i < pwd_length.value; i++) {
        let pwd = final_string[Math.floor(Math.random() * final_string.length)];
        password += pwd;
    }
    password_ele.innerText = password;
    final_string = string;
});


clipboard.addEventListener('click', () => {
    navigator.clipboard.writeText(password_ele.innerText);
    alert("Password copied to clipboard");
});


```

Let’s check the output

{% youtube fz6LiqBjVxs %}



Complete code is placed in [GitHub](https://github.com/Divyamcm/Projects/tree/main/Password_Generator).

Thanks for your interest.