DEV Community

Cover image for Password Generator With Bootstrap 5 And Javascript.
Prosper Yong
Prosper Yong

Posted on • Updated on

Password Generator With Bootstrap 5 And Javascript.

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
Enter fullscreen mode Exit fullscreen mode

1. Setting The Javascript Magic 😄

Open the already created passgen.js file and paste the following code into it

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);
}
Enter fullscreen mode Exit fullscreen mode
  • The first thing we need to do is construct a function. You may call it whatever you want, but I went with genpass ().
function genPass() {
}
Enter fullscreen mode Exit fullscreen mode
  • In order to save the loop's output, we establish a variable named password.
function genPass() {
// define result variable 
    var password = "";
    }
Enter fullscreen mode Exit fullscreen mode
  • 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.
function genPass() {
// define result variable 
    var password = "";
     // define allowed characters
    var characters = "0123456789@#$%!-&*ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";   
}
Enter fullscreen mode Exit fullscreen mode
  • Then we define the length of our password.The string long was chosen for a reason that will be explained later.
function genPass() {
// define result variable 
    var password = "";
     // define allowed characters
    var characters = "0123456789@#$%!-&*ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    // define length of password character
    var long = "30";
}
Enter fullscreen mode Exit fullscreen mode
  • The password is then generated using a for loop.
for (var i = 0; i < long; i++) {
        // generate password
        gen = characters.charAt(Math.floor(Math.random() * characters.length));
        password += gen;
    }
Enter fullscreen mode Exit fullscreen mode
  • 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.

for (var i = 0; i < long; i++) {
        // generate password
        gen = characters.charAt(Math.floor(Math.random() * characters.length));
        password += gen;
    }
Enter fullscreen mode Exit fullscreen mode

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.


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);
}
Enter fullscreen mode Exit fullscreen mode

2. Setting HTML

Open the already created index.html file and paste the following code into it

<!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>
Enter fullscreen mode Exit fullscreen mode

Setting Css

Open the already created style.css file and paste the following code into it

 .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;
        }
    }

Enter fullscreen mode Exit fullscreen mode

This is what you get when you run the codes above.
Password Generator
And when you click the copy button you get.
Password copied
You can find the code hereand 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.

Discussion (3)

Collapse
peter279k profile image
Info Comment hidden by post author - thread only accessible via permalink
peter279k

Just have the small tips:

The JavaScript coding style are not consistency. For example, the Password variable starts with upper case character, and other variables start with lower case character.

Could you fix that?

Collapse
sqlrob profile image
Robert Myers

You shouldn't be using Math.Random for generating passwords, or indeed, for anything secure.

You want to be using Crypto.getRandomValues, throwing out invalid values with with thresholds,optionally using bit masking before for an optimization.

Collapse
yongdev profile image
Prosper Yong Author • Edited on

oh thanks i'll go do some findings and update the code

Some comments have been hidden by the post's author - find out more