How to Create a Password Generator Using HTML, CSS, and JavaScript

Alizeh Codes February 06, 2025

 

How to Create a Password Generator Using HTML, CSS, and JavaScript

In today's digital world, having strong passwords is crucial for security. A password generator helps create complex passwords that are difficult to crack. In this blog, we'll build a simple password generator using HTML, CSS, and JavaScript.

Generate a Random Password

Project Overview

Our password generator will allow users to:

  • Generate a random password
  • Copy the generated password
  • Customize password length and character types

Step 1: HTML Structure

Create a new index.html file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Random Password Generator</title>
</head>
<body>
    <div class="container">
        <h1>Generate a<br><span>Random Password</span></h1>
        <div class="display">
            <input type="text" id="password" placeholder="Password">
            <img src="icons/copy-icon.png" onclick="copyPassword()">
        </div>
        <button onclick="createPassword()"><img src="icons/generate-iconn.png" alt="">Generate Password</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 2: Styling with CSS

Create a style.css file and add the following styles:

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
}
body{
    background: #002339;
    color: #fff;
}
.container{
    margin: 12%;
    width: 90%;
    max-width: 700px;
}
.display{
    width: 100%;
    margin-top: 50px;
    margin-bottom: 30px;
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 20px;
    border-radius: 5px;
}
.container h1{
    font-size: 45px;
    font-weight: 500;
}
.container h1 span{
    color: #019f55;
    border-bottom: 4px solid #019f55;
    padding-bottom: 7px;
}
.display img{
    width: 30px;
    cursor: pointer;
}
.display input{
    border: 0;
    outline: 0;
    font-size: 24px;
}
.container button{
    border: 0;
    outline: 0;
    background: #019f55;
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 26px;
    border-radius: 5px;
    cursor: pointer;
}
.container button img{
    width: 28px;
    margin-right: 10px;
}

Step 3: JavaScript Functionality

Create a script.js file and add the following code:

const passwordBox = document.getElementById("password");
const length = 12;

const upperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const lowerCase = "abcdefghijklmnopqrstuvwxyz";
const number = "0123456789";
const symbol = "@#$%^&*()_+~|}{[]></-=";

const allChars = upperCase + lowerCase + number + symbol;

function createPassword(){
    let password = "";
    password += upperCase[Math.floor(Math.random() * upperCase.length)];
    password += lowerCase[Math.floor(Math.random() * lowerCase.length)];
    password += number[Math.floor(Math.random() * number.length)];
    password += symbol[Math.floor(Math.random() * symbol.length)];

    while(length > password.length){
        password += allChars[Math.floor(Math.random() * allChars.length)];
    }
    passwordBox.value = password;
}

function copyPassword(){
    passwordBox.select();
    document.execCommand("copy");
}

Conclusion

With just a few lines of HTML, CSS, and JavaScript, you now have a simple and functional password generator. You can enhance it further by adding options for password length, character exclusions, or even a strength meter.

Try building this project and customize it to make it more advanced. Happy coding!

Click Here to Watch Full Tutorial

Tags:

Post a Comment

0 Comments