<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<title>Strong Password Generator</title>
</head>
<body class="bg-gray-100 flex flex-col min-h-screen">
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md mx-auto my-10">
<h1 class="text-3xl font-bold mb-4 text-center text-blue-600">Strong Password Generator</h1>
<div class="mb-4">
<label for="length" class="block text-sm font-medium text-gray-700">Password Length</label>
<input type="number" id="length" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:ring focus:ring-blue-300" min="8" max="20" value="12">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700">Include:</label>
<div class="flex items-center mb-2">
<input type="checkbox" id="uppercase" checked class="mr-2 text-blue-600 focus:ring focus:ring-blue-300">
<label for="uppercase">Uppercase Letters</label>
</div>
<div class="flex items-center mb-2">
<input type="checkbox" id="lowercase" checked class="mr-2 text-blue-600 focus:ring focus:ring-blue-300">
<label for="lowercase">Lowercase Letters</label>
</div>
<div class="flex items-center mb-2">
<input type="checkbox" id="numbers" checked class="mr-2 text-blue-600 focus:ring focus:ring-blue-300">
<label for="numbers">Numbers</label>
</div>
<div class="flex items-center mb-4">
<input type="checkbox" id="special" checked class="mr-2 text-blue-600 focus:ring focus:ring-blue-300">
<label for="special">Special Characters</label>
</div>
</div>
<button id="generate" class="w-full bg-blue-500 text-white font-bold py-2 rounded hover:bg-blue-600 transition duration-200">Generate Password</button>
<div class="mt-4">
<input type="text" id="password" class="w-full p-2 border border-gray-300 rounded-md focus:ring focus:ring-blue-300" readonly>
<button id="copy" class="w-full bg-green-500 text-white font-bold py-2 rounded mt-2 hover:bg-green-600 transition duration-200">Copy to Clipboard</button>
</div>
<div class="mt-4 text-sm text-gray-600">
<h2 class="font-semibold">Tips for Strong Passwords:</h2>
<ul class="list-disc list-inside">
<li>Use a mix of letters, numbers, and symbols.</li>
<li>Avoid easily guessable information like names or birthdays.</li>
<li>Use a unique password for each account.</li>
<li>Consider using a password manager.</li>
</ul>
</div>
</div>
<footer class="bg-gray-800 text-white p-4 mt-8">
<div class="container mx-auto text-center">
<h2 class="text-lg font-bold mb-2">Connect with Me</h2>
<div class="flex justify-center space-x-4 mb-4">
<a href="https://facebook.com/deepduharia" target="_blank" class="hover:underline hover:text-blue-400">Facebook</a>
<a href="https://twitter.com/deepduharia" target="_blank" class="hover:underline hover:text-blue-400">Twitter</a>
<a href="https://instagram.com/deepduharia" target="_blank" class="hover:underline hover:text-blue-400">Instagram</a>
<a href="https://www.linkedin.com/in/deep-duharia-videoeditor/" target="_blank" class="hover:underline hover:text-blue-400">LinkedIn</a>
<a href="https://github.com/deepduharia" target="_blank" class="hover:underline hover:text-blue-400">GitHub</a>
</div>
<div class="mt-2">
<a href="https://www.buymeacoffee.com/deepduharia" target="_blank" class="hover:underline hover:text-blue-400">Buy Me a Coffee</a>
</div>
<div class="mt-2">
<a href="https://codepen.io/Deepduharia" target="_blank" class="hover:underline hover:text-blue-400">CodePen Profile</a>
</div>
<p class="mt-4 text-sm">© 2024 Deep Duharia. All rights reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
document.getElementById("generate").addEventListener("click", function() {
const length = parseInt(document.getElementById("length").value);
const includeUppercase = document.getElementById("uppercase").checked;
const includeLowercase = document.getElementById("lowercase").checked;
const includeNumbers = document.getElementById("numbers").checked;
const includeSpecial = document.getElementById("special").checked;
const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
const numberChars = '0123456789';
const specialChars = '!@#$%^&*()_+[]{}|;:,.<>?';
let characterSet = '';
if (includeUppercase) characterSet += uppercaseChars;
if (includeLowercase) characterSet += lowercaseChars;
if (includeNumbers) characterSet += numberChars;
if (includeSpecial) characterSet += specialChars;
if (characterSet.length === 0) return alert("Please select at least one character type.");
let password = '';
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characterSet.length);
password += characterSet[randomIndex];
}
document.getElementById("password").value = password;
});
document.getElementById("copy").addEventListener("click", function() {
const passwordField = document.getElementById("password");
passwordField.select();
document.execCommand("copy");
alert("Password copied to clipboard!");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.