If you are a beginner and want to create a JavaScript Password Generator then this tutorial is for you. Here I have shown step-by-step and shared complete information on how to create a password generator using JavaScript. 

JavaScript Password Generator will help you create the password of your choice. Earlier I showed you how to create JavaScript Random Password Generator. However, this design will give you the option to create a password manually.

This simple password generator will help you create the password you want. There are different options and controls. This will allow you to create the password you need.

JavaScript Password Generator

You need JavaScript enabled to view it to make it. Here I have used HTML CSS and some amount of JavaScript.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

First, a box was created on the webpage. In that box, I first created a display where the generated passwords can be seen. 

Then an input box is created where you can control the width of the password. This means that the number of characters you want to create the password can be controlled by this slider.

Then there are the four smaller boxes. This select box created by the checkbox will help you to further customize your password. There is a button at the end of which clicks on which the password is generated and can be seen in the display.

How to create Password Generator using JavaScript

If you want to create this Password Generator JavaScript then you must have a basic idea about HTML, CSS, and javascript. 

But if you just want the source code then follow the part below the article. But if you are a beginner then follow the tutorial below.

This JavaScript Password Generator has a copy button. When you click on the Generate button, the password will be copied automatically.

1. Make a box on the webpage

I first created an area using the following HTML and CSS codes. In this area, you can see all the information of Password Generator with JavaScript.

The webpage has been designed using the following code. Here the background color of the webpage is blue.

I have used the background color of this box as white and width: 500px. Box shadows have been used to enhance beauty.

2. Create a password viewing display

Now we have created a display that will help to see the generated passwords. HTML’s input function has been used to create this box. 

Box-shadow has been used to enhance the background white color and beauty of the box. Its box has no specific size. It will determine its own size depending on the amount of padding.

<input value=”Password generator” id=”password-output”>

input {

  border: none;

  background: transparent;

  outline: none;

}

#password-output {

  text-align: center;

  font-size: 2rem;

  margin: 0 auto 1.2rem;

  width: 100%;

  color: rgb(2, 91, 164);

  padding: 5px;

  box-shadow: 0 0 20px rgba(0,139,253,0.45);

}

3. Range slider and display created

Now a range slider has been created in this JavaScript Password Generator. I have used two input boxes here. The first input box to create the slider and the second input box to create the display. 

When you change the value of this range, the value in that display will change. The input boxes are connected to each other using JavaScript.

<div class=”range”>

   <input type=”range” min=”4″ max=”24″ step=”1″ value=”8″ id=”password-length”

          oninput=”document.getElementById(‘display-password-length’).value=this.value”>

   <input type=”text” value=”8″ maxlength=”2″ id=”display-password-length”

          oninput=”document.getElementById(‘password-length’).value=this.value”>

 </div>

#password-generator .range {

  justify-content: space-between;

  margin-top: 20px;

  margin-bottom: 60px;

  max-width: 70%;

  margin-left: 15%;

  padding: .4rem 1rem .8rem 2.5rem;

  border: 1.5px solid rgb(8, 84, 181);

}

#password-generator .range input[type=range] {

  -webkit-appearance: none;

  appearance: none;

  width: 40%;

  max-width: 100%;

  height: 15px;

  padding: 0px;

  background: #7a7a82;

  outline: none;

  opacity: 0.7;

  -webkit-transition: 0.2s;

  transition: opacity 0.2s;

  box-shadow: 0 2px 35px rgba(0, 0, 0, 0.4555);

  border-radius: 10px;

  cursor: pointer;

  scroll-behavior: smooth;

  z-index: 1;

}

The Range Slider button has been designed using the following codes. Here I am using the background color blue of the button.

.range input[type=range]::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 25px;

  height: 25px;

  background: rgb(9, 71, 222);

  cursor: pointer;

  border-radius: 18px;

  transition: 0.5s ease;

}

The size of the display is determined using the CSS below. Font-size: 1.4rem has been used to increase the display’s width: 80px and text size.

body #password-generator .range #display-password-length {

  text-align: center;

  font-size: 1.4rem;

  width: 80px;

  padding-top: 10px;

}

4. Select box to customize the password

The select options have been created using the following codes. Here four inputs and four labels are used. There is a label for each input. 

Those labels will help to understand which select box to select which value. You can customize your password using this select box.

