Generador de contraseñas

2,427 Andev.web

Abrir en el editor Publica tu código

Recomendado

12 August 2025

Formulario de inicio de sesión HTML con fondo de matriz

15 December 2025

Botón de luz HTML con icono y texto

19 March 2026

Huellas de monstruo (capa)

HTML

<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> 
        <link rel="stylesheet" href="style.css">
        <title>Andev Web</title>
</head>

<body>
<div class="container">
  <div class="password-box">
     <h3 class="password">i3R&C=!Z(#BK</h3> 
     <div class="copy-btn">
        <i class="fa-regular fa-copy" id="copy-btn"></i>
        <span>Copied!</span>
     </div>
  </div>    
  <div class="checkboxes-box">
    <div class="uppercase">
      <input type="checkbox" name="" id="uppercase"> 
      <span>Uppercase</span>
    </div>  
    <div class="lowercase">
       <input type="checkbox" name="" id="" checked>
       <span>Lowercase</span>
    </div>  
    <div class="numbers">
            <input type="checkbox" name="" id="numbers">
            <span>Numbers</span>
    </div> 
    <div class="symbols">
            <input type="checkbox" name="" id="symbols">
            <span>Symbols</span>
    </div>    
  </div>
  <div class="password-length">
   <h3>Password Length</h3>  
   <input type="range" min="6" max="32" value="12" oninput="getPassLengthValue()">
   <div class="length-value">12</div>
  </div>
  <button class="generate-btn">Generate Password</button>
</div>
<script src="app.js"></script>
</body>

</html>

CSS

@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;
}

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 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);