Password Generator With Bootstrap 5 And Javascript.
Tags: javascript, security, html, css
Published: 2021-08-27 21:01:56

Dear friends and family: I hope you're doing well. Using Bootstrap and Javascript, I'll show you how to construct your own password generator with a copy button. To create safe passwords for DBMS(Database Management System) and other highly sensitive web applications, a password generator may be essential I included a copy button so you may copy the password and store it somewhere. If you use Google Chrome or other compatible browsers, they will prompt you to save the created passwords.

##Prerequisites.
 You should be familiar with Javascript.
Knowledge of HTML and CSS. 

## You'll learn How to.
Create a Password Generator
Copy button.

 ##Setup & Structure of Files.
To begin, make a folder called Generator and arrange it as follows:
###File Structure
```
Generator:
├── assets
│   ├── css
│   │   ├── style.css
│   └──js
│      ├── passgen.js
│    
|
└── index.html
```
### 1. Setting The Javascript Magic :smile:
Open the already created `passgen.js` file and paste the following code into it
```javascript
function genPass() {
    // define result variable 
    var password = "";
    // define allowed characters
    var characters = "0123456789@#$%!-&*ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    
    // define length of password character
    var long = "30";
    for (var i = 0; i < long; i++) {
        // generate password
        gen = characters.charAt(Math.floor(Math.random() * characters.length));
        password += gen;
    }
    // send the output to the input
    document.getElementById('pass').value = password;
}
// Copy password button
function copy() {
    // get password from input text field
    var copyText = document.getElementById("pass");
    // Set selection range to copy longer text on mobile devices
    copyText.setSelectionRange(0, 9999);
    //Copy the text from the text field 
    navigator.clipboard.writeText(copyText.value);
    // Get the toast container
    var x = document.getElementById("toast")
    // Add the "show" class to the container
    x.className = "show";
    //Show toast for 3sec
    setTimeout(function() { x.className = x.className.replace("show", ""); }, 3000);
}
```

* The first thing we need to do is construct a function. You may call it whatever you want, but I went with genpass ().
```js
function genPass() {
}
```
* In order to save the loop's output, we establish a variable named password. 
```js
function genPass() {
// define result variable 
    var password = "";
    }
```
* Next, we define the characters that can be used in the password string.You can even add new characters to the existing password string if you like.Before the alphabets, numbers and special characters were introduced to create a variable that was dominated by these characters.
 ```js
function genPass() {
// define result variable 
    var password = "";
     // define allowed characters
    var characters = "0123456789@#$%!-&*ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";   
}
```
* Then we define the length of our password.The string long was chosen for a reason that will be explained later.
```js
function genPass() {
// define result variable 
    var password = "";
     // define allowed characters
    var characters = "0123456789@#$%!-&*ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    // define length of password character
    var long = "30";
}
``` 
* The password is then generated using a for loop.
```js
for (var i = 0; i < long; i++) {
        // generate password
        gen = characters.charAt(Math.floor(Math.random() * characters.length));
        password += gen;
    }
```

* A counter is created and set to zero before any loop execution begins. To construct counters, this phrase `i` is often used. The scope of variables generated here is the loop. They are deleted once the loop has ended.`for (var i = 0;)`

* Every iteration is preceded by a check for the condition.The condition is set to check if the counter is less than the specified length.This expression evaluates to true if it is omitted. The loop's statement is executed if it evaluates to true. The loop ends if it evaluates to false.`for (i < long;)`

* After each iteration, the final expression `for (i++)` is executed. If the condition is true, it increases the length of the long variable by the amount specified by the condition.
```js
for (var i = 0; i < long; i++) {
        // generate password
        gen = characters.charAt(Math.floor(Math.random() * characters.length));
        password += gen;
    }
```
Using the math.random() function, you would generate random passwords. Numbers are rounded to the closest integer using Math.floor. The `characters.length` counts how many characters are in the character variable and creates a random string from that amount.

Let's finish off by putting the produced string in the input box. Using the tag's id, we transmit the value.
` document.getElementById('pass').value = password;`

#### Creating the copy function

* The first thing we need to do is construct a function. You may call it whatever you want, but I went with copy().

