Top 3 Random Password Generator JavaScript Source Code

Do you want to know How to Create a Random Password Generator using JavaScript and HTML, CSS, then stay with me, I will be sharing the Top 3 password generator javascript source code and start to build your know Password Generator Tool in blogger or any platform.

Easily build a random password generator using HTML CSS, and JavaScript code, Basically Strong Random Password Generator Script will create any random string of passwords that can be used anywhere. For high-security reasons, one should use a strong password and a combination of special characters and numbers.

Therefore using the below Javascript Password generator source code will generate a password based on input given by the user. For example, if a user wants to make a combination of their name and date of birth then this is input, and based on that random password will be generated with an HTML website.

create random password generator javascript source code
create random password generator javascript source code

So before knowing steps about How to Generate a Random Password using JavaScript we first need to understand the basic workings of it.

Also Create and Use: Decimal to Binary Converter Tool

What is Random Password Generator Tool?

JavaScript Password Generator Tool is used to create any random password based on user input and options available that automatically generate passwords. For any website online while creating an account we need a strong password with a combination of numbers and special characters. So many users want to generate any random password with a combination of their name or dob and anything.

Then Password Generator Website is used to make it simple to get a strong password. Therefore let us learn how to create a password generator website For Free using JavaScript and HTML code.

Now let us know the steps to implement and build a Password Generator with JavaScript.


How to Create Random Password Generator website Using HTML, CSS, and JavaScript

To know the steps to create a Random Password Generator app with HTML on your website, then just copy and paste below different JavaScript source code on your website.

You can implement add below random password generator JavaScript source code in your website. For bloggers, the platform Add HTML, CSS, and JavaScript code to your website template or page to create this tool. Below are simple steps to be followed to create a password generator tool in blogger.

Create Password Generator Tool in blogger

In blogger, we can use the below javascript source code to add tools to the blogger page or can create a completely new website.

Also, Learn to Create responsive tabs on the blogger website using CSS

Add Tool in blog page

To add password generator tool in the blog page, then add CSS, Html, and JavaScript code directly on blog page Html view. After as per your template design you can customize the CSS style and make it look perfect on your website.

  • Visit Blogger Dashboard
  • Create ‘New page’
  • Now, Switch to HTML view and copy and paste below source code
  • Make some changes as per your need like color or text.
  • Save and Publish.
  • Congrats now your own random password generator website is ready to use.

Build Password generator website in google blogger

Now to make a separate website you need to convert the blogger template to a classic template and add password generator javascript source code.

If you want to create a separate website using the below code then these steps.

  • Visit Blogger Dashboard and after login create a new blog, then Click on Theme.
  • Click on the three-dot, and from there click on “Mobile settings” and select desktop and save
  • Again Click on the three-dot, and from there click on “Switch to the first-generation classic theme”. And then click “backup and switch ”. For more information watch the below video.
  • Change Navbar from Blue to off
  • Remove all and Upload/Add provided Script
  • Preview your Website Final Look
  • Congrats your website is ready to Play
  • Finally, your tool in blogger is ready to use.

If you know how to play with HTML, CSS, and Javascript then you can even customize it in your preferable way.


Random Password Generator JavaScript Source Code

We are providing 3 password generator javascript source codes in this article so you can use any one of them. If you know JavaScript then you can easily understand the logic behind how it generator any random password or is based on user input.

Note: All Below script code credit goes to respected owners and geniuses who create and share with us. So If you are the original developer of any source code then, contact us for proper credits. Thanks for creating and sharing for free.

All below codes are easy to understand and use on any website.

You may also like the 404 error page HTML template download

Javascript Password Generator Based on Input Source code

Users can provide input string and length of the password to be generated using the tool, so basically, it will automatically generate a password based on user input provided. Also can specify the numbers of combinations they need.

Add CSS Code



<style type="text/css">
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

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

body {
	background: #0581ca;
	font-family: 'noto 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%;
	background: #328cd9;
}

.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: black;
}

.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: #4d9ff3;
}

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;
	}
}
</style>

HTML Code



<div class="Main-TPG">
<div class="intro-box">
  <h2>Random password generator</h2>
</div>
<div class="wrapper">
  <!-- Fields -->
  <div class="fields-box">
    <label for="new-chars">
      <span>Enter posible chars</span>
      <input type="text" id="new-chars">
    </label><label for="new-length">
      <span>Set string 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>
  <!-- Table -->
  <div class="table-box">
    <table class="Tbl-o">
      <!-- Dynamic content! -->
    </table>
  </div>
  <!-- Buttons -->
  <div class="buttons-box">
    <button onclick="download();">Save</button>
    <button onclick="printTable();">Print</button>
  </div>
