Used React and CSS to complete project

Community feedback

• 

  Minh Le•200

  @ledminh

  Posted almost 3 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.

  20

  Marked as helpful
• 

  Tobias Fuchs•40

  @ToFu96

  Posted almost 3 years ago

  What you can consider using is "accent-color". It doesn't really solve the problem when it comes to custom designs, but it is a quick hack to adjust the colors to the other content.

  .your_css_selector {
      accent-color: hsl(127deg, 100%, 82%);
  }
  

  That looks good enough for this project.

  Cheers!

  PS: Your copy to clipboard doesn't work for me, so I guess you didn't implement it? Also, if you want an additional (JS) challenge, you can try to come up with your own "forumla"/algorithm to compute password safety. For that you probably should research a bit what makes a password secure. In my case, all my passwords with a length of 8 are considered insecure because they are easy to crack via brute force attacks. I increased my max. length of passwords to 30 and so I obviously consider all passwords of that lengths secure, even if the password only uses numbers. (I used word-break: break-all to break it to the next line for long passwords.)

  If you want to go a step further you could even try to let the user decide which special characters they allow in the generation - I'm probably going to attempt that myself pretty soon. My idea is that a popup or something similar opens and the user can select which special characters they want to be used during password generation.

  I also noticed that your algorithm always uses lowercase characters to create the password, even when not selected. That's something that should be changed. If no options are selected, I guess it's fine to assume lowercase characters as a default setting.

  11

  Marked as helpful
• 

  P

  John Mirage•1,590

  @john-mirage

  Posted almost 3 years ago

  Hello,

  I have some articles about styling the range input.

  You have two choices:

  • Styling the range input itself.
    • Styling Cross-Browser Compatible Range Inputs with CSS
    • Building a Settings component (i recommend this one because of the progress bar trick for chrome)
  • Creating a fake range input controlled by a real hidden range input.
    • Customising Cross-Browser Range Inputs with CSS and JavaScript (i used this one for this project)

  Creating a fake range input seems to be the best option overall because you have more control and it has a better browser consistency

  10

  Marked as helpful