Home Web Development JavaScript JavaScript Random Password Generator With CSS | Generate Passwords

JavaScript Random Password Generator With CSS | Generate Passwords

August 27, 2019

12584

How we can create passwords randomly using JavaScript, HTML, and CSS? Solution: JavaScript Random Password Generator With CSS, Generate Passwords randomly.

Previously I have shared random color and random gradient generator using Javascript. But this post is all about to create random passwords, like online password generators or extensions. Basically, A password generator is a tool that automatically generates a password based on guidelines that you set to create strong and unpredictable passwords for your accounts.

Today you will learn to create a generate passwords program using JS. This program has many options like a range for the number of characters or password strength, use uppercase letters, use lowercase letters, use numbers, use special characters, etc. Also, there is a copy button for copying the generated password on a single click like the copy to clipboard program.

So, Today I am sharing JavaScript Random Password Generator With CSS. The whole program is based on HTML tags and JS functions and the UI based on CSS. There are some checkbox inputs for select password’s strength and condition and a range slider for choose password’s length. Also, this program has two buttons for generating and copy the password.

If you are thinking now how this online password generator actually is, then see the preview given below.

Preview Of Online Generate Passwords

See this video preview to getting an idea of how this program works and looks like.

Live Demo

Now you can see the program visually, you also can check it live by pressing the button given above. If you like the program, then get the source code of its.

JavaScript Random Password Generator With CSS UI Source Code

Before sharing source code, let’s talk about it. I have created the program with the help of JavaScript library named Clipboard.JS(get). I have mostly used pure HTML 5 to creating structure, like div, input, label, etc. For creating the range slider I have used HTML <input type="range"> and for storing values used <datalist> and <option> tags.

For creating checkboxes used <input> and <label> tags with ID and For method. Also, I have created two buttons, one for generating password and another for copy the characters. Now using CSS I have placed all the elements on right places, for the tick icon on checkbox I have used the font-awesome library.

The whole program is based on JavaScript, First I have fetched all the elements values using document.getElementById method and stored in variables. Now there are IF conditions for according checkbox and password strength. After that, there is a JS loop for based, for creating passwords character randomly.

Other left things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First fo HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>JavaScript Password Generate | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Kanit:300,500,700'>
<link rel="stylesheet" href="./style.css">
</head>
<body>

  <div class="wrapper">
  <div class="title-section">
    <h1 class="title">JS Password Generator</h1>
  </div>
  <div class="inner-section">
    <div class="password-section">
    <div class="pass-field" id="pass-field">
    ----
  </div>
    <button id="copy" class="copy">Copy</button>
    <div class="alert" id="alert"><span class="message" id="message"></div>
  </div>
  <p class="info">Select your options and click the "Generate" button. Then your password will appear above.</p>
  <div class="controls">
    <div class="control length" id="length-box" >
      <label for="length">Password Length</label>
      <input type="range" id='length' min="4" max="20" list="ranges">
      <datalist id="ranges">
        <option value="4" label="4">
        <option value="5">
        <option value="6">
        <option value="7">
        <option value="8">        
        <option value="9">
        <option value="10">
        <option value="11">
        <option value="12" label="12">
        <option value="13">
        <option value="14">
        <option value="15">
        <option value="16">
        <option value="17">
        <option value="18">
        <option value="19">
        <option value="20">
      </datalist>
    </div>
    <div class="control">
      <input type="checkbox" id="lowercase">
      <label class="check-label" for="lowercase"><span class="checkbox">Use Lowercase Characters</span></label>
    </div>
    <div class="control">
      <input type="checkbox" id="uppercase">
      <label class="check-label" for="uppercase"><span class="checkbox">Use Uppercase Characters</span></label>
    </div>
    <div class="control">
      <input type="checkbox" id="numbers">
      <label class="check-label" for="numbers"><span class="checkbox">Use Numbers</span></label>
    </div>
    <div class="control">
      <input type="checkbox" id="punctuation">
      <label class="check-label" for="punctuation"><span class="checkbox">Use special characters</span></label>
    </div>
    
    <button class="generate" id="generate">Generate!</button>
  </div>
  </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Password Generate | Webdevtrick.com</title>

</head>

<body>

<h1 class="title">JS Password Generator</h1>

</div>

----

