Random Password Generator Using TypeScript

Last Updated : 04 Feb, 2025

Generating strong and secure passwords is essential for protecting user accounts from unauthorized access. A random password generator in TypeScript ensures better security by creating unpredictable and complex passwords with a mix of letters, numbers, and special characters.

What We Are Going to Create

We’ll build an application that allows users to

Generate a random password with a specified length.
Include uppercase letters, lowercase letters, numbers, and special characters.
Customize the password's complexity and length based on user input.
Display the generated password and allow users to copy it easily.

Project Preview

Random-pss-generater-2 — Random Password Generator

Random Password Generator - HTML and CSS Setup

This HTML code creates a simple random password generator form. It allows users to specify the length and complexity of the password. This CSS code provides styling for the password generator form, ensuring a clean, user-friendly design with modern elements like input fields, buttons, and a responsive layout.

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7fc;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            padding: 20px;
            border: 2px solid #ddd;
            border-radius: 10px;
            background-color: #fff;
            width: 300px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
        }
        label {
            font-size: 16px;
        }
        input[type="number"] {
            width: 80px;
            padding: 5px;
            margin: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
        button {
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .password-display input {
            margin-top: 20px;
            padding: 10px;
            width: 80%;
            font-size: 18px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Random Password Generator</h1>
        <label for="passwordLength">Password Length:</label>
        <input type="number" id="passwordLength" value="12" min="8" max="20" />
        <button id="generateButton">Generate Password</button>
        <div class="password-display">
            <input type="text" id="password" readonly />
        </div>
    </div>
</body>
</html>

In this example

The HTML creates a form with input fields for password length and a button to generate the password.
The CSS styles the container with centered layout, padding, rounded corners, and shadow.
Users can set a password length between 8 and 20 characters.
The button generates the password, with hover effects for better interaction.
The password is displayed in a read-only input field for easy copying.

Random Password Generator - TypeScript Logic

This TypeScript code handles random password generation based on the user-specified length. It creates a password with a mix of uppercase letters, lowercase letters, numbers, and special characters. The generated password is displayed in a read-only input field, and the user can copy it easily.

function pass(length: number = 12): string {
    const char =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_-+=";
    let password = "";
    for (let i = 0; i < length; i++) {
        const ind = Math.floor(Math.random() * char.length);
        password += char[ind];
    }
    return password;
}

const btn = document.getElementById("generateButton") as HTMLButtonElement;
const inp = document.getElementById("password") as HTMLInputElement;
const passLen = document.getElementById("passwordLength") as HTMLInputElement;

btn.addEventListener("click", () => {
    let length = parseInt(passLen.value, 10);

    if (length < 8) length = 8;
    if (length > 20) length = 20;

    const password = pass(length);
    inp.value = password;
});

In this example

The pass function generates a random password by selecting characters from a predefined set of uppercase, lowercase, numbers, and special characters.
The btn element triggers the password generation when clicked.
The passLen input determines the desired password length (between 8 and 20 characters).
The password is generated and displayed in the inp input field.
The length is validated to ensure it falls within the specified range (8-20 characters).

Convert to JavaScript File

Now You need to convert the TypeScript file into JavaScript to render by browser. Use one of the following command-

npx tsc task.ts
tsc task.ts

The command tsc task.ts compiles the calculator.ts TypeScript file into a task.js JavaScript file.
It places the output in the same directory as the input file by default.

Complete Code

<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7fc;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            text-align: center;
            padding: 20px;
            border: 2px solid #ddd;
            border-radius: 10px;
            background-color: #fff;
            width: 300px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
        }
        label {
            font-size: 16px;
        }
        input[type="number"] {
            width: 80px;
            padding: 5px;
            margin: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
        }
        button {
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .password-display input {
            margin-top: 20px;
            padding: 10px;
            width: 80%;
            font-size: 18px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Random Password Generator</h1>
        <label for="passwordLength">Password Length:</label>
        <input type="number" id="passwordLength" value="12" min="8" max="20" />
        <button id="generateButton">Generate Password</button>
        <div class="password-display">
            <input type="text" id="password" readonly />
        </div>
    </div>
    <script>
        function pass(length) {
            if (length === void 0) { length = 12; }
            var char = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_-+=";
            var password = "";
            for (var i = 0; i < length; i++) {
                var ind = Math.floor(Math.random() * char.length);
                password += char[ind];
            }
            return password;
        }
        var btn = document.getElementById("generateButton");
        var inp = document.getElementById("password");
        var passLen = document.getElementById("passwordLength");
        btn.addEventListener("click", function () {
            var length = parseInt(passLen.value, 10);
            if (length < 8)
                length = 8;
            if (length > 20)
                length = 20;
            var password = pass(length);
            inp.value = password;
        });
    </script>
</body>
</html>