Skip to content
OverviewSolutions
4
Comments
6
Minh Le
@ledminh

All comments

  • Paweł•1,030
    @Pawel-GnatSubmitted almost 2 years ago

    Coding time: 16,5 hours.

    This was really a tough challenge as for intermediate level. I tried to complete it like a month before, but I found to not being ready to code it properly. Even today I left it working almost as should be, but it's definitely not DRY. I used too many if statements (I know I should change it at least to switch) and all my JS code needs a solid refactoring. I know how to tidy there on my own, but I just want to move further. I'm really exhausted by this challenge, lol. There was many DOM manipulations and logic thinking with elements.

    Readme says you need a strong undestanding of JS and that's a true. Doing it with vanilla JS approach is a torture :)

    Interactive comments section (vanilla JS)

    1
    Minh Le•200
    @ledminhPosted almost 2 years ago

    I always appreciate people who try to code using only vanilla JS. I used it once, coding a small game. It was time-consuming, but I learned a lot from that. Anyway, check out my solution for this challenge. It was coded in NextJS, but I decided to do one step further by making it become a full stack app with mongoDB for database and nextauth for authentication. I guess one advantage of using framework is that it allows you to do more and make your app look more like a production-level app.

    0
  • Minh Le•200
    @ledminhPosted about 2 years ago

    I guess it's because Safari does not support linear-gradient. This article might help.

    Or use ms-fill-lower for the left color and ms-fill-upper for the right color in the CSS, like what I did in my solution.

    Something like this:

    input[type=range]::-ms-fill-lower {
        background: base.$color5;
        
}

input[type=range]::-ms-fill-upper {
        background: base.$color4;
        
}

    If you try, please tell me which one works (or neither of them). I really need to know.

    Marked as helpful
    0
  • Minh Le•200
    @ledminhPosted about 2 years ago

    Hello jyoung0930,

    I love that you safeguarded your app from error by requiring character length must be greater than 5. Here is my idea for improvement, you can count how many options are checked and set it to be the minimum value character length must have.

    1
  • Minh Le•200
    @ledminhPosted about 2 years ago

    I really love the fact that you build this project on vanilla JS. It is the best way to learn javascript. I tried it once on this personal project, it was a very fulfilling experience.

    And here are some suggestions for improvement. First, the Generate button should have another outlook when it is disabled. Second, I see that sometimes the generated password does not satisfy all of the requirements. I checked on lowercase, uppercase, and number but the password only contains uppercase and number. Third, to satisfy all rules, password's length should be equal or greater than the number of rules.

    I hope you find it helpful.

    Marked as helpful
    0
  • Wesley•330
    @wesleyjacobySubmitted about 2 years ago

    This challenge was way above my current skill level (newbie), but the app just looked really cool and I couldn't resist trying it out. I thought it would be a great way to practice working with JavaScript arrays, but I found the CSS way more challenging!

    I learnt that not all browsers are created equal!

    Styling the slider was a tremendous headache, especially getting the background behind the thumb a different color to the background ahead of the thumb.

    I had to admit defeat with the arrow, though. I could get it in place, but I just couldn't figure out how to make it turn green. I used the filter property for the copy icon, but I don't think it would work for the arrow? So I went the straightforward route and used an HTML arrow. I think I prefer it to the arrow in the design document, though.

    For the password strength indicator, I used the zxcvbn library, which made life much easier.

    Any tips to improve are always welcomed!

    Password Generator App using HTML, CSS and JS

    1
    Minh Le•200
    @ledminhPosted about 2 years ago

    Yes, I feel your pain. Not all browsers are created equal. I spent a whole day just researching how to make the background behind the thumb green. Then, I figured out that not all browsers are created equal in terms of CSS but they are the same in terms of javascript, especially when you use webpack. So, the best way to tackle this problem is to use linear-gradient to set the background to 50% green and 50% black initially in CSS. Then, use javascript to change the percentage number when the slider's value changes.

    About the arrow, you can use this tool: https://react-svgr.com/playground/ to transform the svg image of the arrow to React element then change its "fill" property to green.

    Marked as helpful
    0
  • Austin•330
    @waustin45Submitted about 2 years ago

    Had fun with this project. JS is getting a bit easier to work with. I am getting better at troubleshooting and researching for answers through google. The only problem was styling the checkboxes and slider bar. I could not figure out how to make them green. So, if you have any input I would greatly appreciate it!

    Used React and CSS to complete project

    3
    Minh Le•200
    @ledminhPosted about 2 years ago

    Making the checkboxes green is simple. I used the pseudo-class ::before, set the position to absolute with left and top equal 0, height and width equal 100%, then set its background-color to green. To make the check-symbol image displayed when checked, I used the pseudo-class ::after in the similar way but set its background to be the check-symbol image when checked.

    Making the slider half-green-half-black is more difficult. After spending a day doing research on Stack Overflow, I figured the easiest solution is to use linear-gradient on background to make it 50% green and 50% black initially, then using javascript to change the percentage value when the input's value changes.

    Marked as helpful
    2