Responsive Password Generator App — HTML, Plain CSS, and Vanilla JS

What are you most proud of, and what would you do differently next time?

I’m most proud of how I built this app from scratch using only HTML, CSS, and JavaScript, no libraries or frameworks. I learned how to classify password strength based on both character length and variety using checkbox logic, and I created a fully responsive design without any media queries by using CSS clamp() and custom design tokens.

What I would do differently next time is refactor my generatePassword() function to be more efficient and DRY. It works, but it's repetitive.

What challenges did you encounter, and how did you overcome them?

One of the biggest challenges I faced was syncing the UI with live user input, especially tracking checkbox states and slider values to influence the password and its strength rating. I also initially struggled with event listeners on NodeLists and misunderstood when to use () => versus passing a function reference.

To overcome these, I spent time debugging step by step with console.log(), researched how .forEach() works with checkboxes, and learned to refactor functions into smaller, manageable pieces. I also gained a clearer understanding of when values need to be updated dynamically (instead of being set once at the top).

What specific areas of your project would you like help with?

I’d appreciate feedback on the JavaScript side of this project, specifically:

• How I could refactor my generatePassword() function to be more efficient and DRY. Right now, it works, but I repeat a lot of if/else logic.

• Whether my password strength algorithm is realistic or could be improved.

• My overall use of DOM manipulation, are there ways I could make it more modular or scalable?

Any advice on structuring logic more cleanly or improving maintainability would be super helpful!