Connect the Length and Character Controls

Finish the core module by making the prepared controls react to changes.

The starter already keeps the visible length number synchronized:

lengthRange.addEventListener("input", () => {
  lengthValue.textContent = lengthRange.value;
});

Do not duplicate this listener. Instead, connect the character inputs to the generator.

1. Collect the inputs

Because the checkbox IDs match the keys in sets, derive the list instead of writing four selectors:

const characterInputs = Object.keys(sets).map((id) => $(id));

2. Regenerate on selection changes

Add one listener to each input:

characterInputs.forEach((input) => {
  input.addEventListener("change", generatePassword);
});

The generator now becomes the single place that interprets the selected options.

3. Run a focused workflow

Move the slider, select lowercase only, add numbers, turn on all four categories, then press Generate several times.

Test

Verify these combinations:

• lowercase only
• lowercase + numbers
• all four categories
• all four categories at a short length
• no category selected

Checkpoint

The core generator is interactive and stable. The UI can change length and character categories without requiring any UI or CSS changes.