Password generator solution | Typescript

Community feedback

• 

  Hussein Samy•340

  @HusseinSamyPosted 11 months 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! 🚀

  Marked as helpful

  1

  ---

  

  Hussein Samy•340

  @HusseinSamyPosted 11 months ago

  You can also change the initial state of the app to make it look identical to the design, it would look more professional, also pay attention to the border weight and those naunces in the design.

  0

  

  Jordan Herrera Vera•490

  @jordanhevePosted 11 months ago

  @HusseinSamy "Thank you for your feedback regarding the window.onload event. Specifically, I wanted the checkbox values to be set to false (not checked). I used that function because in my browser, I noticed that each time I restarted it, the values did not return to their default settings. However, you're right, ideally, it should be identical to the original design.

  Regarding the TypeScript recommendations, I greatly appreciate your suggestions for improving code readability and maintenance. I understand the usefulness of defining types for variables, which adds clarity to the code and helps avoid potential errors.

  Regarding organizing the code into separate functions and subsequently calling them, I find it an excellent practice to maintain a more modular and understandable codebase. This allows for better program structuring and facilitates long-term maintenance.

  I will take into consideration all your recommendations to enhance the quality and clarity of the code. Thank you again for your valuable input and advice!

  I remain attentive to any other suggestions or comments you might have!

  1

  

  Hussein Samy•340

  @HusseinSamyPosted 11 months ago

  @jordanheve Great spirit, keep up the good work! 🚀

  0

  

  Hussein Samy•340

  @HusseinSamyPosted 11 months ago

  @jordanheve Great spirit, keep up the good work! 🚀

  0