Design comparison
Solution retrospective
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.
Community feedback
- @ralphvirtucioPosted 3 months ago
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 helpful0 -
Please log in to post a comment
Log in with GitHubJoin 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