@ralphvirtucio
Posted
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
