Build a Password Generator App with HTML CSS and JavaScript

Last Updated : 07 Mar, 2024

In this article, we will build a password generator application using HTML, CSS, and JavaScript. This application will generate strong and secure passwords based on user preferences, such as password length and character types. It aims to provide a convenient tool for users to generate random passwords that are difficult to guess and enhance their online security.

Prerequisites:

HTML
CSS
JavaScript

Approach:

Create an HTML form to capture user preferences for password generation, such as length and character types.
Use CSS to style the form and make it visually appealing.
Write JavaScript code to handle form submissions and generate passwords based on user preferences.
JavaScript generates a random password based on user-selected options (lowercase, uppercase, digits, and specials) and length. It allows copying the generated password to the clipboard.
Implement a function that generates a random password using the selected character types and lengths.
Display the generated password on the webpage for the user to see and copy.
Add event listeners to handle user interactions and trigger password generation.

Example: In this example, we are using the above-explained approach.

Javascript

// script.js 
function generate() { 
    let dictionary = ""; 
    if (document.getElementById("lowercaseCb").checked) { 
        dictionary += "qwertyuiopasdfghjklzxcvbnm"; 
    } 
    if (document.getElementById("uppercaseCb").checked) { 
        dictionary += "QWERTYUIOPASDFGHJKLZXCVBNM"; 
    } 
    if (document.getElementById("digitsCb").checked) { 
        dictionary += "1234567890"; 
    } 
    if (document.getElementById("specialsCb").checked) { 
        dictionary += "!@#$%^&*()_+-={}[];<>:"; 
    } 
    const length = document.querySelector( 
        'input[type="range"]').value; 
  
    if (length < 1 || dictionary.length === 0) { 
        return; 
    } 
  
    let password = ""; 
    for (let i = 0; i < length; i++) { 
        const pos = Math.floor(Math.random() * dictionary.length); 
        password += dictionary[pos]; 
    } 
  
    document.querySelector( 
        'input[type="text"]').value = password; 
} 
  
[ 
    ...document.querySelectorAll( 
        'input[type="checkbox"], button.generate'), 
].forEach((elem) => { 
    elem.addEventListener("click", generate); 
}); 
  
document.querySelector('input[type="range"]').addEventListener( 
    "input", (e) => { 
        document.querySelector( 
            "div.range span").innerHTML = e.target.value; 
        generate(); 
    }); 
  
document.querySelector("div.password button").addEventListener( 
    "click", () => { 
        const pass = document.querySelector('input[type="text"]').value; 
        navigator.clipboard.writeText(pass).then(() => { 
            document.querySelector( 
                "div.password button").innerHTML = "copied!"; 
            setTimeout(() => { 
                document.querySelector( 
                    "div.password button").innerHTML = "copy"; 
            }, 1000); 
        }); 
    }); 
  
generate();

HTML

<!-- index.html  -->
<!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>Password Generator</title> 
</head> 
  
<body> 
    <h1>Password Generator</h1> 
    <div class="generator"> 
        <div class="password"> 
            <input type="text" value="test" /> 
            <button>copy</button> 
        </div> 
        <div class="range"> 
            <input type="range" min="4" 
                   max="24" value="8" /> 
            <span>8</span> 
        </div> 
        <div class="options"> 
            <div class="option"> 
                <label> 
                    <input type="checkbox" 
                           id="lowercaseCb" checked /> 
                    <span>a-z</span> 
                </label> 
            </div> 
            <div class="option"> 
                <label> 
                    <input type="checkbox" 
                           id="uppercaseCb" /> 
                    <span>A-Z</span> 
                </label> 
            </div> 
            <div class="option"> 
                <label> 
                    <input type="checkbox" 
                           id="digitsCb" /> 
                    <span>0-9</span> 
                </label> 
            </div> 
            <div class="option"> 
                <label> 
                    <input type="checkbox" 
                           id="specialsCb" /> 
                    <span>!@$#%^</span> 
                </label> 
            </div> 
        </div> 
        <button class="generate"> 
            generate 
        </button> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* style.css */
@import url( 
"https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"); 
  
body { 
    background-color: #f8f8f8; 
    color: #333; 
    font-family: "Roboto Mono", monospace; 
} 
  
.generator { 
    background-color: #f5f5f5; 
    width: 250px; 
    margin: 150px auto; 
    padding: 20px; 
    border-radius: 10px; 
} 
  
div.password { 
    display: grid; 
    grid-template-columns: auto min-content; 
    border-radius: 10px; 
    overflow: hidden; 
} 
  
div.password input { 
    padding: 7px 10px; 
    background-color: #ddd; 
    border: 0; 
    color: #333; 
} 
  
button { 
    background-color: #4caf50; 
    color: #fff; 
    text-transform: uppercase; 
    padding: 5px 15px; 
    border: 0; 
    border-radius: 10px; 
} 
  
div.password button { 
    border-radius: 0; 
} 
  
div.range { 
    margin: 10px 0; 
    display: grid; 
    grid-template-columns: 1fr min-content; 
} 
  
div.range span { 
    background-color: #ddd; 
    padding: 10px; 
    margin-left: 20px; 
    min-width: 30px; 
    text-align: center; 
    border-radius: 10px; 
} 
  
div.options { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
} 
  
div.options label { 
    display: block; 
    background-color: #ddd; 
    padding: 10px; 
    border-radius: 10px; 
    cursor: pointer; 
    font-family: sans-serif; 
} 
  
button.generate { 
    width: 100%; 
    margin-top: 10px; 
    padding: 10px; 
} 
  
h1 { 
    text-align: center; 
    color: #4caf50; 
}