Password generator app using vanilla JS

Hi there,

General comments Pretty good approach to the challenge. The user experience is good, there's a few minor UI aspects and the logic for too weak, weak,medium and strong passwords was a little difficult to figure out as a user. The HTML and CSS are pretty solid with just a few minor aspects i can think about. The JS was pretty difficult as a challenge, and feel like there's perhaps some room for improvement in the implementation, however you managed to get the user experience correctly.

Specific feedback

UI aspects

1. On first load of the screen you don't have the placeholder present in the password box
2. The slider is default to 10 when it should be for 0
3. The checkbox's should have background of green and larger than they currently are
4. The space between the colours is a bit too close than the design
5. The copy icon when clicked should display 'COPIED' afterwards - little hard for the user to know if its successfully copied without it

HTML

1. Consider using main rather than a <div class="container-wrapper"> - more semantic.
2. Consider using BEM or another methodology for class names, however the names are not bad - plus using utilities.

CSS

1. Try to use relative units for font-sizes, padding, margins (REM) for example rather than px, better experience for responsive design.
2. The classes names too weak, weak, all have the same properties, can consolidate these into one.
3. I haven't checked all the measurements in the breakpoints, but i had to change many different properties from the switch from mobile to tablet sizes - so there's perhaps some things to considere here.

JS

1. The clipboard function looks pretty decent
2. The biggest parts to consider are the generating password and generating strength functions, there's a lot of if statements which usually is a sign there is some refactoring to do. 2.1 I suspect you've complicated logic for the strength of the password (I was pretty simple, increasing strength by adding one of the checked boxes) 2.2 Instead of using charcode, have you considered just using a string with the numbers, letters and choosing from them randomly ? The way that i did it is that i choose randomly from the checked list and then randomly again in the specific checked box characters/numbers/symbols.

Solid feedback. Thanks for taking the time to write this. The HTML & CSS points are something I'm getting used to implementing. For the JS it could have been either of the two solutions, I just picked the more interesting one for me.