Submitted about 2 years ago

Responsive password generator using React, SCSS & TypeScript

Andrej Saule•70

@ajsaule

Preview site View code

This is a solution for...Password generator app

HTML
CSS
JS

3intermediate

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
@cbserraPosted about 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
1
Andrej Saule•70
@ajsaulePosted about 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
1

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