* In order to get the text to copy , we selected the element by its id.
* Next we called the selection range variable to copy a very long variable up to 9999.
* Then we called the function to copy the text to clipboard.
*Last but not least, we created a function to display a toast to indicate that the password was successfully copied.
```js

function copy() {
}
 // Copy password button
function copy() {
    // get password from input text field
    var copyText = document.getElementById("pass");
    // Set selection range to copy longer text on mobile devices
    copyText.setSelectionRange(0, 9999);
    //Copy the text from the text field 
    navigator.clipboard.writeText(copyText.value);
    // Get the toast container
    var x = document.getElementById("toast")
    // Add the "show" class to the container
    x.className = "show";
    //Show toast for 3sec
    setTimeout(function() { x.className = x.className.replace("show", ""); }, 3000);
}
```
### 2. Setting HTML
Open the already created `index.html` file and paste the following code into it
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Password Generator</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <section class="login-clean">
        <form method="post">
            <h1><strong>Password Generator</strong></h1>
            <div class="mt-5 mb-5"></div>
            <div class="mb-3">
                <input class="form-control" type="text" id="pass" placeholder="Click the Generate Password Button">
            </div>
            <div class="mb-3 ">
                <button class="btn btn-primary re w-100 " type="button" onclick="copy()">
                    <i class="fa fa-copy "></i>&nbsp; Copy</button>
                <button class="btn btn-primary d-block w-100 " type="button" style="background: var(--bs-indigo); " onclick="genPass();">Generate Password</button>
            </div>
        </form>
        <div id="toast">Password Copied !</div>
    </section>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="assets/js/passgen.js "></script>
</body>
</html>
```
### Setting Css
Open the already created `style.css` file and paste the following code into it

```css
 .login-clean {
        background: #f1f7fc;
        padding: 80px 0;
    }
    
    .login-clean form {
        max-width: 520px;
        width: 90%;
        margin: 0 auto;
        background-color: #ffffff;
        padding: 40px;
        border-radius: 4px;
        color: #505e6c;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    }
    
    .login-clean form .form-control {
        background: #f7f9fc;
        border: none;
        border-bottom: 1px solid #dfe7f1;
        border-radius: 0;
        box-shadow: none;
        outline: none;
        color: inherit;
        text-indent: 1px;
        height: 42px;
    }
    
    .login-clean form .btn-primary {
        background: #f4476b;
        border: none;
        border-radius: 4px;
        padding: 11px;
        box-shadow: none;
        margin-top: 26px;
        text-shadow: none;
        outline: none !important;
    }
    
    .login-clean form .btn-primary:hover,
    .login-clean form .btn-primary:active {
        background: #eb3b60;
    }
    
    .login-clean form .btn-primary:active {
        transform: translateY(1px);
    }
    
    #toast {
        visibility: hidden;
        background: #333333;
        border-radius: 2px;
        position: fixed;
        color: #fff;
        text-align: center;
        left: 50%;
        min-width: 250px;
        margin-left: -140px;
        bottom: 50px;
        padding: 16px;
        padding-left: 32px;
    }
    
    #toast.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
    
    @-webkit-keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }
        to {
            bottom: 50px;
            opacity: 1;
        }
    }
    
    @keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }
        to {
            bottom: 50px;
            opacity: 1;
        }
    }
    
    @-webkit-keyframes fadeout {
        from {
            bottom: 50px;
            opacity: 1;
        }
        to {
            bottom: 0;
            opacity: 0;
        }
    }
    
    @keyframes fadeout {
        from {
            bottom: 50px;
            opacity: 1;
        }
        to {
            bottom: 0;
            opacity: 0;
        }
    }

```
This is what you get when you run the codes above.
![Password Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsgaa55ikmdw3owa6d7o.png)
And when you click the copy button you get.
![Password copied](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj4r430pa1dvzodbyapl.png)
You can find the code [here](https://github.com/prosperyong/Password-Generator-with-Bootstrap5-and-js)and you can leave a star.You are allowed to copy the source code and use it in your own projects. Please like and comment below. Don't forget to follow us and share the post; doing so will motivate us to develop more lessons in the future.