Build a Password Generator App with HTML CSS and JavaScript (original) (raw)

Last Updated : 28 Apr, 2025

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

Password Generator

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; }

`

**Output: