password generator app

Community feedback

• 

  P

  Habeeb Kareem•690

  @olaide-hok

  Posted 4 months ago

  Great work here! Some areas for improvement are

  1. The checkBoxesStates array and checkBoxes event listeners contain repetitive code for handling checkbox states. A loop or a more dynamic approach can be used to handle checkbox states.

  const checkBoxes = document.querySelectorAll("input[type='checkbox']");
  const checkBoxesStates = Array.from(checkBoxes).map((el) => ({
    category: el.name,
    isChecked: false,
  }));
  
  checkBoxes.forEach((el, index) => {
    el.addEventListener("click", (event) => {
      checkBoxesStates[index].isChecked = event.target.checked;
      checkLevelStrength();
    });
  });
  

  2. Hardcoded Values: The levelStates array and checkLevelState function use hardcoded values, making the code less flexible. Use a more dynamic approach to determine the strength level.

  const strengthLevels = [
    { level: 1, state: "TOO WEAK!", class: "too-weak" },
    { level: 2, state: "WEAK", class: "weak" },
    { level: 3, state: "MEDIUM", class: "medium" },
    { level: 4, state: "STRONG", class: "strong" },
  ];
  
  function checkLevelState() {
    if (passLength < 4 || passLevel === 0) {
      passStrength = "";
      return;
    }
  
    const level = strengthLevels.find((state) => state.level === passLevel);
    passStrength = level ? level.state : "";
  }
  

  3. Lack of Comments: The code lacks comments, making it harder for others (or your future self) to understand. Add comments to explain the purpose of each function and complex logic.

  4. Accessibility Improvements: The alt attribute for the copy icon (icon-copy.svg) is generic and doesn’t describe its purpose. The alt attribute for the arrow icon (icon-arrow-right.svg) is also generic. Use descriptive alt text for icons.

  <img src="./assets/images/icon-copy.svg" alt="Copy password to clipboard" id="copy">
  <img src="./assets/images/icon-arrow-right.svg" alt="Generate password" id="generate-icon">
  

  5. Missing for Attributes in Labels: The <label> elements do not have for attributes, which explicitly associate them with their respective inputs. Add for attributes to <label> elements.

  <label for="uppercase"><input type="checkbox" id="uppercase" name="uppercase">Include Uppercase Letters</label>
  <label for="lowercase"><input type="checkbox" id="lowercase" name="lowercase">Include Lowercase Letters</label>
  <label for="numbers"><input type="checkbox" id="numbers" name="numbers">Include Numbers</label>
  <label for="symbols"><input type="checkbox" id="symbols" name="symbols">Include Symbols</label>
  

  6. Typo in "STRENGHT" <p class="strength-text">STRENGTH</p>

  00

  Marked as helpful