</div>

</div>

<p class="info">Select your options and click the "Generate" button. Then your password will appear above.</p>

<label for="length">Password Length</label>

</datalist>

</div>

<label class="check-label" for="lowercase"><span class="checkbox">Use Lowercase Characters</span></label>

</div>

<label class="check-label" for="uppercase"><span class="checkbox">Use Uppercase Characters</span></label>

</div>

<label class="check-label" for="numbers"><span class="checkbox">Use Numbers</span></label>

</div>

<label class="check-label" for="punctuation"><span class="checkbox">Use special characters</span></label>

</div>

<button class="generate" id="generate">Generate!</button>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
body {
  min-height: 100vh;
  padding-top: 100px;
  background: #e8eaed;
  font-family: "Kanit", sans-serif;
  font-weight: 300;
}

.info {
  font-size: 0.9rem;
  text-align: left;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  margin: 0;
}
.title-section {
  background: #fd9d08;
  padding: 2px 10px;
  color: white;
}
h1 {
  font-size: 1.1rem;
}
.inner-section {
  padding: 20px;
}
.wrapper {
  overflow: hidden;
  margin: auto;
  width: 90%;
  max-width: 380px;
  background: white;
  border-radius: 5px;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-flow: column wrap;
}
.wrapper .password-section {
  position: relative;
  border: 2px solid lightgray;
  color: gray;
  margin-top: 20px;
  padding: 2px 2px 2px 8px;
  border-radius: 5px;
  text-align: left;
  display: flex;
  justify-content: space-between;
}
.wrapper .password-section .alert {
  position: absolute;
  padding: 0 5px;
  border-radius: 2px;
  width: 21ch;
  height: 89%;
  left: 2px;
  top: -100%;
  width: 96%;
  text-align: center;
  color: #333;
  opacity: 0;
  transition: all 0.5s ease;
}
.wrapper .password-section .alert.success {
  background: rgb(29,161,242, 0.9);
  opacity: 1;
}
.wrapper .password-section .alert.fail {
  background: rgb(230,0,35, 0.9);
  color: white;
  opacity: 1;
}
.wrapper .password-section .copy {
  height: 100%;
  width: 50px;
  background: #e60023;
  border: 0;
  color: white;
  border-radius: 2px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.wrapper .password-section .copy:hover {
  background: #ff7a00;
}
.wrapper .controls {
  text-align: left;
  display: flex;
  flex-flow: column wrap;
}
.wrapper .controls .control {
  padding: 3px;
  border-bottom: 1px solid lightgray;
  width: 100%;
  margin: 2px;
}
.wrapper .controls .generate {
  width: 100%;
  border: 0;
  color: white;
  background: #fd9d08;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  transition: all 0.3s ease;
}
.wrapper .controls .generate:hover {
  background: #ff7a00;
}
#length-box {
  width: 100%;
}
#length-box input {
  width: 100%;
}
input[type="checkbox"] {
  visibility: hidden;
}
label.check-label {
  position: relative;
}
label.check-label:before {
  content: "";
  height: 1rem;
  width: 1rem;
  left: -24px;
  top: 0;
  border: 0.5px solid lightgray;
  position: absolute;
  background: transparent;
  transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);
}
input[type="checkbox"]:checked + label.check-label:before {
  content: "";
  font-family: "FontAwesome";
  font-size: 0.8rem;
  color: #212121;
  text-align: center;
  background: #00e676;
  transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

body {

min-height: 100vh;

padding-top: 100px;

background: #e8eaed;

font-family: "Kanit", sans-serif;

font-weight: 300;

}

.info {

font-size: 0.9rem;

text-align: left;

}

h1, h2, h3, h4, h5, h6 {

font-weight: 500;

margin: 0;

}

.title-section {

background: #fd9d08;

padding: 2px 10px;

color: white;

}

h1 {

font-size: 1.1rem;

}

.inner-section {

padding: 20px;

}

.wrapper {

overflow: hidden;

margin: auto;

width: 90%;

max-width: 380px;

background: white;

border-radius: 5px;

box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.4);

display: flex;

flex-flow: column wrap;

}

.wrapper .password-section {

position: relative;

border: 2px solid lightgray;

color: gray;

margin-top: 20px;

padding: 2px 2px 2px 8px;

border-radius: 5px;

text-align: left;

display: flex;

justify-content: space-between;

}