</div>
</div>

Add JavaScript Code



//you can remove below jquery.min.js script if your website already contain it.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script>
  //Default values:
var setChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; //Posible 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   ThemesGadget.com\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);
</script>

Great! now your tool can be used. Comment down if you need more such types of tool scripts in blogger.

Strong Password Generator JavaScript source code

Modern design and attractive look with advanced options strong password generator using HTML and JavaScript.

Free Password generator javascript source code



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<style>
.  *{
margin: 0px;
padding: 0px;

  }
  body{
    background:#3B3939;
  }
.container {
  background-color: #fff;
  padding: 40px 80px;
  border-radius: 8px;
  width:90%;
}
h1 {
  color:black;
  height: 120px;
  line-height: 120px;
  font-size: 4rem;
  font-weight: 900;
  background: #55E5EC;
  text-align: center;
  font-family: 'Rokkitt', serif;
}
h2{
  font-family: 'Rokkitt', serif;
}
h4 {
  color: white;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin: 0 0 35px 0;
  font-family: 'Rokkitt', serif;
}
input[type=text]:focus {
  border-color: darken(#dce4ec, 20%);
}
.btn.btn-default {
  outline: none !important;
  &:active {
    background-color: darken(#95a5a6, 20%) !important;
  }
}


footer{
  background: black;
  color:white;
  Font-weight:bold;
}
.menubaar{
text-align:center:
}
.menubaar a{
color:darkblue;
font-weight:bold;
text-decoration:none;
font-family: 'Rokkitt', serif;

}
.menudesign{
float:right;
background:white;
width:50%;
font-family: 'Rokkitt', serif;

}
.fontsroboto{
font-family: 'Rokkitt', serif;

a{
  cursor:progress;
}

</style>
<h1>jQuery Password Generator <small>(v2)</small></h1>
<h4>Using jQuery to quickly and easily generate passwords.</h4>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control input-lg" rel="gp" data-size="32" data-character-set="a-z,A-Z,0-9,#">
          <span class="input-group-btn"><button type="button" class="btn btn-default btn-lg getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
    </div>
  </div>
  <br><br>
  <div class="row">
    <div class="col-sm-12">
      <h2>Script Demo</h2><hr>
      
      
      <div class="form-group">
        <label class="text-muted">Using all of the character sets:</label>
        <div class="input-group">
          <input type="text" class="form-control" rel="gp" data-size="32" data-character-set="a-z,A-Z,0-9,#">
          <span class="input-group-btn"><button type="button" class="btn btn-default getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
      <div class="form-group">
        <label class="text-muted">Using both the a-z and A-Z character sets:</label>
        <div class="input-group">
          <input type="text" class="form-control" rel="gp" data-size="32" data-character-set="a-z,A-Z">
          <span class="input-group-btn"><button type="button" class="btn btn-default getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
      <div class="form-group">
        <label class="text-muted">Using only the A-Z character set:</label>
        <div class="input-group">
          <input type="text" class="form-control" rel="gp" data-size="20" data-character-set="A-Z">
          <span class="input-group-btn"><button type="button" class="btn btn-default getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
      <div class="form-group">
        <label class="text-muted">Using only the a-z character set:</label>
        <div class="input-group">
          <input type="text" class="form-control" rel="gp" data-size="32" data-character-set="a-z">
          <span class="input-group-btn"><button type="button" class="btn btn-default getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
      <div class="form-group">
        <label class="text-muted">Using only the number character set:</label>
        <div class="input-group">
          <input type="text" class="form-control" rel="gp" data-size="12" data-character-set="0-9">
          <span class="input-group-btn"><button type="button" class="btn btn-default getNewPass"><span class="fa fa-refresh"></span></button></span>
        </div>
      </div>
      
      
    </div>
    <div class="col-sm-12">
      
      <h2>How It Works</h2><hr>
      <p><code>data-size</code> attribute is used to set the number of characters that is used in the field, if you need a password with 12 characters, then set this attribute to 12.</p>
      <p><code>data-character-set</code> attribute is used to set the character type used in the password. You can use numbers <code>0-9</code>, letters <code>a-z</code> (and or) <code>A-Z</code>, and spical characters <code>#</code>. All of these sets can be used individually work together.</p>
      
    </div>
  </div>
</div>
<script
  src="https://code.jquery.com/jquery-3.5.0.min.js"
  integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
  crossorigin="anonymous"></script>
<script>

// Generate a password string
function randString(id){
  var dataSet = $(id).attr('data-character-set').split(',');  
  var possible = '';
  if($.inArray('a-z', dataSet) >= 0){
    possible += 'abcdefghijklmnopqrstuvwxyz';
  }
  if($.inArray('A-Z', dataSet) >= 0){
    possible += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  }
  if($.inArray('0-9', dataSet) >= 0){
    possible += '0123456789';
  }
  if($.inArray('#', dataSet) >= 0){
    possible += '![]{}()%&*$#^<>~@|';
  }
  var text = '';
  for(var i=0; i < $(id).attr('data-size'); i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}

// Create a new password on page load
$('input[rel="gp"]').each(function(){
  $(this).val(randString($(this)));
});

// Create a new password
$(".getNewPass").click(function(){
  var field = $(this).closest('div').find('input[rel="gp"]');
  field.val(randString(field));
});

// Auto Select Pass On Focus
$('input[rel="gp"]').on("click", function () {
   $(this).select();
});

</script>

Javascript Password Generator tool script in blogger

Full page tool website script for blogger platform.

You can use and create Adsense Code convertor tool



<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap'>
<style>


button {
  border: 0;
  outline: 0;
}

.container {
  margin: 40px 0;
  width: 400px;
  height: 600px;
  padding: 10px 25px;
  background: #0a0e31;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15);
  font-family: "Montserrat";
}
.container h2.title {
  font-size: 1.75rem;
  margin: 10px -5px;
  margin-bottom: 30px;
  color: #fff;
}

.result {
  position: relative;
  width: 100%;
  height: 65px;
  overflow: hidden;
}
.result__info {
  position: absolute;
  bottom: 4px;
  color: #fff;
  font-size: 0.8rem;
  transition: all 150ms ease-in-out;
  transform: translateY(200%);
  opacity: 0;
}
.result__info.right {
  right: 8px;
}
.result__info.left {
  left: 8px;
}
.result__viewbox {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  line-height: 65px;
}
.result #copy-btn {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  z-index: 2;
}
.result #copy-btn:active {
  box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08);
}
.result:hover #copy-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.35);
}

