Submitted over 1 year ago
Password Generator w/ Next.js 13 & TailwindCSS
@Jschles1
Design comparison
SolutionDesign
Solution retrospective
I'm unsure if there is a more optimal way to implement the SVG images. On previous challenges I utilized Next.js' next/image package to implement SVG images as recommended per their documentation. However, due to the SVGs needing to change the fill color based on hover or focus state, I was unable to utilize that package. Instead, I resorted to putting the SVG tags directly inside the JSX and added the hover and focus styles directly via CSS.
Community feedback
- @Jschles1Posted over 1 year ago
Some additional notes to add:
- Made "Generate" button disabled if both uppercase and lowercase checkboxes are unchecked. Didn't make much sense to allow the user to generate a password without either of those options selected. I'm assuming a strong password is impossible to generate using only numbers and symbols.
- Made the character length slider min value 8, and the max value 20.
- Had to change some padding/height values provided by the figma design to more closely match the official design.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord