Password Generator Source Code (JavaScript, HTML, CSS)

bySakib Mahmud -June 23, 2021

0

What is a password generator?

A random password generator is a program or software that can generate different characters, symbols, numbers randomly and create complex passwords. It has different functionality like copy passwords, set lengths, use of different complexity levels, etc. Using a random password generator users can generate a long and complex password for themself.

Main theory

Using JavaScript random method we can generate different numbers, characters, symbols. We can generate random combinations using the same random method. If we can shuffle different symbols, characters and numbers then we can create complex passwords. We don't need and complex functions because we don't have to write any code for random methods or functions when we are using JavaScript.

Source Code

Here we are going to share all source code for this password generator script. You need HTML and Javascript to build it. If we use a little bit of CSS code then we can make it look better. All those codes are below. Copy and paste it into your code editor and then run the project.

HTML code for random password generator

<!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 Genarator</title></head><body><div class="well"> <label for="len">Password Length</label><br /> <input id="len" value="15" type="number" onKeyDown="if(this.value.length==4) return false;" class="form-control" /><div> <label for="upper">Contain Uppercase Letters</label> <input id="upper" type="checkbox" checked /></div><div> <label for="lower">Contain Lowercase Letters</label> <input id="lower" type="checkbox" checked /></div><div> <label for="number">Contain Numbers</label> <input id="number" type="checkbox" checked /></div><div> <label for="symbol">Contain Symbols</label> <input id="symbol" type="checkbox" checked /></div><div style="text-align: center;"> <button class="btn" id="generate">Generate Password</button><br /> <span id="pword"></span><br /> <button id="copy" class="btn">Copy</button></div></div></body></html>

CSS code for random password generator

<style>
    input[type=number],
    span {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        outline: none;
    }

    .btn {
        width: 60%;
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .btn:hover {
        background-color: #45a049;
    }

    .well {
        border-radius: 5px;
        background-color: #f2f2f2;
        padding: 20px;
    }
</style>

JavaScript code for random password generator

<script>
    //El= Short form of Element
    const pwEl = document.getElementById("pword");
    const copyEl = document.getElementById("copy");
    const lenEl = document.getElementById("len");
    const upperEl = document.getElementById("upper");
    const lowerEl = document.getElementById("lower");
    const numberEl = document.getElementById("number");
    const symbolEl = document.getElementById("symbol");
    const generateEl = document.getElementById("generate");

    const upperLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    const lowerLetters = "abcdefghijklmnopqrstuvwxyz";
    const numbers = "0123456789";
    const symbols = "!@#$%^&*()_+=[]";

    function getLowercase() {
        return lowerLetters[Math.floor(Math.random() * lowerLetters.length)];
    }

    function getUppercase() {
        return upperLetters[Math.floor(Math.random() * upperLetters.length)];
    }

    function getNumber() {
        return numbers[Math.floor(Math.random() * numbers.length)];
    }

    function getSymbol() {
        return symbols[Math.floor(Math.random() * symbols.length)];
    }

    function generatePassword() {
        const len = lenEl.value;
        let password = "";

        for (let i = 0; i < len; i++) {
            const x = generateX();
            password += x;
        }

        pwEl.innerText = password;
    }

    function generateX() {
        const xs = [];
        upperEl.checked && xs.push(getUppercase());
        lowerEl.checked && xs.push(getLowercase());
        numberEl.checked && xs.push(getNumber());
        symbolEl.checked && xs.push(getSymbol());

        if (xs.length === 0)
            return "";

        return xs[Math.floor(Math.random() * xs.length)];
    }

    generateEl.addEventListener("click", generatePassword);

    copyEl.addEventListener("click", () => {
        const textarea = document.createElement("textarea");
        const password = pwEl.innerText;

        if (!password) {
            return;
        }

        textarea.value = password;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand("copy");
        textarea.remove();
        alert("Password copied to clipboard");
    });
</script>

You can create a single-page website using those codes. We have other articles about javascript projects. Explore our website for more source codes.

Tags: JavaScript