.field-title {
  position: absolute;
  top: -10px;
  left: 8px;
  transform: translateY(-50%);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  font-size: 0.65rem;
  pointer-events: none;
  user-select: none;
}

.options {
  width: 100%;
  height: auto;
  margin: 50px 0;
}

.range__slider {
  position: relative;
  width: 100%;
  height: calc(65px - 10px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin: 30px 0;
}
.range__slider::before, .range__slider::after {
  position: absolute;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
}
.range__slider::before {
  content: attr(data-min);
  left: 10px;
}
.range__slider::after {
  content: attr(data-max);
  right: 10px;
}
.range__slider .length__title::after {
  content: attr(data-length);
  position: absolute;
  right: -16px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

#slider {
  -webkit-appearance: none;
  width: calc(100% - (70px));
  height: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.314);
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
#slider::-webkit-slider-thumb:hover {
  background: #d4d4d4;
  transform: scale(1.2);
}
#slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}
#slider::-moz-range-thumb:hover {
  background: #d4d4d4;
}

.settings {
  position: relative;
  height: auto;
  widows: 100%;
  display: flex;
  flex-direction: column;
}
.settings .setting {
  position: relative;
  width: 100%;
  height: calc(65px - 10px);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 10px 25px;
  color: #fff;
  margin-bottom: 8px;
}
.settings .setting input {
  opacity: 0;
  position: absolute;
}
.settings .setting input + label {
  user-select: none;
}
.settings .setting input + label::before, .settings .setting input + label::after {
  content: "";
  position: absolute;
  transition: 150ms cubic-bezier(0.24, 0, 0.5, 1);
  transform: translateY(-50%);
  top: 50%;
  right: 10px;
  cursor: pointer;
}
.settings .setting input + label::before {
  height: 30px;
  width: 50px;
  border-radius: 30px;
  background: rgba(214, 214, 214, 0.434);
}
.settings .setting input + label::after {
  height: 24px;
  width: 24px;
  border-radius: 60px;
  right: 32px;
  background: #fff;
}
.settings .setting input:checked + label:before {
  background: #5d68e2;
  transition: all 150ms cubic-bezier(0, 0, 0, 0.1);
}
.settings .setting input:checked + label:after {
  right: 14px;
}
.settings .setting input:focus + label:before {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}
.settings .setting input:disabled + label:before, .settings .setting input:disabled + label:after {
  cursor: not-allowed;
}
.settings .setting input:disabled + label:before {
  background: #4f4f6a;
}
.settings .setting input:disabled + label:after {
  background: #909090;
}

