Skip to content
Submitted about 1 year ago

password-generator-app

P
Hexerse•460
@Hexerse
A solution to the Password generator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Being able to create the generator. next time I want to jot down how the algorithm works more accurately before creating it.

What challenges did you encounter, and how did you overcome them?

I did not understand the steps to create a generator. So I found one online and studied it. I understand how it works through active recall .

What specific areas of your project would you like help with?

If my code is not efficient/If I forgot to do some parts up. Put it down ! I wish to learn.

Code

Please log in to post a comment

Log in

Community feedback

  • Ralph Virtucio•710
    @ralphvirtucio

    Hi Hexerse

    Great job on doing this challenge !

    These are my suggestion that you can reviewed and apply to the codebase:

    - Semantic HTML Suggestions -

    • If you want more semantic approach, you can change the <div class="generator__options"> to a <fieldset> element as this will provide a semantic HTML because the checkboxes are group as a inclusion of the password generator, you can hide the <legend> element by using a sr-only styles.

    • A semantic approach for your <h3 id="passwordLength"> is to update it to an <output> element

    - Solution to Design comparison -

    • I notice that your solution screenshot is more smaller than the design, To improve it you can replace the min-width property in your form element with a max-width and set a width base on your desire value, I also think it would make your app more responsive if you implement max-width instead of min-width.

    • If you want to style your input range, Someone at the discord community give me this article on how to create a custom input range. Feel free to check it out ☕

    -----------------------------------

    • I also notice that the ids of lowercase and uppercase checkboxes are different to the for attributes of the label which if you click the label of the lowercase and uppercase the checkboxes are not getting click.

    • I also found that you experience the overlapping of the classes in the strength indicator as I also experience it, What I did a save the previous class to a variable and then every time my ```generateFunction`` is called it iterate through all bars and remove the previous class from strength bar. I also create an dataset attribute for it to track the strength of my password.

    If you want more challenges 😅🧑‍💻 try implementing an entropy function and try Fisher Yates Method to shuffle the password to generate a more unpredictable password.

    I would also suggest to check your README, As this file is important so other developers that will check your repository will get the primary information of your project or codebase. It is a great practice to check and write a README.md file. If you want to know the benefits of it check out this article

    Overall you did great in completing this challenge

    Here have some virtual donuts🍩 and coffee ☕ while going through my feedback :)

    CODE UP 🧑‍💻🧑‍💻😊

    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