<!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!");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.