.btn.generate {
  user-select: none;
  position: relative;
  width: 100%;
  height: 50px;
  margin: 10px 0;
  border-radius: 8px;
  color: #fff;
  border: none;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  letter-spacing: 1px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
}
.btn.generate:active {
  transform: translateY(-3%);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.08);
}

.support {
  position: fixed;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  display: flex;
}

a {
  margin: 0 20px;
  color: #fff;
  font-size: 2rem;
  transition: all 400ms ease;
}

a:hover {
  color: #222;
}



@keyframes octocat-wave {
  0%, 100% {
    transform: rotate(0);
  }
  20%, 60% {
    transform: rotate(-20deg);
  }
  40%, 80% {
    transform: rotate(10deg);
  }
}
</style>

<div class="container">
 <h2 class="title">Password Generator</h2>
 <div class="result">
  <div class="result__title field-title">Generated Password</div>
  <div class="result__info right">click to copy</div>
  <div class="result__info left">copied</div>
  <div class="result__viewbox" id="result">CLICK GENERATE</div>
  <button id="copy-btn" style="--x: 0; --y: 0"><i class="far fa-copy"></i></button>
 </div>
 <div class="length range__slider" data-min="4" data-max="32">
  <div class="length__title field-title" data-length='0'>length:</div>
  <input id="slider" type="range" min="4" max="32" value="16" />
 </div>

 <div class="settings">
  <span class="settings__title field-title">settings</span>
  <div class="setting">
   <input type="checkbox" id="uppercase" checked />
   <label for="uppercase">Include Uppercase</label>
  </div>
  <div class="setting">
   <input type="checkbox" id="lowercase" checked />
   <label for="lowercase">Include Lowercase</label>
  </div>
  <div class="setting">
   <input type="checkbox" id="number" checked />
   <label for="number">Include Numbers</label>
  </div>
  <div class="setting">
   <input type="checkbox" id="symbol" />
   <label for="symbol">Include Symbols</label>
  </div>
 </div>

 <button class="btn generate" id="generate">Generate Password</button>
</div>



<script>
// This is a simple Password Generator App that will generate random password maybe you can you them to secure your account.
// I tried my best to make the code as simple as possible please dont mind the variable names.
// Also this idea came in my mind after checking Traversy Media's latest video.

// Clear the concole on every refresh
console.clear();
// set the body to full height
// document.body.style.height = `${innerHeight}px`

// Range Slider Properties.
// Fill : The trailing color that you see when you drag the slider.
// background : Default Range Slider Background
const sliderProps = {
 fill: "#0B1EDF",
 background: "rgba(255, 255, 255, 0.214)",
};

// Selecting the Range Slider container which will effect the LENGTH property of the password.
const slider = document.querySelector(".range__slider");

// Text which will show the value of the range slider.
const sliderValue = document.querySelector(".length__title");

