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 Password GeneratorRandom 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
<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.
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
<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>
Similar Reads
Random String Generator using JavaScript JavaScript is a lightweight, cross-platform, interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments.In this article, we need to create a Rand
7 min read
How to Generate a Random Password using JavaScript? Creating a random password generator is an excellent beginner-friendly project that can be useful in real-world applications. Passwords are vital for securing accounts, and strong, randomized passwords enhance security significantly. How to Generate a Random Password using JavaScriptWhat We're Going
5 min read
How to Generate Random Password in ReactJS ? Generating random passwords is basic requirement for applications that has user authentication, registration, or security-related functionalities. In ReactJS, you can create a simple function to generate strong and random passwords for users. In this article, we will guide you through the process of
3 min read
Iterators & Generators in TypeScript Iterators and generators are powerful features in TypeScript (and JavaScript) that allow for the creation and manipulation of sequences of values in a lazy, efficient manner, in this article we shall give a detailed account of what these concepts are all about and how to implement them in TypeScript
3 min read
Build a Random Name Generator using ReactJS In this article, a Random Name GeÂnerator will be created using React.js. Building a Random Name Generator means creating a program or application that generates random names, typically for various purposes like usernames, fictional characters, or data testing. It usually involves combining or selec
4 min read
Random Image Generator using JavaScript In this article, we will learn how to generate random images in fixed intervals using only HTML, CSS, and JavaScript.Approach: The pictures that are going to be generated randomly on the website should be stored in the form of an array; these pictures are then displayed to the user within a regular
4 min read
TypeScript Writing Good Overloads In this article, we are going to learn about Writing Good Overloads in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. For writing good overloads, you should always prefer parameters with union types instead of overloads when possible beca
3 min read
TypeScript Using Class Types in Generics TypeScript Using class types in generics allows you to create more flexible and reusable code by specifying that a generic parameter should be a class constructor. This is particularly useful when you want to work with instances of classes but want to keep the code type safe. You can define a generi
3 min read
How to Build Password Generator using Node.js? Creating a password generator is a common and practical programming task that helps enhance security by generating random passwords. Using Node.js, you can build a simple and effective password generator with various features, such as customizable length, inclusion of special characters, and more. T
3 min read
How to Generate a Random Boolean using JavaScript? To generate a random boolean in JavaScript, use Math.random(), which returns a random number between 0 and 1.Approach: Using Math.random() functionCalculate Math.random() function.If it is less than 0.5, then true otherwise false.Example 1: This example implements the above approach. JavaScript// Fu
1 min read