I want to implement a color code for the different character types for my password generator to make it easier to tell which type of character has been used to improve UX. I am not sure how to go about it. I was originally thinking of setting conditionals based on the ascii number of the character and then change the color attribute, but honestly I am not sure how to implement that at all. I want it to be functionally similar to passwatch’s color code. Any tips or advice on where to start to implement something like this would be much appreciated
1 Like
I admittedly have not looked over your whole implementation, but my first thought is the use of Regex to match Uppercase, lowercase, special chars, numbers, etc. to determine color. My second thought is that each letter might have to be contained as a span . My third thought is that react is maybe perfect for this type of procedural-generated-multi-color letter if you think of each letter as a component that returns a decorated letter.
My fourth thought is that this becomes complicated when giving your own input (assuming that functionality will remain in the final product).
1 Like
Thank you, these are excellent frames of thought. I did not consider how complicated it could get to implement this feature and still keep the user input. I may end up keeping it as it is if I am unable to do it for both. I will try out each of these to see which I am able to do the best / most efficient. I like the regex option the most, I think I would likely have to do away with the text input and replace it with a span if I went that direction like you alluded to. Thank you again, awesome suggestions and insight!
@Cassius28
I was playing around with this idea since I had some time to flesh it out. Here is a codepen that demonstrates it. I copied your method of generating characters. Sorry it’s not in React — the principles still apply.
1 Like
This is perfect, thank you for sharing this with me. I will study your approach and implement it in react
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.