Nice solution!
After looking through your code for the strength score, I realise that basing it on the actual generated characters rather than simply the user inputs is how I should have done mine! I also realised I could have used the checkbox image provided like you did rather than generating a polygon clip-path...
That said, I noticed a couple things with your solution
-
There is a bug, when you generate a strong password by ticking all the options and have the length at 20, then you lower the length slider to 1 and click generate, the strength bars show 3, and the text shows "too weak"
-
The
#strength-level-text
on mobile view (375px) is quite large when "too weak" and perhaps the password is too when the length is maximised ( i usedflex-wrap
and made the font smaller)