🔐 Create a Random Password Generator using JavaScript

In today's digital world, using strong and unique passwords is very important to protect your online accounts. In this tutorial, we’ll build a random password generator using JavaScript. This will help you generate secure passwords with just one click!

Whether you’re a beginner or brushing up your JavaScript skills, this simple project will help you understand core concepts like arrays, functions, event handling, and randomization.

✅ What We’ll Build

A web app that:

Lets users choose password length
Optionally includes uppercase letters, lowercase letters, numbers, and symbols
Generates a secure, random password when a button is clicked

🧱 Step-by-Step Guide

1. 🖼️ Create the HTML Structure

Let’s start with a basic layout:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Random Password Generator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Password Generator</h1>

    <label>Password Length:
      <input type="number" id="length" min="4" max="32" value="12">
    </label>

    <label><input type="checkbox" id="uppercase" checked> Include Uppercase Letters</label>
    <label><input type="checkbox" id="lowercase" checked> Include Lowercase Letters</label>
    <label><input type="checkbox" id="numbers" checked> Include Numbers</label>
    <label><input type="checkbox" id="symbols" checked> Include Symbols</label>

    <button onclick="generatePassword()">Generate Password</button>

    <input type="text" id="password" readonly placeholder="Your Password Will Appear Here">
  </div>

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

What it does:

Has options to select password length and types of characters.
A button to generate the password.
An input box to display the result.

2. 🎨 Add CSS for Styling (Optional but Recommended)

/* style.css */
body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  width: 300px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

label {
  display: block;
  margin: 10px 0;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-top: 15px;
  font-size: 16px;
}

button {
  width: 100%;
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  margin-top: 15px;
  cursor: pointer;
  font-size: 16px;
}

3. 🧠 JavaScript Logic (Main Functionality)

// script.js

function generatePassword() {
  const length = document.getElementById('length').value;
  const includeUpper = document.getElementById('uppercase').checked;
  const includeLower = document.getElementById('lowercase').checked;
  const includeNumbers = document.getElementById('numbers').checked;
  const includeSymbols = document.getElementById('symbols').checked;

  const upperCaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const lowerCaseChars = "abcdefghijklmnopqrstuvwxyz";
  const numberChars = "0123456789";
  const symbolChars = "!@#$%^&*()_+[]{}<>?/";

  let allChars = "";
  let password = "";

  // Combine selected character sets
  if (includeUpper) allChars += upperCaseChars;
  if (includeLower) allChars += lowerCaseChars;
  if (includeNumbers) allChars += numberChars;
  if (includeSymbols) allChars += symbolChars;

  if (allChars === "") {
    alert("Please select at least one option!");
    return;
  }

  // Create the password
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * allChars.length);
    password += allChars[randomIndex];
  }

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

🧾 Code Explanation (Step by Step)

Step 1: Get User Input

This gets the number of characters the user wants in the password.

Step 2: Check Which Options Are Selected

Checks whether the checkbox for uppercase letters is ticked.

Step 3: Define Character Sets

These strings are the sources of characters for your password.

Step 4: Build a Pool of All Allowed Characters

If the user has selected uppercase, it adds those characters to the pool.

Step 5: Generate Random Characters

Selects random characters one by one from the pool and adds them to the password.

Step 6: Display the Password

Puts the generated password into the text box.

💡 Final Result

Once everything is set up, open your HTML file in a browser. You’ll see a neat password generator interface where you can:

Choose the length of the password
Select what types of characters to include
Click a button and instantly get a secure, random password!

🎁 Bonus Tip

You can even add a “Copy to Clipboard” button using:

📌 Conclusion

You’ve just created a fully functional random password generator using just HTML, CSS, and JavaScript! This is a perfect beginner project to improve your web development skills and understand how real-world apps work.

Keep experimenting by adding more features like:

Strength indicator
Auto copy button
Dark mode switch

Secure Password Maker Using JavaScript with Simple Code Guide

Follow us on