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
1835
Andev.web
Abrir en el editor
Publica tu código
Recomendado
28 February 2023
Animación de texto con efecto Glitch
23 July 2025
Página de inicio de sesión
20 January 2025
Notificación de brindis
HTML
Copy
Andev Web
i3R&C=!Z(#BK
Copied!
Uppercase
Lowercase
Numbers
Symbols
Password Length
12
Generate Password
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); *{ margin:0; padding:0; box-sizing:border-box; } body{ background:#7BDAF3; font-family: 'poppins', sans-serif; } .container{ padding:40px; width:380px; background:#ffffff; border-radius:7px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .container .password-box{ height:45px; width:100%; border-radius:30px; background:#FFFFFF; border:1px solid grey; padding:25px; display:flex; align-items:center; } .container .password-box h3{ font-size:14px; color:grey; font-weight:400; } .container .password-box .copy-btn{ position:absolute; right:63px; color:grey; font-size:17px; cursor:pointer; } .container .checkboxes-box{ padding:1px; margin-top:15px; } .container .checkboxes-box .lowercase{ pointer-events:none; } .container .checkboxes-box div{ height:35px; width:100%; padding-left:35px; display:flex; align-items:center; } .container .checkboxes-box div span{ padding-left:20px; } .container .checkboxes-box div input{ -webkit-appearance:none; height:18px; width:18px; border:1px solid grey; border-radius:5px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .container .checkboxes-box div input::before{ content:"\f00c"; position:absolute; font-family:FontAwesome; color:white; font-size:11px; display:none; } .container .checkboxes-box div input:checked{ background:#38b3eb; border-color:#38b3eb; } .container .checkboxes-box div input:checked::before{ display:block; } .container .password-length{ padding:2px; padding-left:35px; } .container .password-length h3{ font-size:15px; color:grey; font-weight:500; margin-top:12px; } .container .password-length input{ -webkit-appearance:none; height:3px; width:70%; background:lightgrey; position:relative; top:-3px; cursor:pointer; border-radius:3px; } .container .password-length input::-webkit-slider-thumb{ -webkit-appearance:none; height:13px; width:13px; border-radius:100%; background:#38b3eb; cursor:pointer; } .container .password-length .length-value{ height:30px; width:55px; background:white; display:flex; align-items:center; justify-content:center; border-radius:3px; border:1px solid grey; position:absolute; right:55px; margin-top:-25px; } .container .generate-btn{ all:unset; height:50px; width:260px; background:#38b3eb; color:white; border-radius:30px; display:flex; align-items:center; justify-content:center; margin:auto; margin-top:30px; cursor:pointer; } .container .copy-btn span{ position:absolute; font-size:9px; top:50%; left:50%; transform:translate(-50%,-50%); display:none; margin-left:-8px; } ::selection{ background:rgb(100, 149, 237,0.8); color:white; }
JS
Copy
let passLength = document.querySelector('.password-length input'); let options = document.querySelectorAll('.checkboxes-box div input'); let generateBtn = document.querySelector('.generate-btn'); let password = document.querySelector('.password'); let copyBtn = document.querySelector('#copy-btn'); let copiedMsg = document.querySelector('.container .copy-btn span'); let copiedIcon = document.querySelector('.container .copy-btn i'); let getPassLengthValue = () => { document.querySelector('.length-value').innerHTML = passLength.value; } const characters = { uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ", lowercase: "abcdefghijklmnopqrstuvwxyz", numbers: "0123456789", symbols: "!@#$%^&*()_+~`|}{[]:;?><,./-=" }; let getPassword = () => { let strongPassword = ""; let randomPassword = ""; let passWordLength = passLength.value; options.forEach((option) => { if (option.checked) { strongPassword += characters[option.id] } }) for (let i = 0; i < passWordLength; i++) { randomPassword += strongPassword[Math.floor(Math.random() * strongPassword.length)]; } password.innerHTML = randomPassword; } let copyPassword = () => { navigator.clipboard.writeText(password.textContent); copiedIcon.style.display = 'none'; copiedMsg.style.display = 'block'; setTimeout(() => { copiedIcon.style.display = 'block'; copiedMsg.style.display = 'none'; }, 1000) } copyBtn.addEventListener('click', copyPassword); generateBtn.addEventListener('click', getPassword);