.wrapper .password-section .alert {

position: absolute;

padding: 0 5px;

border-radius: 2px;

width: 21ch;

height: 89%;

left: 2px;

top: -100%;

width: 96%;

text-align: center;

color: #333;

opacity: 0;

transition: all 0.5s ease;

}

.wrapper .password-section .alert.success {

background: rgb(29,161,242, 0.9);

opacity: 1;

}

.wrapper .password-section .alert.fail {

background: rgb(230,0,35, 0.9);

color: white;

opacity: 1;

}

.wrapper .password-section .copy {

height: 100%;

width: 50px;

background: #e60023;

border: 0;

color: white;

border-radius: 2px;

padding: 8px;

cursor: pointer;

transition: all 0.3s ease;

}

.wrapper .password-section .copy:hover {

background: #ff7a00;

}

.wrapper .controls {

text-align: left;

display: flex;

flex-flow: column wrap;

}

.wrapper .controls .control {

padding: 3px;

border-bottom: 1px solid lightgray;

width: 100%;

margin: 2px;

}

.wrapper .controls .generate {

width: 100%;

border: 0;

color: white;

background: #fd9d08;

border-radius: 10px;

padding: 10px;

margin-top: 10px;

transition: all 0.3s ease;

}

.wrapper .controls .generate:hover {

background: #ff7a00;

}

#length-box {

width: 100%;

}

#length-box input {

width: 100%;

}

input[type="checkbox"] {

visibility: hidden;

}

label.check-label {

position: relative;

}

label.check-label:before {

content: "";

height: 1rem;

width: 1rem;

left: -24px;

top: 0;

border: 0.5px solid lightgray;

position: absolute;

background: transparent;

transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);

}

input[type="checkbox"]:checked + label.check-label:before {

content: "";

font-family: "FontAwesome";

font-size: 0.8rem;

color: #212121;

text-align: center;

background: #00e676;

transition: all 0.3s cubic-bezier(0, 0.82, 1, 1.81);

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
var clipboard = new Clipboard('.copy')
var lowercase = "abcdefghijklmnopqrstuvwxyz",
  uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  numbers = "0123456789",
  punctuation = "!@#$%^&*()_+~`|}{[]:;?><,./-=",
  lowercaseInput = document.getElementById("lowercase"),
  uppercaseInput = document.getElementById("uppercase"),
  punctuationInput = document.getElementById("punctuation"),
  numbersInput = document.getElementById("numbers"),
  lengthInput = document.getElementById("length"),
  passwordFeild = document.getElementById("pass-field"),
  generateButton = document.getElementById("generate"),
  copyButton = document.getElementById("copy"),
  plength,
  userPassword,
  passwordCharSet;

function generate() {
  userPassword = "";
  passwordCharSet = "";
  if (lowercaseInput.checked) {
    passwordCharSet += lowercase;
  }
  if (uppercaseInput.checked) {
    passwordCharSet += uppercase;
  }
  if (punctuationInput.checked) {
    passwordCharSet += punctuation;
  }
  if (numbersInput.checked) {
    passwordCharSet += numbers;
  }
  plength = Number(lengthInput.value);

  for (let i = 0; i < plength; i++) {
    userPassword += passwordCharSet.charAt(
      Math.floor(Math.random() * passwordCharSet.length)
    );
  }
  if (userPassword == "") {
    let alertbox = document.getElementById('alert');
    alertbox.innerHTML = "Please select an option before generating"
    alertbox.classList.add('fail');
    setTimeout(function(){ 
      alertbox.classList.remove('fail');
    }, 3000);
  } else {
    passwordFeild.innerHTML = userPassword;
  }
  copyButton.setAttribute("data-clipboard-text", userPassword)
}
generateButton.addEventListener("click", generate);

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    let alertbox = document.getElementById('alert');
    alertbox.innerHTML = "Copied!"
    alertbox.classList.add('success');
    setTimeout(function(){ 
      alertbox.classList.remove('success');
    }, 3000);
    
    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
  let alertbox = document.getElementById('alert');
    alertbox.innerHTML = "Try select the text to copy"
    alertbox.classList.add('fail');
    setTimeout(function(){ 
      alertbox.classList.remove('fail');
    }, 3000);
});

