Skip to content
Submitted almost 2 years ago

Password Generator w/ Next.js 13 & TailwindCSS

next, react, tailwind-css
John Schlesinger•280
@Jschles1
A solution to the Password generator app challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • John Schlesinger•280
    @Jschles1

    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.

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