I wrote a very very simple password generator.
Page is simple html+css+js.
No library, 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>