Home Web Development JavaScript Random Password Generator Using jQuery and CSS Style | Save & Print

Random Password Generator Using jQuery and CSS Style | Save & Print

February 2, 2020

3594

How we can create a program for generating random passwords according to our guidelines? Solution: See this Random Password Generator Using jQuery and CSS Style, Save & Print feature.

Previously I have shared a JavaScript Password Generator, this is similar to that but it has more features and we have conditions manually. Basically, a random pass generator program creates passwords characters randomly and helps you choose a strong password for your accounts. There are two types of programs available for generating passwords, the first one has prebuilt conditions and in the other one user can put conditions like password characters, length, etc.

Today you will learn to create a password generating program with save and print features. Basically, the program has 3 input fields at the top. First input for placing possible characters that should be in the password. The second one for character length, how many characters should be in the password. And the third one for the number of passwords, how many passwords you want to create or see. At the side of the generated password, there is an editable placeholder to put a text which will belong to the password. Also, there are two buttons for saving the pass list as a text file and print the password area.

So, Today I am sharing Random Password Generator Using jQuery and CSS Style. There I have used jQuery for complete functioning and create the whole program, and the styles are based on CSS. This is a complete program, using this program you can create a password generator website. Also, you can use this program on signup form are to give password ideas to users.

If you are thinking now how this random pass generate program actually is, then see the preview given below.

Preview Of Pass Generate with Save and Print Features

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

https://webdevtrick.com/wp-content/uploads/jquery-random-password-generate.mp4?_=1

Live Demo

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

Random Password Generator Using jQuery Source Code

Before sharing source code, let’s talk about it. First I have created 4 elements group to create the whole layout. The first div for placing the title or heading of program, second div group for all 3 inputs and labels, third div group for show generated passwords and placeholders, and the last group for save and print buttons. These two buttons run JS functions on click. Also in the HTML file, I have linked other files like CSS, JS, and jQuery CDN.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS I gave a linear gradient to the background, and also gave basic values to elements like size, position, margin, padding, etc. There I have used CSS @media query to create this program a responsive design. Also, I have styled those elements which are created by jQuery dynamically.

jQuery handling here the whole functions and features in this program. In JS file first I have created 3 variable and stored data for creating by default password lists and their conditions. After that, it fetched inputs values and create a password according to that condition. There I have used if{} else{} statements to create the passwords and for{} loop command to create numbers of passwords.

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

index.html

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

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Random Password Generator | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="intro-box">
  <h2>Random Password Generator</h2>
</div>

<div class="wrapper">


  <div class="fields-box">
    <label for="new-chars">
      <span>Enter Possible Chars</span>
      <input type="text" id="new-chars">
    </label><label for="new-length">
      <span>Set Character Length</span>
      <input type="number" id="new-length" min="1">
    </label><label for="new-num">
      <span>Set Items Number</span>
      <input type="number" id="new-num" min="1">
    </label>
  </div>

  
  <div class="table-box">
    <table>
    </table>
  </div>

  
  <div class="buttons-box">
    <button onclick="download();">Save</button>
    <button onclick="printTable();">Print</button>
  </div>

</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Random Password Generator | Webdevtrick.com</title>

</head>

<body>

<h2>Random Password Generator</h2>

</div>

<span>Enter Possible Chars</span>

</label><label for="new-length">

<span>Set Character Length</span>

</label><label for="new-num">

<span>Set Items Number</span>

</label>

</div>

<table>

</table>

</div>

<button onclick="printTable();">Print</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 ) */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
}

