Generador de contraseñas JavaScript
JavaScript se ha vuelto muy popular recientemente como lenguaje de secuencias de comandos para el desarrollo web. Hay numerosas cosas o proyectos que podemos hacer usando JavaScript.
Uno de los proyectos que podemos implementar usando JavaScript es un generador de contraseñas aleatorias. A través de este artículo, aprenderá cómo implementar un generador de contraseñas aleatorias usando JavaScript con la ayuda de HTML y CSS.
Generador de contraseñas JavaScript
El sistema que vamos a implementar nos da una contraseña aleatoria. Contiene 12 caracteres de todos los caracteres en MAYÚSCULAS y minúsculas, números y símbolos.
Mostrará contraseñas aleatorias cada vez que hagamos clic en el botón generar.
Primero, diseñaremos una página web simple usando HTML y CSS para este tutorial. Dado que estamos creando un generador de contraseñas, debe ser más atractivo para el usuario.
Luego crearemos un archivo JavaScript para activar el generador de contraseñas. Puede crear fácilmente un generador de contraseñas aleatorias siguiendo los pasos a continuación.
Agregar un encabezado y un párrafo
Como primer paso, agregaremos un encabezado y un pequeño párrafo que describa la página web.
Código:
<div class="headings">
<h1>Password Generator</h1>
<p>This is a password generator where you can generate random passwords</p>
</div>
Ahora podemos agregar algunos estilos al encabezado (h1) y al párrafo (p) en el archivo style.css.
Código:
body{
background-color: beige;
align-content: center;
justify-content: center;
display: block;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.headings{
text-align: center;
}
.headings p{
margin-bottom: 40px;
font-size: 20px;
}
La salida debería verse así:
Agregue un cuadro de entrada para mostrar la contraseña aleatoria
Hasta ahora, hemos agregado un encabezado y un pequeño párrafo a nuestra página web que describe lo que ofrece esta página web. Ahora agregaremos un cuadro de entrada donde se mostrará la contraseña.
Primero, agregue un cuadro de entrada usando la etiqueta input.
<input id="showPSWD" class="inputbox" type="text" placeholder="A random password" readonly>
Aquí hemos declarado el ID del cuadro de entrada como lo usaremos para el método getElementByID() en el futuro. Además, hemos hecho que este cuadro de entrada sea de solo lectura ya que no estamos modificando el contenido (la contraseña aleatoria) en el cuadro de entrada.
Crear un Botón para Generar la Contraseña
Ahora vamos a crear el botón para generar la contraseña al hacer clic.
<button onclick="generatePSWD()">Generate</button>
Aquí estamos invocando la función generatePSWD() al hacer clic en el botón. generatePSWD() es la función que usamos para activar la generación de la contraseña y mostrarla en el cuadro de entrada.
Ahora diseñemos nuestro cuadro de entrada y botón usando CSS.
.boxShape{
width: 25%;
margin: auto;
text-align: center;
}
.inputbox{
font-size: 15px;
padding: 5px;
margin-right: 5px;
}
button{
background-color: blue;
color: white;
border-radius: 6px;
border-width: 0px;
padding: 5px 20px;
margin-top: 10px;
font-size: 15px;
}
button:hover{
cursor: pointer;
}
Ahora la base para el generador de contraseñas se ha creado utilizando HTML y CSS. Los códigos HTML y CSS completos se muestran a continuación.
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/style.css">
<title>Password Generator</title>
</head>
<body>
<div class="headings">
<h1>Password Generator</h1>
<p>This is a password generator where you can generate random passwords</p>
</div>
<div class="boxShape">
<input id="showPSWD" class="inputbox" type="text" placeholder="A random password" readonly>
<button onclick="generatePSWD()">Generate</button>
</div>
<script src="/activation.js"></script>
</body>
</html>
Código CSS:
body{
background-color: beige;
align-content: center;
justify-content: center;
display: block;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.headings{
text-align: center;
}
.headings p{
margin-bottom: 40px;
font-size: 20px;
}
.boxShape{
width: 25%;
margin: auto;
text-align: center;
}
.inputbox{
font-size: 15px;
padding: 5px;
margin-right: 5px;
}
button{
background-color: blue;
color: white;
border-radius: 6px;
border-width: 0px;
padding: 5px 20px;
margin-top: 10px;
font-size: 15px;
}
button:hover{
cursor: pointer;
}
Ahora nuestra página web debería verse así:
Activar el Generador de Contraseñas Usando JavaScript
Para ello, vamos a crear una variable y asignarla al ID de entrada: showPSWD utilizando el método getElementByID().
let pswd = document.getElementById('showPSWD');
Luego creamos una función JavaScript llamada generatePSWD(). Dentro de la función, declaramos tres variables: randPSWD, characters y lenOfPSWD.
randPSWD es una cadena vacía donde los caracteres seleccionados al azar se almacenarán y mostrarán en el cuadro de entrada.
lenOfPSWD contiene 12 como la longitud de una contraseña aleatoria. También puede cambiar la longitud a su favor.
Todos los caracteres, números y símbolos se almacenarán en la variable caracteres. Se seleccionarán al azar para crear las contraseñas.
function generatePSWD() {
let randPSWD = '';
let lenOfPSWD = 12;
let characters =
'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()';
Ahora podemos usar un bucle for para generar una contraseña aleatoria.
for (let i = 0; i < lenOfPSWD; i++) {
let randChar = Math.floor(Math.random() * characters.length);
randPSWD += characters.substring(randChar, randChar + 1);
}
Aquí hemos usado Math.random para seleccionar un carácter aleatorio de la cadena de caracteres. randChar es el carácter seleccionado al azar. randChar en cada almacén de iteraciones en randPSWD.
Finalmente, la cadena randPSWD se puede asignar como el valor del método getElementByID() para que se muestre en el cuadro de entrada.
document.getElementById('showPSWD').value = randPSWD;
A continuación se muestra el código JavaScript completo:
let pswd = document.getElementById('showPSWD');
function generatePSWD() {
let randPSWD = "";
let lenOfPSWD = 12;
let characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()";
for (let i = 0; i < lenOfPSWD; i++) {
let randChar = Math.floor(Math.random() * characters.length);
randPSWD += characters.substring(randChar, randChar + 1);
}
document.getElementById("showPSWD").value = randPSWD;
}
Se muestra una contraseña aleatoria en el cuadro de entrada cuando hacemos clic en el botón. Puede hacer clic en el botón una y otra vez para crear contraseñas aleatorias.
Producción:
Conclusión
Acabamos de ver un tutorial en el que construimos un generador de contraseñas aleatorias usando JavaScript con HTML y CSS. Hay más métodos diferentes para lograr esto, pero este método es otra manera fácil de crear un generador de contraseñas aleatorias.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.