Creating a Secure Password Generator with HTML, CSS, and JavaScript

by
Tiempo de lectura: 2 minutos

In this tutorial, we will learn how to build a secure password generator that will generate random and strong passwords to enhance security for your online accounts.

Required Tools: A text editor, a web browser, and basic knowledge of HTML, CSS, and JavaScript.

Step 1: Set Up the HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure Password Generator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Secure Password Generator</h1>
    </header>
    <main>
        <div class="password-container">
            <input type="text" id="password" readonly>
            <button id="generate-button">Generate Password</button>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

Step 2: Style with 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;
}

Step 3: Add JavaScript Logic

Create a “script.js” file for the password generator’s logic:

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

generateButton.addEventListener('click', () => {
    const password = generatePassword(12); // Change 12 to desired length
    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;
}

Step 4: Test Your Password Generator!

Open the HTML file in your browser and verify that the password generator works correctly.html
Copy code
Open the HTML file in your browser and verify that the password generator works correctly. When you click the "Generate Password" button, you should see a random password in the input field.

And that’s it! You have created a secure password generator using HTML, CSS, and JavaScript. You can further customize it or add additional features, such as the ability to copy the password to the clipboard. This tutorial can be very useful for people concerned about online security.

Post Views: 5

Leave a Comment