Password generator app using web components

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

I learned how to,

• Pass the text to the custom web components. And this was possible by adding element in the CustomCheckbox component.
• use CSS pseudo selector :nth-child to show the strength meter bars and apply colors to it. I had some idea about passing number to nth-child which selects the corresponding child of an element. However, the use of :nth-child(-n + 2) was new to me, and it was really helpful for this case.
• set internal states to the custom web components and make use of those pseudo selectors in CSS to apply different styles.
• use RegExp constructor method to match the generated password and calculate the strength.

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

I had some issue making the custom range slider.

• Adding CSS to the built in input['range'] was too time consuming and it was not looking like in the design. So, I decided to make custom range slider.
• To make it work I had to handle events like mousedown, mousemove and mouseup. - And based on the width of the slider track and screen position of the thumb, we need to calculate the left or right movement based on how much the thumb was dragged across.
• And then I calculated the percentage of the movement to set value based on the max attribute of the default range slider.
• Similar, events listener for touch enabled devices were also done using touch events like touchstart, touchmove and touchend.

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

Open for feedback