Password Generator made using Vanilla JS + Sass

This project was a lot of fun. I made a custom range slider for the first time that works in Chrome and Firefox (not sure about Safari). One interesting challenge was determining the strength of the password to be generated. The strength will update based on all the options, although the scale is completely arbitrary 😅. Making the 4-bar strength component was made simple thanks to some cool CSS selectors. All I had to do is change the data-value attribute in JavaScript and the CSS takes care of the rest.

.scale {
  &[data-value="1"] :nth-child(1) {
    --color: var(--red);
  }
  &[data-value="2"] :nth-child(-n + 2) {
    --color: var(--orange);
  }
  &[data-value="3"] :nth-child(-n + 3) {
    --color: var(--yellow);
  }
  &[data-value="4"] :nth-child(-n + 4) {
    --color: var(--green);
  }
  ...
}

Let me know if there's any bugs or improvements I could make. Thanks!