Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Password Generator app

P
ikethedev 260

@ikethedev

Desktop design screenshot for the Password generator app coding challenge

This is a solution for...

  • 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'm proud to have successfully implemented JavaScript in my project. While I've focused heavily on DOM updates, I've realized the importance of visually appealing CSS. For my next project, I plan to prioritize both clean JavaScript and pixel-perfect CSS design.

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

My biggest challenge was styling the input range and I overcame that challenge with a lot of Googling and Youtube videos!

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

I would love to have help with using the Figma files. I do not understand how to use the information provided to get width and height from the files provided.

Community feedback

P

@AssSam7

Posted

Good work pal!

A few things to improve upon,

  1. The checkbox looks distorted in the checked state. The tick gets translated to the bottom right and also is not visible. (Sorry unable to share the screenshot here)
  2. The responsiveness could be improved, as soon the breakpoint is hit for the tablet instead of the center the container moves to the top of the page where as per the design it should be at the center both vertically and horizontally). It might be because of the width of the container.

Marked as helpful

0
P
DJ Neill 130

@djneill

Posted

If you double-click the element that you want to know the size of, for example, the input box that displays the password. On the right-hand side, it will have a 'w' for width and 'h' for height, the numbers displayed are the size in pixels. I can't share a screenshot here but if you look at the below link a similar question was asked in the Figma "ask the community" forum.

Figma support forum, unit measurement

Marked as helpful

0

P
ikethedev 260

@ikethedev

Posted

@djneill appreciate this man!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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