sinanisler logo

Password Generator, 32 to 1024 Random Characters

I wrote a very very simple password generator.

Page is simple html+css+js.

No library, No tracking, No statistics, No cdn. Just Generator. Check the view-source of the page if you want.

When it comes to security you are never enough paranoid 🙂

Anyway probably only me will use it but enjoy if you ever use it.

<div class="container">
    <h2>Password Generator</h2>
    <input type="text" class="password-input" id="password" readonly>
    <div class="slider-container">
        <label for="lengthSlider">Length:</label>
        <input type="range" id="lengthSlider" min="8" max="1024" value="32" oninput="updateLength()">
        <span class="slider-value" id="sliderValue">32</span>
    </div>
    <button class="copy-btn" onclick="generatePassword()">Generate Password</button>
    <button class="copy-btn" onclick="copyPassword()">Copy</button>
    <p id="copyMessage" style="color: green; font-size: 16px; opacity: 0;">Password Copied</p>
</div>

<script>
const passwordInput = document.getElementById('password');
const lengthSlider = document.getElementById('lengthSlider');
const sliderValue = document.getElementById('sliderValue');
const copyMessage = document.getElementById('copyMessage');
function updateLength() {
    sliderValue.textContent = lengthSlider.value;
}
function generatePassword() {
    const length = lengthSlider.value;
    const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()';
    let password = '';
    for (let i = 0; i < length; i++) {
        password += charset.charAt(Math.floor(Math.random() * charset.length));
    }
    passwordInput.value = password;
}
function copyPassword() {
    passwordInput.select();
    document.execCommand('copy');
    showCopyMessage();
}
function showCopyMessage() {
    copyMessage.style.opacity = '1';
    setTimeout(() => {
        copyMessage.style.opacity = '0';
    }, 2000);
}
lengthSlider.addEventListener('input', () => {
    updateLength();
    generatePassword();
});
passwordInput.addEventListener('click', function() {
    passwordInput.select();
    document.execCommand('copy');
    showCopyMessage();
});
generatePassword();
</script>

Leave the first comment