Skip to content
Submitted over 2 years ago

Responsive password generator using React, SCSS & TypeScript

react, sass/scss, typescript
Andrej Saule•70
@ajsaule
A solution to the Password generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey everyone, I mostly followed the requirements for this challenge but:

  • I made the app generate a new password every time React re-renders instead of using the generate button.
  • Since the app re-renders when you adjust the slider or click a checkbox I think it works well without having a generate button.
  • I replaced the generate button with a time-to-crack calculator for some fun.

I would like to have a text field so users can type their password and see how long it would take to get cracked by a hacker.

If anyone has some feedback on anything, please leave me a comment.

Code

Please log in to post a comment

Log in

Community feedback

  • Chris•410
    @cbserra

    So I was feeling a little ambitious (or just avoiding my own work) and mocked up an idea for your tool. You can check it out here:

    https://codepen.io/cbserra/pen/RwyqpVW

    JS wasn't added, so just CSS design purposes:

    Figured maybe you could have a menu at the top to toggle between Password Generation and Password Analysis for a user's own password.

    I updated the sections you added to match the Strength box.

    Let me know your thoughts!

    Marked as helpful

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