Skip to content
Submitted 11 months ago

Password Generator

ikitamalarose•420
@ikitamalarose
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?

I am proud to have been able to customise the slider as well the copy clipboard option. This project seemed easy at first glance but after starting i learned a lot. It was great :)

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

I had trouble realising the slider but after several searches i was able to do it. I use tactile events touchstart and mousedown etc....

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

I would like to know how yo change the colour of a SVG because when i target it with CSS it doesn't work. That way i could add the options hover

index.html

SVG

 .header-icon:hover {
       color: var(--almost-white);  
 }
Code

Please log in to post a comment

Log in

Community feedback

  • P
    DJ Neill•130
    @djneill

    I used React & Tailwind but I'm sure you can accomplish the same with HTML & CSS. Instead of using an image tag for the check mark put the SVG inline and remove the fill="#000". You should then be able to target it with your CSS class. Here's an example of how I did it.

    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" className="ml-2 transition-colors group-hover:fill-[#A4FFAF]" > <path d="m5.106 12 6-6-6-6-1.265 1.265 3.841 3.84H.001v1.79h7.681l-3.841 3.84z" className="fill-current" />

  • P
    Hexerse•460
    @Hexerse

    Looks great ! Though for the media queries. I think that you don't need to do so much because the app itself is not that big. Also you should use percentages instead of static values. For example width:100% will follow its container as it grows smaller !

    You could also make some of the js code like the uppercase and lowercase letters into a dictionary or objects. For easier extraction later on !

    I think the code is abit hard to read because its many small pieces of information everywhere. So I am abit confused when giving feedback. Hope this helps

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