Random Password Generator Using TypeScript (original) (raw)

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

JavaScript `

`

**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.

JavaScript `

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 `

`