samedi 26 mars 2022

How Can I reset the Text value to an empty string after I've randomly generated a password with javascript

var generateBtn = document.querySelector("#generate");

// put our characters into seperate arrays
const uppercaseLetters = ['A', 'B', 'C', 'D', "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "X", "Y", 'Z']

const lowercaseLetters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]

const numeric = ["0", "1", "3", "4", "5", "6", "7", "8", "9"]

const specialCharacters = ["+", "-", "&&", "||", "!", "(", ")", "{", "}", "[", "]", "^",
  "~", "*", "?", ":",
]

//create an empty password array and empty generatedPassword string
let passwordArry = [];

let generatedPassword = '';

//create variables for included types


//write a function to generate the password
function writePassword() {

  //prompt to the user how many characters they want
  let passwordLength = window.prompt(`How many characters? enter between 8 & 128`);

  //if user doesnt enter a password or the input is nan
  while (!passwordLength || isNaN(passwordLength)) {
    window.alert(`this field cannot be empty & has to be an integer`);
    passwordLength = window.prompt(`How many characters? enter between 8 & 128`);
  }

  //if password length is les than 8 or more than 128, reprompt
  if (passwordLength < 8 || passwordLength > 128) {
    window.alert(`Password must be between 8 & 128 characters`);
    passwordLength = window.prompt(`How many characters? enter between 8 & 128`);
  }

  let includeUppercase;
  let includeLowercase;
  let includeNumeric;
  let includeSpecialCharacter

  //alert the user to input on every prompt

  while (!includeNumeric && !includeSpecialCharacter && !includeLowercase && !includeUppercase) {
    alert("check all")
    includeNumeric = prompt("Should include numeric character, enter yes or no").toLowerCase()
    includeSpecialCharacter = prompt("Should include special character,enter yes or no").toLowerCase()
    includeLowercase = prompt("Should include lowercase character,enter yes or no").toLowerCase()
    includeUppercase = prompt("Should include uppercase character,enter yes or no").toLowerCase()
  }

  //if user selects to include any of these characters by entering yes then we will put those characters into an array, if the users enter anything else then the program will do nothing and go to the next prompt

  if (includeNumeric === "yes") {
    passwordArry = passwordArry.concat(numeric)

  }
  if (includeLowercase === "yes") {
    passwordArry = passwordArry.concat(lowercaseLetters)

  }
  if (includeUppercase === "yes") {
    passwordArry = passwordArry.concat(uppercaseLetters)

  }
  if (includeSpecialCharacter === "yes") {
    passwordArry = passwordArry.concat(specialCharacters)

  }

  // now that we have added the types to the password array, we now loop through the array to grab random characters
  // generates a random password from the entered password length
  for (let i = 0; i < passwordLength; i++) {
    //create a variable to hold the random number , we multiply the random number by the length of the whole password array
    const randomLength = Math.floor(Math.random() * passwordArry.length)
    //the random length is a number and we use that number for the index of the password array
    generatedPassword = generatedPassword + passwordArry[randomLength];

    let passwordText = document.querySelector("#password");

    passwordText.value = generatedPassword;

  }


}

generateBtn.addEventListener('click', writePassword);
<div class="wrapper">
  <header>
    <h1>Password Generator</h1>
  </header>
  <div class="card">
    <div class="card-header">
      <h2>Generate a Password</h2>
    </div>
    <div class="card-body">
      <textarea readonly id="password" placeholder="Your Secure Password" aria-label="Generated Password"></textarea>
    </div>
    <div class="dojo">

    </div>
    <div class="card-footer">
      <button id="generate" class="btn">Generate Password</button>
    </div>
  </div>
</div>

I tried to set passwordText.value to and empty string at he beginning of the write password function but that would not work because passwordText.value is not defined until the end of the function. I also tried to create a function called PlayAgain to run the writePassword function again if the user chooses to and set the text value to an empty string but that didnt work either




Aucun commentaire:

Enregistrer un commentaire