How to Make a Password Generator using JavaScript?

Creating a password generator is a great project for beginners and intermediate developers alike. In this guide, we’ll walk you through how to create one using JavaScript, HTML, and a little bit of CSS.

Steps to Create a Password Generator

Create the HTML Structure: First, we'll create a simple UI with input fields and a button.
Write the JavaScript Logic: The password generator will require generating random characters from different sets (uppercase, lowercase, digits, and symbols).
Style the UI with CSS: Lastly, we’ll add some simple styling to the generator.

Complete Code Example

Step 1: HTML Structure

We'll create the basic HTML layout with an input field to display the password, and buttons to generate and copy the password:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enhanced Password Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f4f4f4;
    }
    .container {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      width: 300px;
    }
    input, select {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      margin-bottom: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    button {
      margin: 2px;
      padding: 10px;
      font-size: 16px;
      border: none;
      background-color: #28a745;
      color: white;
      cursor: pointer;
      width: 100%;
      border-radius: 5px;
    }
    button:hover {
      background-color: #218838;
    }
    .options {
      margin-bottom: 10px;
    }
    label {
      font-size: 14px;
      display: block;
      margin-bottom: 5px;
    }
    .strength {
      margin: 10px 0;
    }
    .copied {
      color: green;
      display: none;
      font-size: 14px;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Password Generator</h2>
  <input type="text" id="password" placeholder="Generated Password" readonly>

  <label for="length">Password Length</label>
  <select id="length">
    <option value="8">8</option>
    <option value="12" selected>12</option>
    <option value="16">16</option>
    <option value="20">20</option>
  </select>

  <div class="options">
    <label><input type="checkbox" id="lowercase" checked> Include Lowercase</label>
    <label><input type="checkbox" id="uppercase" checked> Include Uppercase</label>
    <label><input type="checkbox" id="numbers" checked> Include Numbers</label>
    <label><input type="checkbox" id="special" checked> Include Special Characters</label>
  </div>

  <button onclick="generatePassword()">Generate Password</button>
  <button onclick="copyPassword()">Copy Password</button>
  <div id="copiedMessage" class="copied">Password copied to clipboard</div>

  <div class="strength" id="strengthDisplay">Strength: </div>
</div>

<script>
  function generatePassword() {
    const length = parseInt(document.getElementById("length").value);
    const includeLowercase = document.getElementById("lowercase").checked;
    const includeUppercase = document.getElementById("uppercase").checked;
    const includeNumbers = document.getElementById("numbers").checked;
    const includeSpecial = document.getElementById("special").checked;

    let charset = "";
    if (includeLowercase) charset += "abcdefghijklmnopqrstuvwxyz";
    if (includeUppercase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    if (includeNumbers) charset += "0123456789";
    if (includeSpecial) charset += "!@#$%^&*()_+";

    if (charset === "") {
      alert("Please select at least one character type.");
      return;
    }

    let password = "";
    for (let i = 0; i < length; i++) {
      const randomIndex = Math.floor(Math.random() * charset.length);
      password += charset[randomIndex];
    }

    document.getElementById("password").value = password;
    updateStrength(password);
  }

  function copyPassword() {
    const passwordField = document.getElementById("password");
    if (!passwordField.value) {
      alert("No password generated to copy.");
      return;
    }

    passwordField.select();
    passwordField.setSelectionRange(0, 99999); // For mobile devices
    navigator.clipboard.writeText(passwordField.value);

    document.getElementById("copiedMessage").style.display = "block";
    setTimeout(() => {
      document.getElementById("copiedMessage").style.display = "none";
    }, 2000);
  }

  function updateStrength(password) {
    const strengthDisplay = document.getElementById("strengthDisplay");
    let strength = 0;

    if (/[a-z]/.test(password)) strength++;
    if (/[A-Z]/.test(password)) strength++;
    if (/[0-9]/.test(password)) strength++;
    if (/[^a-zA-Z0-9]/.test(password)) strength++;

    let strengthText = "Weak";
    if (strength === 2) strengthText = "Medium";
    if (strength === 3) strengthText = "Strong";
    if (strength === 4) strengthText = "Very Strong";

    strengthDisplay.textContent = "Strength: " + strengthText;
  }
</script>

</body>
</html>

Live Preview

Step 2: JavaScript Logic

The JavaScript code handles the core functionality of generating the password. The generatePassword() function defines the charset and usesMath.random()to generate random characters from the set. It then outputs the result to the text input field.

Step 3: CSS Styling

The CSS code ensures that the password generator looks clean and responsive. We've added some simple styling to center the container and style the buttons and input fields.

Try It Yourself!

Copy the full code above, paste it into an HTML file, and open it in your browser to see the password generator in action. You can tweak the password length or charset to customize the output to your liking!

By following these steps, you can create a simple yet functional password generator with just HTML, CSS, and JavaScript. Feel free to experiment with additional features like toggling character types (e.g., uppercase only, or no symbols), password length selectors, and more!

Next: An In-Depth Analysis of Read-Only Memory (ROM): Understanding Its Immutable Nature and Role in System Security

/ @kheersagar / How to Make a Password Generator using JavaScript?

How to Make a Password Generator using JavaScript?

Steps to Create a Password Generator

Complete Code Example

Step 1: HTML Structure

Step 2: JavaScript Logic

Step 3: CSS Styling

Try It Yourself!

You may also like

Creating an Accordion with HTML, CSS, and JavaScript

Creating a Responsive Timeline with HTML, CSS, and JavaScript

Building a responsive accordion with HTML, CSS, and JavaScript