password-generator-app

Community feedback

• 

  P

  j-hogben•290

  @j-hogbenPosted 2 months ago

  Hi Jose,

  You're solution looks good, functionality seems to be working really nicely, nice work!

  I do have a suggestion for the styling:

  • I notice from your js that the whole of the range slider colour changes to green if the value is > 0. It might be worth looking at this, adding an event listener and a background linear gradient to the slider so the background colour changes depending on the slider value/progress.

  Something like this:

  const sliderProgress = '#a4ffaf';
  const sliderEmpty = '#08070b';
  
  // WHEN SLIDER VALUE CHANGES, UPDATE TRACK COLOUR
    slider_range.addEventListener('input', (event) => {
      const sliderPosition = event.target.value;
      const progress = (sliderPosition / slider_range.max) * 100;
  
      slider_range.style.background = `linear-gradient(to right, ${sliderProgress}, ${sliderProgress} ${progress}%, ${sliderEmpty} ${progress}%)`;
    }); 
  

  ...should change the background colour of the slider at each 'input' to follow your slider thumb. Hope this is helpful in some way!

  Looking good mate, keep it up!

  0