body {
  background: #093637;
  background: linear-gradient(to right, #44a08d, #093637);
  font-family: 'Open Sans', sans-serif;
  color: #FFFFFF;
}

.wrapper {
  width: 90%;
  max-width: 620px;
  margin: 20px auto;
  border-radius: 3px;
  background: rgba(255,255,255,0.1);
}

.intro-box {
  width: 80%;
  max-width: 820px;
  margin: 60px auto 40px auto;
}

.intro-box h2 {
  font-size: 2em;
  font-weight: 300;
  text-align: center;
}

.fields-box {
  padding: 18px 5%;
}

.fields-box label {
  display: inline-block;
  width: 33.33%;
  padding: 6px 12px;
}

.fields-box label span {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  font-size: .8em;
  color: #BBDEFB;
}

.fields-box label input {
  width: 100%;
  padding: 8px;
  color: #29B6F6;
  background: #FFFFFF;
  background: rgba(255,255,255,0.9); 
  border: none;
  outline: none;
  border-radius: 3px;
}

@media only screen and (max-width: 520px){
  .fields-box label {
    width: 100%;
  }
}

.table-box {
  padding: 10px 5%;
  background: rgba(255,255,255,0.1);
}

table, tr, td {
  border: none;
  border-collapse: collapse;
}

.table-box table, 
.table-box table tr {
  width: 100%;
  max-width: 100%;
  padding: 12px;
}

.table-box table tr {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.table-box table tr:last-child {
  border: none;
}

.table-box table tr td {
  padding: 10px;
  text-align: left;
  outline: none;
}

.buttons-box {
  position: fixed;
  width: 54px;
  right: 14px;
  bottom: 18px;
  z-index: 1;
}

.buttons-box button {
  display: inline-block;
  width: 54px;
  height: 54px;
  margin-top: 14px;
  font-size: .8em;
  font-weight: 700;
  color: #2196F3;
  background: #FFFFFF;
  border: none;
  outline: none;
  border-radius: 100%;
  text-align: center;
  box-shadow: 
    0 5px 10px rgba(0,0,0,0.25), 
    0 4px 8px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: ease .2s;
}

.buttons-box button:hover {
  background: #EDE7F6;
  box-shadow: 
    0 10px 20px rgba(0,0,0,0.1), 
    0 8px 16px rgba(0,0,0,0.1);
}

@media print {
  @page {
    margin: .5cm;
  }

  body {
    border: 6px solid #DDDDDD;
  }

  tr {
    border-bottom: 1px solid #DDDDDD;
  }
  
  .intro-box,
  .fields-box,
  .buttons-box {
    display: none;
  }
}

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

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

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

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html, body {

min-height: 100%;

}

body {

background: #093637;

background: linear-gradient(to right, #44a08d, #093637);

font-family: 'Open Sans', sans-serif;

color: #FFFFFF;

}

.wrapper {

width: 90%;

max-width: 620px;

margin: 20px auto;

border-radius: 3px;

background: rgba(255,255,255,0.1);

}

.intro-box {

width: 80%;

max-width: 820px;

margin: 60px auto 40px auto;

}

.intro-box h2 {

font-size: 2em;

font-weight: 300;

text-align: center;

}

.fields-box {

padding: 18px 5%;

}

.fields-box label {

display: inline-block;

width: 33.33%;

padding: 6px 12px;

}

.fields-box label span {

display: block;

width: 100%;

margin-bottom: 4px;

font-size: .8em;

color: #BBDEFB;

}

.fields-box label input {

width: 100%;

padding: 8px;

color: #29B6F6;

background: #FFFFFF;

background: rgba(255,255,255,0.9);

border: none;

outline: none;

border-radius: 3px;

}

@media only screen and (max-width: 520px){

.fields-box label {

width: 100%;

}

.table-box {

padding: 10px 5%;

background: rgba(255,255,255,0.1);

}

table, tr, td {

border: none;

border-collapse: collapse;

}

.table-box table,

.table-box table tr {

width: 100%;

max-width: 100%;

padding: 12px;

}

.table-box table tr {

border-bottom: 1px solid rgba(255,255,255,0.1);

}

.table-box table tr:last-child {

border: none;

}

.table-box table tr td {

padding: 10px;

text-align: left;

outline: none;

}

.buttons-box {

position: fixed;

width: 54px;

right: 14px;

bottom: 18px;

z-index: 1;

}

.buttons-box button {

display: inline-block;

width: 54px;

height: 54px;

margin-top: 14px;

font-size: .8em;

font-weight: 700;

color: #2196F3;

background: #FFFFFF;

border: none;

outline: none;

border-radius: 100%;

text-align: center;

box-shadow:

0 5px 10px rgba(0,0,0,0.25),

0 4px 8px rgba(0,0,0,0.25);

cursor: pointer;

transition: ease .2s;

}

.buttons-box button:hover {

background: #EDE7F6;

box-shadow:

0 10px 20px rgba(0,0,0,0.1),

0 8px 16px rgba(0,0,0,0.1);

}

@media print {

@page {

margin: .5cm;

}

body {

border: 6px solid #DDDDDD;

}

tr {

border-bottom: 1px solid #DDDDDD;

}

.intro-box,

.fields-box,

.buttons-box {

display: none;

}

function.js

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

// Code By Webdevtrick ( https://webdevtrick.com )
var setChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; //Given chars.
var setLenght = 12; //Output length.
var setNum = 5; //Items length.

//Strings:
var pass = ""; //Password string.
var plainText = ""; //Plain text version.
var textTitle = ""; //Plain text intro.
var fileName = "pass.txt"; //Plain text filename.

//Random password function:
function randString() {
  //Get user values:
  var newChars = $("#new-chars").val();
  var newLenght = $("#new-length").val();
  var newNum = $("#new-num").val();
  //Check valid values:
  if (newChars) {
    setChars = newChars;
  };
  if (newLenght) {
    setLenght = newLenght;
  };
  if (newNum) {
    setNum = newNum;
  };
  //Reset table:
  $("table").empty();
  //Passwords gen:
  for (i=0; i<setNum; i++) {
    //Shuffle chars:
    for(var j = 0; j < setLenght; j++) {
      pass += setChars.charAt(Math.floor(Math.random() * setChars.length));
    };
    //Append items:
    $("table").append("<tr><td>" + parseInt(i+1) + "</td><td>" + pass + "</td><td contenteditable=''>Edit me!</td></tr>");
    //Reset 'pass' string:
    pass = "";
  };
};

//Run password generator:
$(document).ready(function(){
  randString();
});

//Password generator triggers:
$("input").change(function(){
  randString();
});

//Plain text gen:
function toPlain(){
  //Set plain text header:
  textTitle = "\n\n=========================\nRandom password generator\n=========================\n\n"
  //Get raw content:
  tableContent = $("table").html();
  //Remove HTML tags:
  plainText = tableContent.replace(/<tbody>|<\/tbody>|<tr>|<\/td>/g, '').replace(/<\/tr>/g, '\n').replace(/<td>|<td contenteditable="">/g, ' > ');
};

//Download function:
function download() {
  //Get plain text.
  toPlain();
  //Save file:
  var textContent = document.createElement('a');
  textContent.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(textTitle+plainText)); //Set content.
  textContent.setAttribute('download', fileName) //set filename.
  textContent.style.display = 'none'
  document.body.appendChild(textContent)
  textContent.click()
  document.body.removeChild(textContent)
};

//Print function:
function printTable(){
  window.print();
}

//Buttons display:
$(".buttons-box").hide(0);
setTimeout(function(){ 
  $(".buttons-box").fadeIn(300);
}, 5000);

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

var setChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; //Given chars.

var setLenght = 12; //Output length.

var setNum = 5; //Items length.

//Strings:

var pass = ""; //Password string.

var plainText = ""; //Plain text version.

var textTitle = ""; //Plain text intro.

var fileName = "pass.txt"; //Plain text filename.

//Random password function:

function randString() {

//Get user values:

var newChars = $("#new-chars").val();

var newLenght = $("#new-length").val();

var newNum = $("#new-num").val();

//Check valid values:

if (newChars) {

setChars = newChars;

};

if (newLenght) {

setLenght = newLenght;

};

if (newNum) {

setNum = newNum;

};

//Reset table:

$("table").empty();

//Passwords gen:

for (i=0; i<setNum; i++) {

//Shuffle chars:

for(var j = 0; j < setLenght; j++) {

pass += setChars.charAt(Math.floor(Math.random() * setChars.length));

};

//Append items:

$("table").append("<tr><td>" + parseInt(i+1) + "</td><td>" + pass + "</td><td contenteditable=''>Edit me!</td></tr>");

//Reset 'pass' string:

pass = "";

};

//Run password generator:

$(document).ready(function(){

randString();

});

//Password generator triggers:

$("input").change(function(){

randString();

});

//Plain text gen:

function toPlain(){

//Set plain text header:

textTitle = "\n\n=========================\nRandom password generator\n=========================\n\n"

//Get raw content:

tableContent = $("table").html();

//Remove HTML tags:

plainText = tableContent.replace(/<tbody>|<\/tbody>|<tr>|<\/td>/g, '').replace(/<\/tr>/g, '\n').replace(/<td>|<td contenteditable="">/g, ' > ');

};

//Download function:

function download() {

//Get plain text.

toPlain();

//Save file:

var textContent = document.createElement('a');

textContent.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(textTitle+plainText)); //Set content.

textContent.setAttribute('download', fileName) //set filename.

textContent.style.display = 'none'

document.body.appendChild(textContent)

textContent.click()

document.body.removeChild(textContent)

};

//Print function:

function printTable(){

window.print();

}

//Buttons display:

$(".buttons-box").hide(0);

setTimeout(function(){

$(".buttons-box").fadeIn(300);

}, 5000);

That’s It. Now you have successfully created Random Password Generator Using jQuery and CSS Style, with Save and Print features. If you have any doubt or questions comment down below.

Thanks For Visiting, Keep Visiting.