Random Password Generator in JavaScript with Source Code

By

adones evangelista

-

October 19, 2020

621

Random Password Generator in JavaScript with Source Code

The Random Password Generator in JavaScript is a system project created using HTML, CSS, and JavaScript. JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else, can update and change both HTML and CSS.

This simple mini project for Random Password Generator in JavaScript is complete and totally error free and also includes a downloadable Source Code for free, just find the downloadable source code below and click to start downloading. Before you start to click the download now first you must click the Run Quick Scan for secure Download.

Taking about the highlights of this Random Password Generator, At the point when you click on the Generate secret key catch, at that point you will see various passwords at each click. This system in JavaScript is undertaking to secret phrase aimlessly. Additionally, you can type the quantities of characters you need to remember for the secret word.

Watch the video here to see the full running Random password generator in javaScript With Source Code.

Anyway if you want level up your knowledge in programming especially C/C++ Programming Language, try this new article I’ve made for you Best C Projects with Source Code for Beginners Free Download 2020.

I have here a suggested list of Best JavaScript Projects with Source Code Free to download and I’m sure this can help you to improve your skills in JavaScript programming and web development as a whole.

To start creating a Random Password Generator in JavaScript, make sure that you have any platform in creating a JavaScript, bootstrap, and HTML installed in your computer, in my case I will use Sublime Text.

Steps on how to create a Random Password Generator in JavaScript with Source Code

Random Password Generator in JavaScript with Source Code

Step 1: Open Sublime Text.
First after installing sublime text IDE, click “open” to start.
Step 2: Create a HTML file.
Second click “file” and select “save as” and named it “index.html“
Step 3: Create a JavaScript file.
Third click “file” and select “save as” and named it “passGeneratorScript.js“
Step 3: Create a CSS file.
Third click “file” and select “save as” and named it “generatePasswordStyle.css“
Step 4: The actual code.
You are free to copy the code given below and paste to your different file created.

This code is for the index.html

In the code given below, which is for the code for html file system and this code contains the interface of the application.(Random Password Generator in JavaScript)

&lt;!-- Bootstrap CSS --&gt; &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt; &lt;title&gt;Random Password Generator&lt;/title&gt; &lt;link rel="stylesheet" href="css/generatePasswordStyle.css"&gt;
&lt;div class="container"&gt; &lt;form action="" name="passGen"&gt; &lt;div class="col-xs-12"&gt; &lt;input type="text" size="18" name="output" class="out" disabled&gt; &lt;input type="button" value="Generate Password" class="btn btn-success btn-block myBtn" onclick="populateForm(this.form.length.value)"&gt;&lt;br&gt; &lt;div class="col-xs-10"&gt;&lt;strong class="passwords"&gt;Password Length: &lt;/strong&gt;&lt;/div&gt; &lt;div class="col-xs-2"&gt;&lt;input type="text" name="length" size="3" value="6" class="inpt"&gt;&lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src="js/passGeneratorScript.js"&gt; &lt;/script&gt; &lt;!-- Optional JavaScript --&gt; &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt; &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt; &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"&gt;&lt;/script&gt; &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"&gt;&lt;/script&gt;

1

2

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <title>Random Password Generator</title> <link rel="stylesheet" href="css/generatePasswordStyle.css">

<div class="container"> <form action="" name="passGen"> <div class="col-xs-12"> <input type="text" size="18" name="output" class="out" disabled> <input type="button" value="Generate Password" class="btn btn-success btn-block myBtn" onclick="populateForm(this.form.length.value)"><br> <div class="col-xs-10"><strong class="passwords">Password Length: </strong></div> <div class="col-xs-2"><input type="text" name="length" size="3" value="6" class="inpt"></div> </form> </div> </div> <script src="js/passGeneratorScript.js"> </script>   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

This code is for the generatePasswordStyle.css

In the code given below, which is for the code for the CSS of the system.(Random Password Generator in JavaScript)

