This is a solution to the Password generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Users should be able to:

• Generate a password based on the selected inclusion options
• Copy the generated password to the computer's clipboard
• See a strength rating for their generated password
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

• Color scheme is based on OS instead of only dark mode by the design

• Solution URL: Password Generator App Solution
• Live Site URL: Password Generator App

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• CSS Modules
• React - JS library
• Vite - Frontend tooling
• ESLint - JS linter
• Stylelint - CSS linter
• Jest - JS test framework

Styling a consistent cross-browser range input is not easy. It took several attempts to get a consistent baseline styling, which is nothing more than a thumb and track to a default scheme. Many weird vendor prefixed styles were unfortunately used and while a CSS only solution was possible, the solutions found across the internet were less than impressive or overly complicated. Luckily enough, firefox does have the appropriate vendor prefix to style the track and thumb appropriately however it seemed browsers utilizing webkit were left to implement their own solution. Therefore I came up with an idea to dynamically style a linear-gradient background in JS as shown below:

Updated solution using CSS only:

background: linear-gradient(to right, var(--lime-green) calc(calc(var(--range) - var(--offset)) / var(--max) * 100%), var(--black) calc(calc(var(--range) - var(--offset)) / var(--max) * 100%));

I plan to use CSS modules as my preferred solution over styled components when working with React going forward as I find it easier to read and catch mistakes. I also plan to test on various browsers to ensure functionality and accessibility is respected across all browsers.

• linear-gradient() - Good resource used when trying to understand linear gradient behavior.
• Fisher Yates Shuffle - Useful resource to implement a modern shuffle algorithm, which was used to randomize charsets in sequence generation.

• Frontend Mentor - @alexl8819