Crear un Generador de Contraseñas Seguras con HTML, CSS y JavaScript

por
Tiempo de lectura: 2 minutos

En este tutorial, aprenderemos a construir un generador de contraseñas seguras que generará contraseñas aleatorias y fuertes para aumentar la seguridad en tus cuentas en línea.

Herramientas necesarias: Un editor de texto, un navegador web y conocimientos básicos de HTML, CSS y JavaScript.

Paso 1: Configurar la estructura HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generador de Contraseñas Seguras</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Generador de Contraseñas Seguras</h1>
    </header>
    <main>
        <div class="password-container">
            <input type="text" id="password" readonly>
            <button id="generate-button">Generar Contraseña</button>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Estilizar con CSS

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

header {
    background-color: #007BFF;
    color: #fff;
    padding: 20px 0;
}

h1 {
    font-size: 24px;
}

.password-container {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

input {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 18px;
}

button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Paso 3: Agregar la lógica de JavaScript

Crea un archivo «script.js» para la lógica del generador de contraseñas:

const generateButton = document.getElementById('generate-button');
const passwordField = document.getElementById('password');

generateButton.addEventListener('click', () => {
    const password = generatePassword(12); // Cambia 12 por la longitud deseada
    passwordField.value = password;
});

function generatePassword(length) {
    const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
    let password = "";
    
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * charset.length);
        password += charset[randomIndex];
    }
    
    return password;
}

Paso 4: ¡Prueba tu Generador de Contraseñas!

Abre el archivo HTML en tu navegador y verifica que el generador de contraseñas funcione correctamente. Al hacer clic en el botón "Generar Contraseña", deberías ver una contraseña aleatoria en el campo de entrada.

¡Y eso es todo! Has creado un generador de contraseñas seguras utilizando HTML, CSS y JavaScript. Puedes personalizarlo aún más o agregar características adicionales, como la posibilidad de copiar la contraseña al portapapeles. Este tutorial puede ser muy útil para las personas preocupadas por la seguridad en línea.
Post Views: 30

Deja un comentario