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

Responsive and reactive Password Generator App developed with Vue JS 3

matbac85 600

@matbac85

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 am most proud of successfully implementing the password strength evaluation feature in my Vue.js password generator app. Calculating password entropy and dynamically assessing password strength based on user inputs was a significant achievement.

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

One of the challenges I faced was creating a custom slider input to adjust password length dynamically. Integrating Vue.js with CSS to achieve smooth slider functionality while maintaining responsiveness was tricky. I overcame this challenge by leveraging Vue's reactivity system effectively and carefully managing CSS transitions and animations. Ensuring compatibility across different browsers and devices required thorough testing and adjustment of CSS properties for optimal performance.

Community feedback

P

@kaamiik

Posted

Congrats for doing this. I just see when uncheck all the checkboxes and generate password It produce bunch of undefined . You can add a alert() to your code to ask the user to check at least one item.

0

matbac85 600

@matbac85

Posted

@kaamiik

I hadn't noticed this problem. I'd just made sure that a check box was checked at the start, but I didn't anticipate that a user would uncheck all the check boxes.

What I did was to put a disable attribute on the button and make sure that it remained disable until at least one check box was checked.

Thank you again for your feedback.

1
P

@kaamiik

Posted

Great. This is a really good solution @matbac85

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