WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Generador de contraseñas
2651
pan4o
Abrir en el editor
Publica tu código
Recomendado
18 December 2025
Código para insertar en el juego HTML5 de BitLife Life Simulator
23 May 2025
inicio de sesión 3d
3 November 2025
Animación de árbol de Navidad SVG con JavaScript
HTML
Copy
Password Generator
Made by pan4o
Password Generator
Password Length
Include uppercase letters
Include lowercase letters
Include numbers
Include symbols
Generate Password
CSS
Copy
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #3b3b98; color: #fff; font-family: 'Muli', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; padding: 10px; margin: 0; #credits {position: fixed; bottom: 10px; right: 10px; color: rgb(255, 255, 255); font-size: 12px; font-family: Arial, sans-serif;} } h2 { margin: 10px 0 20px; text-align: center; } .container { background-color: #23235b; box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2); padding: 20px; width: 350px; max-width: 100%; } .result-container { background-color: rgba(0, 0, 0, 0.4); display: flex; justify-content: flex-start; align-items: center; position: relative; font-size: 18px; letter-spacing: 1px; padding: 12px 10px; height: 50px; width: 100%; } .result-container #result { word-wrap: break-word; max-width: calc(100% - 40px); overflow-y: scroll; height: 100%; } #result::-webkit-scrollbar { width: 1rem; } .result-container .btn { position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; font-size: 20px; } .btn { border: none; background-color: #3b3b98; color: #fff; font-size: 16px; padding: 8px 12px; cursor: pointer; } .btn-large { display: block; width: 100%; } .setting { display: flex; justify-content: space-between; align-items: center; margin: 15px 0; }
JS
Copy
const resultEl = document.getElementById('result') const lengthEl = document.getElementById('length') const uppercaseEl = document.getElementById('uppercase') const lowercaseEl = document.getElementById('lowercase') const numbersEl = document.getElementById('numbers') const symbolsEl = document.getElementById('symbols') const generateEl = document.getElementById('generate') const clipboardEl = document.getElementById('clipboard') const randomFunc = { lower: getRandomLower, upper: getRandomUpper, number: getRandomNumber, symbol: getRandomSymbol } clipboardEl.addEventListener('click', () => { const password = resultEl.innerText; if (!password) { return; } navigator.clipboard.writeText(password); alert('Password copied to clipboard!') }) generateEl.addEventListener('click', () => { const length = +lengthEl.value const hasLower = lowercaseEl.checked const hasUpper = uppercaseEl.checked const hasNumber = numbersEl.checked const hasSymbol = symbolsEl.checked resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length) }) function generatePassword(lower, upper, number, symbol, length) { let generatedPassword = '' const typesCount = lower + upper + number + symbol const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0]) if(typesCount === 0) { return '' } for(let i = 0; i < length; i += typesCount) { typesArr.forEach(type => { const funcName = Object.keys(type)[0] generatedPassword += randomFunc[funcName]() }) } const finalPassword = generatedPassword.slice(0, length) return finalPassword } function getRandomLower() { return String.fromCharCode(Math.floor(Math.random() * 26) + 97) } function getRandomUpper() { return String.fromCharCode(Math.floor(Math.random() * 26) + 65) } function getRandomNumber() { return String.fromCharCode(Math.floor(Math.random() * 10) + 48) } function getRandomSymbol() { const symbols = '!@#$%^&*(){}[]=<>/,.' return symbols[Math.floor(Math.random() * symbols.length)] }