CodingNic

Password Generator

Module Introduction

Password Generator 5 min read

Module Introduction

Module 2: Password Generator

This is the core build. When you enter this module, the page looks finished but cannot yet produce a proper password. We are going to make that happen without dropping a giant generator function into the file.

The build sequence

You will make the generator in five stages:

  1. Create a browser-cryptographic random helper.
  2. Choose the enabled character categories and build a pool.
  3. Guarantee that every selected category contributes at least one character.
  4. Fill the rest of the requested length and shuffle the result.
  5. Connect the slider and character cards so the generator responds to the UI.

Each stage depends on the previous one. That is intentional. If you understand the small intermediate values—selected categories, character pool, generated characters—you can debug the final generator much more easily.

What you should expect at the end

The Generate button will produce a different password on each click. The password will match the requested length, use only the selected character categories, and still work when the learner selects one, two, three, or all four categories.

Do not worry about strength, copying, history, themes, or Dice Mode yet. Those are later modules. For now, we are building a reliable core that those features can safely use.