Password generator made in vanilla JavaScript

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

I am happy with how I made the custom slider — its thumb moves smoothly but the displayed value is always an integer. It also has magnetic endpoints: if you move the thumb near the start or end of the track, it will snap to the edge.

And if you decide to control the slider with keyboard, its step changes from any to 1 to ensure good UX.

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

I wanted to apply hover effects only on buttons that weren't disabled. This selector achieved that:

button:hover:not(:disabled) {}

I also wanted to apply hover effects only on devices that support hover. You can do that by putting all of your hover rules inside this media query:

@media (hover: hover) {}

After clicking the copy button, I wanted the "COPIED" text to appear instantly and then fade out after a short time. So I needed its opacity to go from 0 to 1 without transition but from 1 to 0 with transition. Here's how I did that:

span { // the "COPIED" text

    // other properties here

    --opacity: 0;
    --transition: none;

    opacity: var(--opacity);
    transition: var(--transition);
}

copyButton.addEventListener("click", (e) => {
    navigator.clipboard.writeText(passwordOutput.value)
    .then(() => {
        e.target.disabled = true;
        // I wanted opacity to transition only when going from 1 to 0
        // this achieves that
        copyMessage.style.setProperty("--transition", "none");
        copyMessage.style.setProperty("--opacity", 1);
        copyMessage.setAttribute("aria-hidden", "false");
        setTimeout(() => {
            copyMessage.style.setProperty("--transition", "opacity 0.2s");
            copyMessage.style.setProperty("--opacity", 0);
            copyMessage.setAttribute("aria-hidden", "true");
            e.target.disabled = false;
        }, 1500);
    })
});

On small mobile screens, the "TOO WEAK!" strength text was too wide to fit its div. Also, if you generated a long password and clicked the copy button, the "COPIED" text would overlap the password. I decided to address this by making a media query for small screens, where I removed the strength text (kept just the visual indicator) and removed the "COPIED" message completely.