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
TypeScript Tutorial TypeScript is a superset of JavaScript that adds extra features like static typing, interfaces, enums, and more. Essentially, TypeScript is JavaScript with additional syntax for defining types, making it a powerful tool for building scalable and maintainable applications.Static typing allows you to
8 min read
Difference between TypeScript and JavaScript Ever wondered about the difference between JavaScript and TypeScript? If you're into web development, knowing these two languages is super important. They might seem alike, but they're actually pretty different and can affect how you code and build stuff online.In this article, we'll break down the
4 min read
TypeScript Interview Questions and Answers TypeScript, a robust, statically typed superset of JavaScript, has become a go-to language for building scalable and maintainable applications. Developed by Microsoft, it enhances JavaScript by adding static typing and modern ECMAScript features, enabling developers to catch errors early and improve
15+ min read
TypeScript Map TypeScript Map is a collection that stores key-value pairs, where keys and values can be of any type. It maintains the insertion order of keys and provides methods to add, retrieve, check, remove, and clear entries, ensuring efficient management of key-value data.Creating a MapA map can be created a
3 min read
Typescript Set A Set in TypeScript is a bunch of unique values. It is part of the ECMAScript 2015 (ES6) standard and is implemented as a native object in JavaScript.Unlike arrays, sets do not allow duplicate elements, making them useful for storing collections of unique items. TypeScript provides strong typing for
3 min read
Introduction to TypeScript TypeScript is a syntactic superset of JavaScript that adds optional static typing, making it easier to write and maintain large-scale applications.Allows developers to catch errors during development rather than at runtime, improving code reliability.Enhances code readability and maintainability wit
5 min read
TypeScript Array map() Method The Array.map() is an inbuilt TypeScript function that creates a new array with the results of calling a provided function on every element in the array.Syntax:array.map(callback[, thisObject])Parameters: This method accepts two parameters as mentioned above and described below: callback: This param
2 min read
How to Format Date in TypeScript ? Formatting dates is important especially when displaying them to the users or working with date-related data. TypeScript provides various ways to achieve this. Below are the methods to format the date data type in TypeScript:Table of ContentUsing toLocaleString() methodUsing toLocaleDateString() met
3 min read
Data types in TypeScript In TypeScript, a data type defines the kind of values a variable can hold, ensuring type safety and enhancing code clarity.Primitive Types: Basic types like number, string, boolean, null, undefined, and symbol.Object Types: Complex structures including arrays, classes, interfaces, and functions.Prim
3 min read
How do I Remove an Array Item in TypeScript? In this article, we will learn about the different ways of removing an item from an array in TypeScript. In TypeScript, an array can be defined using union typing if it contains items of different types. We can use the following methods to remove items from a TypeScript array:Table of ContentUsing t
4 min read