// Code By Webdevtrick ( https://webdevtrick.com )

var clipboard = new Clipboard('.copy')

var lowercase = "abcdefghijklmnopqrstuvwxyz",

uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ",

numbers = "0123456789",

punctuation = "!@#$%^&*()_+~`|}{[]:;?><,./-=",

lowercaseInput = document.getElementById("lowercase"),

uppercaseInput = document.getElementById("uppercase"),

punctuationInput = document.getElementById("punctuation"),

numbersInput = document.getElementById("numbers"),

lengthInput = document.getElementById("length"),

passwordFeild = document.getElementById("pass-field"),

generateButton = document.getElementById("generate"),

copyButton = document.getElementById("copy"),

plength,

userPassword,

passwordCharSet;

function generate() {

userPassword = "";

passwordCharSet = "";

if (lowercaseInput.checked) {

passwordCharSet += lowercase;

}

if (uppercaseInput.checked) {

passwordCharSet += uppercase;

}

if (punctuationInput.checked) {

passwordCharSet += punctuation;

}

if (numbersInput.checked) {

passwordCharSet += numbers;

}

plength = Number(lengthInput.value);

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

userPassword += passwordCharSet.charAt(

Math.floor(Math.random() * passwordCharSet.length)

);

}

if (userPassword == "") {

let alertbox = document.getElementById('alert');

alertbox.innerHTML = "Please select an option before generating"

alertbox.classList.add('fail');

setTimeout(function(){

alertbox.classList.remove('fail');

}, 3000);

} else {

passwordFeild.innerHTML = userPassword;

}

copyButton.setAttribute("data-clipboard-text", userPassword)

}

generateButton.addEventListener("click", generate);

clipboard.on('success', function(e) {

console.info('Action:', e.action);

console.info('Text:', e.text);

console.info('Trigger:', e.trigger);

let alertbox = document.getElementById('alert');

alertbox.innerHTML = "Copied!"

alertbox.classList.add('success');

setTimeout(function(){

alertbox.classList.remove('success');

}, 3000);

e.clearSelection();

});

clipboard.on('error', function(e) {

console.error('Action:', e.action);

console.error('Trigger:', e.trigger);

let alertbox = document.getElementById('alert');

alertbox.innerHTML = "Try select the text to copy"

alertbox.classList.add('fail');

setTimeout(function(){

alertbox.classList.remove('fail');

}, 3000);

});

That’s It. Now you have successfully created JavaScript Random Password Generator With CSS, Generate Passwords Online Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

12 COMMENTS

Govind purty August 28, 2019 At 4:37 am

What software would be suitable for this?

Reply
- shaan August 28, 2019 At 4:40 am
  
  Sorry, I did not get you. You can generate a strong password use on your online accounts.
  
  Reply
Romit Raj Sahu October 2, 2019 At 10:07 am

Can I make a Password Generator Website with the help of this Source Code? It will be my first website by the way!!!

Reply
- shaan October 2, 2019 At 10:13 am
  
  yes, you can.
  
  Reply
Romit Raj Sahu November 9, 2019 At 4:12 am

Sir, this Password Generator needs internet for the tick icons to display. Isn’t there any way so that we can convert it to completely offline. Sir please give me solution quickly because I am referring your Password generator for my school project.

Reply
- shaan November 9, 2019 At 5:13 am
  
  the icons are based on font awesome library. You can download the library and store it offline.
  
  Reply
  - Romit Raj Sahu November 12, 2019 At 5:27 am
    
    Sir but except icons will everything else will work offline?
    
    Reply
    - shaan November 12, 2019 At 6:59 am
      
      yes.
      
      Reply
Sergei November 15, 2019 At 6:19 pm

When you do this
passwordFeild.innerHTML = userPassword;
you have to replace special characters with html entities because passwords like this: will not show up in password field or might be shorter than specified.

Reply
Kain January 15, 2020 At 12:48 am

How can I increase the PW length more than the current 30?

Also, how to show the number of characters when using the slider, for example next to the text “Password Lenght”

Thanks

Reply
sitara February 5, 2020 At 4:45 am

can i make a app use your code?

Reply
- shaan February 5, 2020 At 5:30 am
  
  yes
  
  Reply