Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Password Generator w/ Next.js 13 & TailwindCSS

@Jschles1

Desktop design screenshot for the Password generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

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

@Jschles1

Posted

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
Discord logo

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