Submitted almost 2 years ago

Responsive password generator using React, SCSS & TypeScript

Andrej Saule• 70

@ajsaule

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Password generator app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

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.

Community feedback

Chris• 410

@cbserra

Posted almost 2 years ago

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

Andrej Saule• 70

@ajsaule

Posted almost 2 years ago

Hey @cbserra,

Thanks so much for the design, it looks so good! I would like to implement the changes you made eventually, I really like how it fits the overall aesthetic of the original design more than my layout has.

Appreciate the comment and your time to mock up a redesign for me :D

Please log in to post a comment

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