Submitted about 2 months ago

Password Generator

ikitamalarose• 310

@ikitamalarose

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Password generator app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

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);  
 }

Community feedback

DJ Neill• 130

@djneill

Posted about 2 months ago

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" />

Hexerse• 460

@Hexerse

Posted about 2 months ago

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

Please log in to post a comment

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