<div class=”flex”>

  <input type=”checkbox” id=”lowercase” checked=”checked”>

  <label for=”lowercase”>a-z</label>

  <input type=”checkbox” id=”uppercase”>

  <label for=”uppercase”>A-Z</label>

  <input type=”checkbox” id=”numbers”>

  <label for=”numbers”>0-9</label>

  <input type=”checkbox” id=”symbols”>

  <label for=”symbols”>!-?</label>

</div>

.flex {

  margin: 1rem 1rem 2rem;

  display: flex;

  justify-content: space-between;

}

.flex input {

  display: none;

}

.flex input:checked + label {

  border: 2px solid rgb(205, 151, 12);

  background: rgb(173, 144, 82);

  filter: brightness(120%);

  transform: scale(1.1);

}

.flex label {

  border: 2px solid #0571bb;

  border-radius: 4px;

  padding: 0.6rem;

  cursor: pointer;

  font-size: 1.3rem;

  text-align: center;

  display: block;

  width: 80px;

  transition: 0.2s ease;

}

5. Button to generate password

Now you need to create a button in Password Generator JavaScript. The password will be generated when the button is clicked. 

Here the button function is used. The button’s background color is blue and the text color is white.

<button id=”generateButton” type=”button” onclick=”generatePassword()”>Generate</button>

#password-generator button {

  outline: none;

  background: #0f6cc3;

  color: white;

  border: none;

  padding: 1rem 2rem;

  margin: 0.5rem 0;

  border-radius: 3px;

  box-shadow: 1px 1px 6px 1px #8f8a8a;

  text-transform: uppercase;

  font-size: 1.2rem;

  transition: 0.2s ease;

  cursor: pointer;

}

#password-generator button:hover {

   background: rgb(173, 118, 22);

}

6. Activate JavaScript Password Generator

I have basically designed this JavaScript Password Generator above. Now it’s time to activate this password generator using JavaScript. 

JavaScript used here is a bit difficult. To understand these codes you need to have a basic idea about JavaScript.

//The global constant of the display id is set  

 const passwordOutput =  document.getElementById(‘password-output’);

//The Lower characters used here are stored in the ‘dataLowercase’

  const dataLowercase = “azertyuiopqsdfghjklmwxcvbn”.split(”);

//The Upper characters used here are stored in the ‘dataUppercase’

  const dataUppercase = “AZERTYUIOPQSDFGHJKLMWXCVBN”.split(”);

//The Numbers used here are stored in the ‘dataNumbers’

  const dataNumbers = “0123456789”.split(”);

//The Symbols used here are stored in the ‘dataSymbols’

  const dataSymbols = “!@#$%^&*-_=+\|:;’,.>/?~”.split(”);

function generatePassword() {

//concat() is a string method that is used to concatenate strings together

 const data = [].concat(

      lowercase.checked ? dataLowercase : [],

      uppercase.checked ? dataUppercase : [],

      numbers.checked ? dataNumbers : [],

      symbols.checked ? dataSymbols : []

  );

//The value obtained from the range slider is stored in ‘password Length’

  let passwordLength = parseInt(document.getElementById(‘display-password-length’).value);

  let newPassword = ”;

//If you do not select a select box, you will see the following alert message

  if (data.length === 0) {

      passwordOutput.innerHTML = “Générateur de MDP”;

      alert(‘Please check at least one criteria’);

      return;

    }

//It has been decided in which format the generated password will be displayed

//The Math. random() function returns a floating-point in the range 0 to less than 1

  for (let i = 0; i < passwordLength; i++) {

      newPassword += data[Math.floor(Math.random() * data.length)];

    }

//Arrangements have been made to display the value of the new password in the display

   passwordOutput.value = newPassword;

//The copy button has been activated.

//Clicking the Generate button will automatically copy the password

  passwordOutput.select();

  document.execCommand(‘copy’);

//After copying the password, the following text will appear in the button

  generateButton.innerHTML = “Copied !”;

//Arrangements have been made to change the text of the button after 3.5 seconds

  setTimeout(() => {generateButton.innerHTML = “Generator Again”}, 3500);

}

Source code of JavaScript Password Generator

There are many users who just want the source code. Below I have given all the source code for them together. If you want to take all the code of this JavaScript Password Generator together then use the section below. 

Here HTML, CSS, and javascript code are together. You copy those codes and add them to your HTML file. If you want previews and tutorials then follow the article above.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

Hopefully using the above codes you have learned how to create this password generator using JavaScript. Earlier I shared a tutorial on Random Password Generator. 

If you want to create a simple password generator then you can follow that tutorial. Below is a button that allows you to download the source code. If there is any problem, you can let me know by commenting.

Download Code