Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Javascript: Password Generator - I need help.

jmory

Coder
Hello, learning JavaScript for the first time and I am completely stuck at trying to figure out one of my first exercises. It is password generator. I have the HTML, CSS set up. but my javascript code just isnt working for me. Any help would be very appreciated.

The critia:
  • Once you have been redirected to the web-page, click on the "Generate Password" button
  • You will be prompted with a series of questions regarding your password criteria (note, at least one must be selected, or else an error will pop up and the prompts will restart), including:
    • The desired password length (on the condition that it is between 8 and 128 characters long)
    • Whether you want the password to contain uppercase letters
    • Whether you want the password to contain lowercase letters
    • Whether you want the password to contain numbers
    • Whether you want the password to contain special characters
  • When all prompts are answered, you will be provided with a password which is generated according to your responses

I will have all my codes below for each, (its the JavaScript I need all the help with), thank you in advance:

HTML:

HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Password Generator</title>
    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>
    <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="card-footer">
          <button id="generate" class="btn">Generate Password</button>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS:

CSS:
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  background-color: #f9fbfd;
}

.wrapper {
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

header {
  text-align: center;
  padding: 20px;
  padding-top: 0px;
  color: hsl(206, 17%, 28%);
}

.card {
  background-color: hsl(0, 0%, 100%);
  border-radius: 5px;
  border-width: 1px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
  color: hsl(206, 17%, 28%);
  font-size: 18px;
  margin: 0 auto;
  max-width: 800px;
  padding: 30px 40px;
}

.card-header::after {
  content: " ";
  display: block;
  width: 100%;
  background: #e7e9eb;
  height: 2px;
}

.card-body {
  min-height: 100px;
}

.card-footer {
  text-align: center;
}

.card-footer::before {
  content: " ";
  display: block;
  width: 100%;
  background: #e7e9eb;
  height: 2px;
}

.card-footer::after {
  content: " ";
  display: block;
  clear: both;
}

.btn {
  border: none;
  background-color: hsl(360, 91%, 36%);
  border-radius: 25px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px rgba(0, 0, 0, 0.2) 0px 1px 1px
    0px;
  color: hsl(0, 0%, 100%);
  display: inline-block;
  font-size: 22px;
  line-height: 22px;
  margin: 16px 16px 16px 20px;
  padding: 14px 34px;
  text-align: center;
  cursor: pointer;
}

button[disabled] {
  cursor: default;
  background: #c0c7cf;
}

.float-right {
  float: right;
}

#password {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  display: block;
  width: 100%;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 85px;
  font-size: 1.2rem;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 2px dashed #c0c7cf;
  border-radius: 6px;
  resize: none;
  overflow: hidden;
}

@media (max-width: 690px) {
  .btn {
    font-size: 1rem;
    margin: 16px 0px 0px 0px;
    padding: 10px 15px;
  }

  #password {
    font-size: 1rem;
  }
}

@media (max-width: 500px) {
  .btn {
    font-size: 0.8rem;
  }
}

and lastly my JAVASCRIPT:

JavaScript:
// Assignment Code
var generateBtn = document.querySelector("#generate");
function generatePassword() {
// Critia prompts for password to generate
var uppercase = confirm("Your password should have an uppercase letter! Click OK to continue");
var lowercase = confirm("Your password should have a lowercase letter! Click OK to continue");
var symbols = confirm("Your password should have a symbol! Click OK to continue");
var numbers = confirm("Your password should have a number! Click OK to continue");
var keyLength = prompt("Password must be between 8 and 128 characters! Click OK to continue");

// Password variables for allowable passwords characters
var uppercaseABC = "ABCDEFGHIJKLMNOPQRSTUVWXZ";
var lowercaseABC ="abcdefghijklmnopqrstuvwxyz";
var specialSymbols ="!@#$%^&*()?.<\>|=+:;,[-_]"
var numeric ="0123456789"
var multiSelect =[];

//making sure user follows critia
if (keyLength < 8 || keyLength > 128) {
  alert("Your password does not meet the critia");
  var keyLength = prompt("Password must be between 8 and 128 characters in length.");
}

if (uppercaseABC === false && lowercaseABC === false && specialSymbols === false && numeric === false) {
return "Your passwords does not meet the password critia";
};

var uppercaseABC = confirm("Your password should have an uppercase letter!");
var lowercaseABC = confirm("Your password should have a lowercase letter!");
var specialSymbols = confirm("Your password should have a symbol!");
var numeric = confirm("Your password should have a number!");
}

// Demands used to call the correct critia
if (lowercaseABC) {multiSelect += lowercase}
if (uppercaseABC) {multiSelect += uppercase;}
if (numeric) {multiSelect += numbers;}
if (specialSymbols) {multiSelect += symbols;}

let finalPassword = ""
for (let i = 0; i < keyLength; i++) {
  let rng =[Math.floor(Math.random() * multiSelect.length)];
  // or finalPassword += possibleCharacters[rng];
  finalPassword = finalPassword + multiSelect[rng];
}
return finalPassword;
};


