Password generator solution | Typescript

Community feedback

• 

  Hussein Samy•340

  @HusseinSamy

  Posted over 1 year ago

  Hello @jordanheve, 👋🏻

  Awesome job on taking the first steps towards your dream!

  I really like your submission and how you handled state of the strength meter through CSS (I didn't think in it that way when I was developing it). Though, I have some recommendations for you:

  1.You can replace this code:

  window.onload = () => {
  
      range.value = '10';
  
      checkBoxes.forEach(checkbox => checkbox.checked = false);
  } 
  

  by setting the attributes directly in the html, they should look like this:

  <input type="checkbox" name="uppercase" id="uppercase" checked /> 
  

  2.Regarding some Typescript recommendations, you can do these:

  • Define types for your variables:

   let password: HTMLSpanElement = document.querySelector('.password-txt') as HTMLSpanElement
  

  • Wrap this code inside it's own function and just call it when needed (clean code)

  form?.addEventListener('submit', generatePassword)
  range?.addEventListener('input', updateTxt)
  copyButton?.addEventListener('click', copyEvent)
  

  • Add type to the checkboxChars constant

  type CheckboxChars = {
    uppercase: string;
    lowercase: string;
    numbers: string;
    symbols: string;
  };
  
  const checkboxChars: CheckboxChars = {
    uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
    lowercase: 'abcdefghijklmnopqrstuvwxyz',
    numbers: '0123456789',
    symbols: '!@#$%^&*()',
  };
  

  Hope you find it useful!😇

  Keep up the fantastic work, and happy coding! 🚀

  14

  Marked as helpful