The Password Generator is a web application built using Tailwind CSS and JavaScript. It allows users to generate random passwords based on their specified criteria such as the length and character types.
Output Preview: Let us have a look at how the final card will look like.
Approach
- Integrate the Tailwind CSS via CDN Link in your HTML code. Use different HTML elements to structure the web page and style them using different Tailwind utilities.
- Users can input the desired length of the password (between 4 and 20 characters) using a number input field. Checkboxes allow users to include uppercase letters, lowercase letters, numbers, and symbols in the generated password.
- Buttons are provided to generate a password and copy the generated password to the clipboard. Functions are defined to show and hide error messages for input validation.
-
The
generatePasswordfunction creates a password based on user input, considering the selected options for length and character types. Event listeners are added to the “Generate Password” and “Copy Password” buttons to trigger the corresponding functions when clicked. - When the “Copy Password” button is clicked, the generated password is selected and copied to the clipboard, with a success alert displayed.
Example: Illustration of Building a Password Generator in Tailwind CSS
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<style>
.error-message {
color: #e53e3e;
}
</style>
</head>
<body class="bg-gray-100 min-h-screen flex
flex-col justify-center items-center">
<div class="max-w-md w-full p-8 bg-white
rounded-lg shadow-lg border-2
border-green-400">
<h1 class="text-3xl font-semibold
text-center mb-8">
Password Generator
</h1>
<div class="mb-4 flex flex-col">
<label for="length" class="mb-2">
Length:
</label>
<input type="number" id="length"
class="w-20 px-4 py-2 border
border-gray-300 rounded-md
focus:outline-none
focus:border-blue-500"
min="4" max="20" value="8">
<p id="length-error" class="error-message hidden">
Please enter a length between 4 and 20.
</p>
</div>
<div class="mb-4 flex flex-col">
<label class="mb-2">Include:</label>
<label class="flex items-center mb-1">
<input type="checkbox" id="uppercase" class="mr-2">
Uppercase
</label>
<label class="flex items-center mb-1">
<input type="checkbox" id="lowercase" class="mr-2">
Lowercase
</label>
<label class="flex items-center mb-1">
<input type="checkbox" id="numbers" class="mr-2">
Numbers
</label>
<label class="flex items-center">
<input type="checkbox" id="symbols" class="mr-2">
Symbols
</label>
</div>
<div class="mb-8">
<button id="generate-btn"
class="px-6 py-3 bg-blue-500 text-white
rounded-md hover:bg-blue-600
focus:outline-none">
Generate Password
</button>
<button id="copy-btn"
class="px-6 py-3 ml-4 bg-gray-500
text-white rounded-md
hover:bg-gray-600
focus:outline-none">
Copy Password
</button>
</div>
<input type="text" id="password"
class="w-full px-4 py-2 border border-gray-300
rounded-md focus:outline-none
focus:border-blue-500 text-center
text-xl font-semibold mb-4"
readonly>
</div>
<script>
const showError = (element, message) => {
element.textContent = message;
element.classList.remove('hidden');
};
const hideError = (element) => {
element.textContent = '';
element.classList.add('hidden');
};
const generatePassword = () => {
const length = document.getElementById('length')
.value;
if (length === '' || length < 4 || length > 20) {
showError(document.getElementById('length-error'),
'Please enter a length between 4 and 20.');
return;
} else {
hideError(document.getElementById('length-error'));
}
const uppercase = document.getElementById('uppercase')
.checked;
const lowercase = document.getElementById('lowercase')
.checked;
const numbers = document.getElementById('numbers')
.checked;
const symbols = document.getElementById('symbols')
.checked;
let charset = '';
if (uppercase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
if (lowercase) charset += 'abcdefghijklmnopqrstuvwxyz';
if (numbers) charset += '0123456789';
if (symbols) charset += '!@#$%^&*()-_+=/?';
let password = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random()
* charset.length);
password += charset[randomIndex];
}
document.getElementById('password')
.value = password;
};
document.getElementById('generate-btn')
.addEventListener('click', generatePassword);
document.getElementById('copy-btn')
.addEventListener('click', () => {
const passwordField = document.getElementById('password');
passwordField.select();
passwordField.setSelectionRange(0, 99999);
document.execCommand('copy');
alert('Password copied to clipboard!');
});
</script>
</body>
</html>
|
Output:
Output
Recommended Articles