body {
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#000000), to(#ffdb4d));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #000000, #000000);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #000000, #000000);
/* IE 10 */
background: -ms-radial-gradient(circle, #000000, #000000);
height: 600px;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 100px;
font-size: 3em;
}
.out {
margin-bottom: 10px;
width: 100%;
text-align: center;
color: #ff0000;
}
.myBtn {
padding: 20px 20px;
font-size: 40px;
margin-bottom: 20px;
}
.myBtn:hover {
background-color: rgb(0, 0, 255);
}
.passwords {
width: 400px;
font-size: 30px;
float: left;
color: #ffff;
margin-left: 0;
padding: 20.5px 24px;
background-color: #ffa500;
}
.inpt {
margin: 0;
padding: 5px 16.5px;
float: right;
text-align: center;
background-color: #000000;
color: #ff0000;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

body {

background: -webkit-gradient(radial, center center, 0, center center, 460, from(#000000), to(#ffdb4d));

/* Safari 5.1+, Chrome 10+ */

background: -webkit-radial-gradient(circle, #000000, #000000);

/* Firefox 3.6+ */

background: -moz-radial-gradient(circle, #000000, #000000);

/* IE 10 */

background: -ms-radial-gradient(circle, #000000, #000000);

height: 600px;

}

.container {

width: 600px;

margin: 0 auto;

margin-top: 100px;

font-size: 3em;

}

.out {

margin-bottom: 10px;

width: 100%;

text-align: center;

color: #ff0000;

}

.myBtn {

padding: 20px 20px;

font-size: 40px;

margin-bottom: 20px;

}

.myBtn:hover {

background-color: rgb(0, 0, 255);

}

.passwords {

width: 400px;

font-size: 30px;

float: left;

color: #ffff;

margin-left: 0;

padding: 20.5px 24px;

background-color: #ffa500;

}

.inpt {

margin: 0;

padding: 5px 16.5px;

float: right;

text-align: center;

background-color: #000000;

color: #ff0000;

}

This code is for the passGeneratorScript.js

In the code given below, which is for the code for JavaScript file system.(Random Password Generator in JavaScript)

var keylisting = "abcdefghijklmnopqrstuvwxyz1234567890!@#$%&amp;*/\?";
var temporary = "";
function generatePass(passwordLength) {
temporary = "";
for (var i = 0; i &lt; passwordLength; i++) {
temporary += keylisting.charAt(Math.floor(Math.random() * keylisting.length))
}
return temporary;
}
function populateForm(enterLength) {
document.passGen.output.value = generatePass(enterLength);
}

1

2

3

4

5

6

7

8

9

10

11

12

var keylisting = "[email protected]#$%&*/\?";

var temporary = "";

function generatePass(passwordLength) {

temporary = "";

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

temporary += keylisting.charAt(Math.floor(Math.random() * keylisting.length))

}

return temporary;

}

function populateForm(enterLength) {

document.passGen.output.value = generatePass(enterLength);

}

Run Quick Virus Scan for secure Download

Run Quick Scan for safe Download

Downloadable Source Code

Summary

In summary, this 2020 Random Password Generator in JavaScript with Source Code can be useful to students or professional who wants to learn web development using technologies like HTML, CSS and JavaScript. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy coding!

That’s how you create Random Password Generator in JavaScript with Source Code in your projects. You can always expand and try different ways in implementing the Random Password Generator in JavaScript in your JavaScript projects. In this Mini Project for Random Password Generator in JavaScript with Source Code is free to download and It is easy to understand and manipulate this project and use for education purpose only.

Inquiries

If you have any questions or suggestions about Random Password Generator in JavaScript with Source Code, please feel free to leave a comment below.

Looking for more source code? Type your keyword here here!

1 COMMENT

Rahul Jangid December 6, 2020 At 5:33 pm

This is awesome tutorial 🙂 Thank You For Posting Tutorials
Strong Password Generator

Reply

LEAVE A REPLY Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: