Password Generator App

Solution retrospective
I dont know the logic of password generate, so just use ChatGPT, it provide me super complex function, so i decide to break it to simple object
What specific areas of your project would you like help with?another challange for today! welcom any comment and idea to help me better ! thank you
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Basselfathy
Hi Tran,
Great work on this project! Your solution for the
slider
gradient inspired me to refactor my own implementation, as I initially built it from scratch to resolve the same issue. It was quite a challenge to handle. 😄I also noticed that you're using the SVG icons as plain code. However, on smaller screen sizes, they appear to be clipped at the bottom right. I encountered the same issue until I discovered that importing the SVG file as a mask, rather than using it as plain code, helps resolve this. This approach allows you to change the icon's color on hover or in response to other events using the
background-color
property.Here's an example of how I implemented it:
HTML:
<button type="button" id="generate-password-btn" class="generate-password-btn" aria-label="Generate a new password" > Generate <i class="arrow-icon" aria-hidden="true"></i> </button>
CSS:
.password-settings .generate-password-btn .arrow-icon { width: .875rem; height: .875rem; aspect-ratio: 1; -webkit-mask: url("../assets/images/icon-arrow-right.svg") no-repeat center; mask: url("../assets/images/icon-arrow-right.svg") no-repeat center; background-color: #18171f; } .password-settings .generate-password-btn:hover .arrow-icon { background-color: #a4ffaf; }
Marked as helpful - @CasperTheChild
Great job! A few minor CSS design corrections are needed.
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