Password Generator

Scrimba frontend learning Path

This is a solution to scrimba frontend developer password generator solo project

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device’s screen size

  • generate password with length of fifteen characters if user doesn’t specify password length

  • generate two different passwords

  • Set password length

  • Add “copy-on-click”

  • Toggle “symbols” and “numbers” on/off

Screenshot

phone ipad Desktop

Links

My process

Built with

  • Semantic HTML5
  • CSS custom properties
  • Flexbox
  • Grid
  • Mobile-first workflow

Proud of this

This function checks if the conditions are true or false before generating the password

const generate = (generatePass) => {
  let passwordLength = "";

  if (getLength) {
    passwordLength = getLength - 1;
    if (symbolToggle.checked && numberToggle.checked) {
      for (let i = 0; i <= passwordLength; i++) {
        let randomPassword = Math.floor(Math.random() * chara.length);
        generatePass += chara.substring(randomPassword, randomPassword + 1);
      }
      // console.log("g");
      return generatePass;
    } 

This copys the password to the clipboard when clicked

function copyText(ev) {
  // console.log("hi");
  let text = ev;
  let textArea = document.createElement("textarea");
  textArea.width = "1px";
  textArea.height = "1px";
  textArea.background = "transparents";
  textArea.value = text;
  document.body.append(textArea);
  textArea.select();
  document.execCommand("copy"); //No i18n
  document.body.removeChild(textArea);
}

Continued development

Javascript and React framework

Author

GitHub

View Github