// Using Event Listener to apply the fill and also change the value of the text.
slider.querySelector("input").addEventListener("input", event => {
 sliderValue.setAttribute("data-length", event.target.value);
 applyFill(event.target);
});
// Selecting the range input and passing it in the applyFill func.
applyFill(slider.querySelector("input"));
// This function is responsible to create the trailing color and setting the fill.
function applyFill(slider) {
 const percentage = (100 * (slider.value - slider.min)) / (slider.max - slider.min);
 const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage +
   0.1}%)`;
 slider.style.background = bg;
 sliderValue.setAttribute("data-length", slider.value);
}

// Object of all the function names that we will use to create random letters of password
const randomFunc = {
 lower: getRandomLower,
 upper: getRandomUpper,
 number: getRandomNumber,
 symbol: getRandomSymbol,
};

// Random more secure value
function secureMathRandom() {
 return window.crypto.getRandomValues(new Uint32Array(1))[0] / (Math.pow(2, 32) - 1);
}

// Generator Functions
// All the functions that are responsible to return a random value taht we will use to create password.
function getRandomLower() {
 return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}
function getRandomUpper() {
 return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}
function getRandomNumber() {
 return String.fromCharCode(Math.floor(secureMathRandom() * 10) + 48);
}
function getRandomSymbol() {
 const symbols = '~!@#$%^&*()_+{}":?><;.,';
 return symbols[Math.floor(Math.random() * symbols.length)];
}

// Selecting all the DOM Elements that are necessary -->

// The Viewbox where the result will be shown
const resultEl = document.getElementById("result");
// The input slider, will use to change the length of the password
const lengthEl = document.getElementById("slider");

// Checkboxes representing the options that is responsible to create differnt type of password based on user
const uppercaseEl = document.getElementById("uppercase");
const lowercaseEl = document.getElementById("lowercase");
const numberEl = document.getElementById("number");
const symbolEl = document.getElementById("symbol");

// Button to generate the password
const generateBtn = document.getElementById("generate");
// Button to copy the text
const copyBtn = document.getElementById("copy-btn");
// Result viewbox container
const resultContainer = document.querySelector(".result");
// Text info showed after generate button is clicked
const copyInfo = document.querySelector(".result__info.right");
// Text appear after copy button is clicked
const copiedInfo = document.querySelector(".result__info.left");

// if this variable is trye only then the copyBtn will appear, i.e. when the user first click generate the copyBth will interact.
let generatedPassword = false;

// Update Css Props of the COPY button
// Getting the bounds of the result viewbox container
let resultContainerBound = {
 left: resultContainer.getBoundingClientRect().left,
 top: resultContainer.getBoundingClientRect().top,
};
// This will update the position of the copy button based on mouse Position
resultContainer.addEventListener("mousemove", e => {
 resultContainerBound = {
  left: resultContainer.getBoundingClientRect().left,
  top: resultContainer.getBoundingClientRect().top,
 };
 if(generatedPassword){
  copyBtn.style.opacity = '1';
  copyBtn.style.pointerEvents = 'all';
  copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`);
  copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`);
 }else{
  copyBtn.style.opacity = '0';
  copyBtn.style.pointerEvents = 'none';
 }
});
window.addEventListener("resize", e => {
 resultContainerBound = {
  left: resultContainer.getBoundingClientRect().left,
  top: resultContainer.getBoundingClientRect().top,
 };
});

// Copy Password in clipboard
copyBtn.addEventListener("click", () => {
 const textarea = document.createElement("textarea");
 const password = resultEl.innerText;
 if (!password || password == "CLICK GENERATE") {
  return;
 }
 textarea.value = password;
 document.body.appendChild(textarea);
 textarea.select();
 document.execCommand("copy");
 textarea.remove();

 copyInfo.style.transform = "translateY(200%)";
 copyInfo.style.opacity = "0";
 copiedInfo.style.transform = "translateY(0%)";
 copiedInfo.style.opacity = "0.75";
});

// When Generate is clicked Password id generated.
generateBtn.addEventListener("click", () => {
 const length = +lengthEl.value;
 const hasLower = lowercaseEl.checked;
 const hasUpper = uppercaseEl.checked;
 const hasNumber = numberEl.checked;
 const hasSymbol = symbolEl.checked;
 generatedPassword = true;
 resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol);
 copyInfo.style.transform = "translateY(0%)";
 copyInfo.style.opacity = "0.75";
 copiedInfo.style.transform = "translateY(200%)";
 copiedInfo.style.opacity = "0";
});

// Function responsible to generate password and then returning it.
function generatePassword(length, lower, upper, number, symbol) {
 let generatedPassword = "";
 const typesCount = lower + upper + number + symbol;
 const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0]);
 if (typesCount === 0) {
  return "";
 }
 for (let i = 0; i < length; i++) {
  typesArr.forEach(type => {
   const funcName = Object.keys(type)[0];
   generatedPassword += randomFunc[funcName]();
  });
 }
 return generatedPassword.slice(0, length);
}

// function that handles the checkboxes state, so at least one needs to be selected. The last checkbox will be disabled.
function disableOnlyCheckbox(){
 let totalChecked = [uppercaseEl, lowercaseEl, numberEl, symbolEl].filter(el => el.checked)
 totalChecked.forEach(el => {
  if(totalChecked.length == 1){
   el.disabled = true;
  }else{
   el.disabled = false;
  }
 })
}

[uppercaseEl, lowercaseEl, numberEl, symbolEl].forEach(el => {
 el.addEventListener('click', () => {
  disableOnlyCheckbox()
 })
})
</script>

Finally, Now you script among the top password generator tool javascript code. So use it wisely and comment down below which one you like and use.


In Conclusion of Top 3 Random Password Generator JavaScript Source Code

A Long article Right!, but with amazing tool scripts, so I hope that this will work for you. Mostly in bloggers, these password generator tools can be used for free. And many tool scripts in blogger are provided on the website so again see you with a new and useful script for the blogger platform.

Comment Down your opinion and also which type of script or template you want on our website. Share this Post with every blogger you know.

See you in a new blog post.

Want to increase website speed know about Minify CSS and JavaScript in Blogger

I will try my best to fix any issues regarding this topic. We are providing you with many amazing scripts for free, So please follow us on YouTube Channel to get all updates and more useful content.

Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.
 
Read more:

Increase website ranking by add FAQ accordion in blogger

 


Previous
Next Post »