// Write password to the #password input
function writePassword() {
  var password = generatePassword();
  var passwordText = document.querySelector("#password");
  passwordText.value = password;
}
// Add event listener to generate button
generateBtn.addEventListener("click", writePassword);

//
 
Hi.

Can you provide more information about the problem you face here? JS code itself looks valid.
Hi @EkBass
When I look in my VS Code View in Live Broswer, when I open the page, it should have the page where you would click a button the says “generate password” then should be prompted with a series of questions or criteria such as “must be between 8-128 characters, have a capital, lowercase, special character, and a number, after you click ok on all criteria, your back to the window to hit the button generate password and in the text field, a Random String/Password with show based on the criteria.
 
You are describing what you want to see, not what your actual problem is as @EkBass rightly asked. "Completely stuck" and "just isn't working" are not useful descriptions. Be specific please !

Have you checked the HTML in the W3C Online validator ? Have you checked the debugger Console for errors ?
 
You are describing what you want to see, not what your actual problem is as @EkBass rightly asked. "Completely stuck" and "just isn't working" are not useful descriptions. Be specific please !

Have you checked the HTML in the W3C Online validator ? Have you checked the debugger Console for errors ?
Apologies @cbreemer and @EkBass , as I mentioned, I am just learning, so please bare with me. The issue I'm running into is, I can't seem to get away from the prompts being asked over and over again as it just keeps repeating rather than finally generating the random password. No errors seem to show up in my console.
 
At line 26 of your JS there is a spurious closing bracket, which makes the entire script invalid. But I have a feeling you may have already removed that, as you mention getting bogged down in endless prompts. Which is not surprising as you are launching into all the prompts and confirms before even having generated a password. Also you are using the boolean return values of these functions as if they were strings and numerals. You really may want to rethink your logic here. Do not prompt for things unless you already have something that violates the rules. Which you haven't, because there is no user input.
 
At line 26 of your JS there is a spurious closing bracket, which makes the entire script invalid. But I have a feeling you may have already removed that, as you mention getting bogged down in endless prompts. Which is not surprising as you are launching into all the prompts and confirms before even having generated a password. Also you are using the boolean return values of these functions as if they were strings and numerals. You really may want to rethink your logic here. Do not prompt for things unless you already have something that violates the rules. Which you haven't, because there is no user input.
Thank you @cbreemer for the guidance. I will for sure go back and review my lines. I will check out W3Schools for references and rework my JavaScript. I’ll update you when I’ve manage to work it out. Thanks again for the feedback. I’m a work in progress.
 
Thank you @cbreemer for the guidance. I will for sure go back and review my lines. I will check out W3Schools for references and rework my JavaScript. I’ll update you when I’ve manage to work it out. Thanks again for the feedback. I’m a work in progress.
I hope my tips help some. One more : Whenever you first start writing a function, put an alert() statement at the beginning so you are 100% sure whether or not the function gets called. Later you can remove it of course.

This being a password generator, not a validator, you should probably have input fields on your form where you can specify
  • Min and max number of characters
  • Mixed case required yes/no
  • Digits required yes/no
  • Special characters required yes/no
 
I hope my tips help some. One more : Whenever you first start writing a function, put an alert() statement at the beginning so you are 100% sure whether or not the function gets called. Later you can remove it of course.

This being a password generator, not a validator, you should probably have input fields on your form where you can specify
  • Min and max number of characters
  • Mixed case required yes/no
  • Digits required yes/no
  • Special characters required yes/no
Hi @cbreemer, first of all, I want to say thank you for helping me with my project. After all the googling, researching and help from amazing people like you within the online coding community, I think I managed to pull it off. I submitted my assignment and now I just wait…Thank you, your guidance is appreciated. And as mentioned in my last reply, I will share my result. Here is the link to my project: Password Generator
 
Glad you got it working now. Looks good, although the use of prompt and confirm statements to provide the parameters is not very elegant to say the least ! And you need to go through all of them every time you create a new password ! You can well expect some eyebrows being raised about that. One would really want to see some extra fields on the form which you can fill in, and individually change, before you generate the password.
 
Glad you got it working now. Looks good, although the use of prompt and confirm statements to provide the parameters is not very elegant to say the least ! And you need to go through all of them every time you create a new password ! You can well expect some eyebrows being raised about that. One would really want to see some extra fields on the form which you can fill in, and individually change, before you generate the password.
Yes, we actually questioned that in class, lastnight. We even asked if we we can make it so the end user has options to select whether or not to include certain characters. But the idea of the assignment was just get the functions to work, to prompt and to generate. Almost all of us in class have the same thing going on just worded differently in the prompts. As long as it works, they say. But definitely if it was my very own build, then yes... I would go the route you were suggesting :)
 
One thing I noticed is that you're redefining your variables like uppercaseABC, lowercaseABC, specialSymbols, and numeric after the initial confirmations. You might want to remove those redefinitions and instead use the initial confirmations to build your multiSelect array for generating the password.
Also, to ensure the password meets the criteria, you can use a loop to check if at least one criterion is selected. If not, you can display an error message and restart the prompts.
For more inspiration and ideas, you might want to explore different password generator implementations online. I usually use a strong password generator online for quick and secure password creation.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom