Build a Fully Customizable Password Generator in JavaScript

A step-by-step explanation of the HTML, CSS, and especially the JavaScript logic behind this tool

Password Generator in JavaScript

Password generators are one of the most common real-world JavaScript projects beginners can build.
They help you practice DOM manipulation, user input handling, condition checks, loops, and more.

In this article, we’ll walk through a complete Password Generator implementation.
We’ll break down:

  • The HTML structure
  • Key CSS styling
  • A deep dive into the JavaScript logic (the most important part!)
  • How the password is actually generated
  • Bonus: Copy-to-clipboard and password strength indicator

1. The HTML Structure

The HTML is clean and divided into logical parts:

Password input

<div class="input-box">
  <input type="text" disabled />
  <span class="material-symbols-rounded">copy_all</span>
</div>

The password is displayed here, and the copy icon triggers copy-to-clipboard.

Password length slider

<div class="pass-length">
  <div class="details">
    <label class="title">Password Length</label>
    <span></span>
  </div>
  <input type="range" min="1" max="30" value="15" step="1">
</div>

Options checkboxes

<li class="option">
  <input type="checkbox" id="uppercase">
  <label for="uppercase">Uppercase (A–Z)</label>
</li>

Generate button

<button class="generate-btn">Generate Password</button>

That’s all you really need for the UI.
Everything else happens inside JavaScript.

2. Important CSS

The CSS focuses on:

  • Centering the layout
  • Styling the card
  • Styling slider, checkboxes and indicators
  • Adding colors to show password strength:
  • Red = Weak
  • Yellow = Medium
  • Blue = Strong

The CSS is clean, responsive, and uses box-shadow, border-radius, and Google Fonts.

3. JavaScript — How the Password Gets Generated

Now let’s focus on the part that really matters: the logic.

First, we select the DOM elements:

const lengthSlider = document.querySelector(".pass-length input"),
options = document.querySelectorAll(".option input"),
copyIcon = document.querySelector(".input-box span"),
passwordInput = document.querySelector(".input-box input"),
passIndicator = document.querySelector(".pass-indicator"),
generateBtn = document.querySelector(".generate-btn");

We also define available characters:

const characters = {
  lowercase: "abcdefghijklmnopqrstuvwxyz",
  uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  numbers: "0123456789",
  symbols: "^!$%&|[](){}:;.,*+-#@<>~"
};

This is the most important function:

const generatePassword = () => {
  let staticPassword = "",
      randomPassword = "",
      excludeDuplicate = false,
      passLength = lengthSlider.value;

Step 1 → Build the allowed characters list

We scan each checkbox:

options.forEach(option => {
  if(option.checked) {
    if(option.id !== "exc-duplicate" && option.id !== "spaces") {
      staticPassword += characters[option.id];
    } else if(option.id === "spaces") {
      staticPassword += `  ${staticPassword}  `;
    } else {
      excludeDuplicate = true;
    }
  }
});

If “uppercase” is checked → add “ABCDEFGHIJKLMNOPQRSTUVWXYZ”
If “numbers” is checked → add “0123456789”
If “spaces” is checked → add spaces
If “exclude duplicates” is checked → enable filtering

Step 2 → Generate random characters

for (let i = 0; i < passLength; i++) {
  let randomChar = staticPassword[Math.floor(Math.random() * staticPassword.length)];

This line chooses one character at random.

Step 3 → Handle duplicate characters

if(excludeDuplicate) {
  !randomPassword.includes(randomChar) || randomChar == " " 
    ? randomPassword += randomChar 
    : i--;
} else {
  randomPassword += randomChar;
}

If duplicates are allowed → just add the char
If duplicates should be avoided → check before adding
If the character already exists → retry (i–)

Step 4 → Display the password

passwordInput.value = randomPassword;

And that’s it!

5. Password Strength Indicator

passIndicator.id =
  lengthSlider.value <= 8 ? "weak" :
  lengthSlider.value <= 16 ? "medium" : "strong";

This dynamically updates the strength bar based on password length.

6. Copy-to-Clipboard Feature

const copyPassword = () => {
  navigator.clipboard.writeText(passwordInput.value);
  copyIcon.innerText = "check";
  copyIcon.style.color = "#4285F4";
  setTimeout(() => {
    copyIcon.innerText = "copy_all";
    copyIcon.style.color = "#707070";
  }, 1500);
};

Simple and clean:

  • Copies text into clipboard
  • Shows checkmark for 1.5 seconds
  • Reverts to copy icon

7. Updating the Slider in Real Time

const updateSlider = () => {
  document.querySelector(".pass-length span").innerText = lengthSlider.value;
  generatePassword();
  upadatePassIndicator();
};

So when you move the slider:

  • Password length updates live
  • A new password is generated automatically
  • Strength indicator updates

8. Event Listeners

copyIcon.addEventListener("click", copyPassword);
lengthSlider.addEventListener("input", updateSlider);
generateBtn.addEventListener("click", generatePassword);

Simple and straightforward.

Conclusion

This Password Generator is a great project for learning:

  • DOM selection
  • Event handling
  • Condition checks
  • Loops
  • Dynamic UI updates
  • Copy-to-clipboard
  • Password strength logic

If you’re learning JavaScript, this project hits all the fundamentals in a clean, practical way.

Want the Full Source Code?

For the full project with HTML, CSS, JS, and improvements, check the repository here:

👉 View the GitHub Repository

Happy coding!!

Build a Fully Customizable Password Generator in JavaScript was originally published in Javarevisited on Medium, where people are continuing the conversation by highlighting and responding to this story.

This post first appeared on Read More

Related Posts