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
2817
pan4o
Abrir en el editor
Video
Publica tu código
0
Recomendado
7 May 2025
Un código de Developer7
13 October 2024
Mis redes sociales
13 December 2025
Plantilla HTML para sitio web de portafolio holográfico
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)] }