Creating a password generator using JavaScript

Hello, I am very new to learning JavaScript 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.

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

Any help would be very appreciated. I will have all my codes below for each, (its the JavaScript I need all the help with), thank you in advance:


<!DOCTYPE html>
<html lang="en">
    <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" />
    <div class="wrapper">
        <h1>Password Generator</h1>
      <div class="card">
        <div class="card-header">
          <h2>Generate a Password</h2>
        <div class="card-body">
            placeholder="Your Secure Password"
            aria-label="Generated Password"
        <div class="card-footer">
          <button id="generate" class="btn">Generate Password</button>
    <script src="script.js"></script>


*::after {
  box-sizing: border-box;

.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
  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:

// 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 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);


Instead of diving into this I am going to give you some advice on how to break down the problem, which can be applied to this problem, and any problem you have in the future.

  1. Write pseudo code for this and post it here if you like. I think the steps are not very clear at this point, but writing the logic out step by step will help you see some things.

  2. After you determine the steps needed, then think about how to structure the code. This could be a passwordGenerator object, or create one. Determine what your data is and what functions (methods) you are needing to perform. You are needing to collect data from a user. Would it make sense to group similar functions into a data structure like a list? object? You are also needing to validate these inputs, would it make sense to also group validating functions into an iterable data structure?

Spending some time organizing and thinking about these smaller applications can pay off big time later down the road. Play with it and I hope you post whatever you come up with on here so we can see how you approached it.

Wow @mechanicDev you really went all in in helping out! Thank you so much for providing that video as a guidance for myself. You can be a teacher! I appreciate you.

and @MTownsend I like the way you think. A tutor of mine tried to explain that to me as well. I am getting there. Take the steps, read what its telling me, and work my way through it one step at a time. I tend to panic especially when I get confused.

But with all the googling, researching and help from amazing people like you guys within the online coding community, I think I managed to pull it off. I submitted my assignment and now I just wait…Thank you thank you.

Here is a link to my KeyGen Application: Password Generator